/* ==================================================
   VARIABLES GENERALES
================================================== */
:root {
    --black: #151515;
    --deep-black: #090909;
    --white: #ffffff;
    --paper: #f3f2ef;
    --paper-dark: #e5e3dd;
    --gray: #696969;
    --light-gray: #c9c7c1;
    --red: #e42626;
    --dark-red: #b81016;

    --font-display: "Anton", Arial, sans-serif;
    --font-elegant: "Italiana", "Times New Roman", serif;
    --font-body: "Inter", Arial, sans-serif;

    --page-width: 1180px;
    --transition: 250ms ease;
}


/* ==================================================
   RESET Y ESTILOS GENERALES
================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--black);
    background: var(--black);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body,
button,
input,
textarea {
    font-family: var(--font-body);
}

img {
    width: 100%;
    display: block;
    object-fit: cover;
}

a {
    color: inherit;
    text-decoration: none;
}

figure,
p,
h1,
h2,
h3 {
    margin-top: 0;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

address {
    font-style: normal;
}

::selection {
    color: var(--white);
    background: var(--red);
}


/* ==================================================
   HEADER / ENCABEZADO
================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    color: var(--white);
    background: rgba(21, 21, 21, 0.96);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(15px);
}

.header-container {
    width: min(calc(100% - 48px), var(--page-width));
    min-height: 88px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 40px;
    margin-inline: auto;
}


/* ==================================================
   LOGO DEL HEADER
================================================== */
.logo {
    width: max-content;
    display: flex;
    align-items: baseline;
    gap: 9px;
    color: var(--white);
}

.logo__main {
    font-family: var(--font-display);
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -0.04em;
}

.logo__small {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.3em;
}


/* ==================================================
   NAVEGACIÓN PRINCIPAL
================================================== */
.main-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
}

.main-navigation a {
    position: relative;
    padding: 10px 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.main-navigation a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 4px;
    left: 0;
    height: 1px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--transition);
}

.main-navigation a:hover::after,
.main-navigation a.is-active::after {
    transform: scaleX(1);
    transform-origin: left;
}


/* ==================================================
   CTA DEL HEADER
================================================== */
.header-call {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 13px 18px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition:
        color var(--transition),
        background-color var(--transition);
}

.header-call:hover {
    color: var(--black);
    background: var(--white);
}


/* ==================================================
   BOTÓN DEL MENÚ MÓVIL
================================================== */
.menu-button {
    display: none;
}


/* ==================================================
   FONDO GENERAL DE LA PÁGINA
================================================== */
.page-background {
    padding: 42px 24px 70px;
    background:
        radial-gradient(
            circle at 50% 20%,
            #252525 0%,
            var(--black) 46%,
            #101010 100%
        );
}


/* ==================================================
   CONTENEDOR EDITORIAL
================================================== */
.editorial-page {
    width: min(100%, var(--page-width));
    position: relative;
    margin-inline: auto;
    background: var(--paper);
    border-top: 9px solid var(--white);
    overflow: hidden;
}

.editorial-page + .editorial-page {
    border-top: 1px solid var(--black);
}


/* ==================================================
   ETIQUETAS DE SECCIÓN
================================================== */
.section-label {
    margin-bottom: 18px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.21em;
    text-transform: uppercase;
}

.section-label--light {
    color: rgba(255, 255, 255, 0.6);
}


/* ==================================================
   HERO / PORTADA EDITORIAL
================================================== */
.hero {
    min-height: 940px;
    padding: 28px 44px 56px;
}


/* ==================================================
   LÍNEA SUPERIOR DEL HERO
================================================== */
.hero-topline {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--black);
}

.hero-topline p {
    margin: 0;
    font-size: 0.57rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}


/* ==================================================
   PALABRA GIGANTE DEL HERO
================================================== */
.hero-word {
    position: absolute;
    z-index: 0;
    top: 65px;
    right: -18px;
    left: -8px;
    color: var(--red);
    font-family: var(--font-display);
    font-size: clamp(9rem, 20vw, 17rem);
    line-height: 0.75;
    letter-spacing: -0.075em;
    text-align: center;
    text-transform: uppercase;
    filter: blur(10px);
    opacity: 0.93;
    transform: scaleY(1.18);
    pointer-events: none;
}


/* ==================================================
   ENCABEZADO INTERNO DEL HERO
================================================== */
.hero-header {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(200px, 0.55fr);
    align-items: end;
    gap: 60px;
    padding-top: 75px;
}

.hero-header h1 {
    max-width: 740px;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(4.3rem, 8vw, 7.8rem);
    font-weight: 400;
    line-height: 0.82;
    letter-spacing: -0.05em;
    text-transform: uppercase;
}

.hero-header h1 span {
    display: block;
    color: var(--white);
    text-shadow:
        -1px -1px 0 var(--black),
        1px -1px 0 var(--black),
        -1px 1px 0 var(--black),
        1px 1px 0 var(--black);
}

.hero-header__right {
    padding-bottom: 8px;
}

.hero-header__right p:last-child {
    max-width: 280px;
    margin-bottom: 0;
    font-size: 0.78rem;
    line-height: 1.65;
}

.hero-number {
    margin-bottom: 12px;
    color: var(--red);
    font-family: var(--font-display);
    font-size: 2.8rem;
    line-height: 1;
}


/* ==================================================
   COLLAGE PRINCIPAL
================================================== */
.hero-collage {
    position: relative;
    z-index: 6;
    display: grid;
    grid-template-columns: 1fr 0.78fr 0.62fr;
    grid-template-rows: 215px 225px;
    gap: 14px;
    margin-top: 38px;
}


/* ==================================================
   IMAGEN PRINCIPAL DEL COLLAGE
================================================== */
.collage-image {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: var(--black);
}

.collage-image img {
    height: 100%;
    filter: saturate(0.85) contrast(1.04);
    transition: transform 700ms ease;
}

.collage-image:hover img {
    transform: scale(1.04);
}

.collage-image--main {
    grid-row: 1 / 3;
}

.collage-image--main figcaption {
    position: absolute;
    right: 12px;
    bottom: 12px;
    left: 12px;
    padding: 11px 13px;
    color: var(--white);
    background: rgba(0, 0, 0, 0.7);
    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


/* ==================================================
   HISTORIA CENTRAL DEL COLLAGE
================================================== */
.collage-story {
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
    background:
        linear-gradient(
            rgba(255, 255, 255, 0.78),
            rgba(255, 255, 255, 0.78)
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 5px,
            rgba(0, 0, 0, 0.025) 6px
        );
}

.collage-story__category {
    margin-bottom: 20px;
    color: var(--red);
    font-size: 0.59rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.collage-story h2 {
    margin-bottom: 19px;
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 4.2vw, 4.3rem);
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: -0.035em;
    text-transform: uppercase;
}

.collage-story > p:not(.collage-story__category) {
    margin-bottom: 25px;
    color: var(--gray);
    font-size: 0.75rem;
}

.collage-story a {
    width: max-content;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--red);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


/* ==================================================
   IMAGEN SECUNDARIA DEL COLLAGE
================================================== */
.collage-image--secondary {
    grid-column: 3;
    grid-row: 1;
}


/* ==================================================
   NOTA DECORATIVA DEL COLLAGE
================================================== */
.collage-note {
    grid-column: 3;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 25px;
    color: var(--white);
    background: var(--black);
}

.collage-note__symbol {
    color: var(--red);
    font-size: 2.5rem;
}

.collage-note p {
    margin: 0;
    font-family: var(--font-display);
    font-size: 2rem;
    line-height: 0.94;
    text-transform: uppercase;
}


/* ==================================================
   BOTONES DEL HERO
================================================== */
.hero-actions {
    position: relative;
    z-index: 8;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.button {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 14px 20px;
    border: 1px solid var(--black);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    transition:
        color var(--transition),
        background-color var(--transition),
        border-color var(--transition);
}

.button--black {
    color: var(--white);
    background: var(--black);
}

.button--black:hover {
    color: var(--white);
    border-color: var(--red);
    background: var(--red);
}

.button--outline {
    color: var(--black);
    background: transparent;
}

.button--outline:hover {
    color: var(--white);
    background: var(--black);
}

.button--white {
    color: var(--black);
    border-color: var(--white);
    background: var(--white);
}

.button--white:hover {
    color: var(--white);
    background: transparent;
}


/* ==================================================
   TEXTO MANUSCRITO DECORATIVO
================================================== */
.handwritten {
    position: absolute;
    z-index: 9;
    right: 50px;
    bottom: 42px;
    margin: 0;
    color: var(--red);
    font-family: cursive;
    font-size: 1.5rem;
    font-style: italic;
    transform: rotate(-8deg);
}


/* ==================================================
   SERVICIOS DESTACADOS
================================================== */
.services-preview {
    padding: 90px 44px 70px;
}


/* ==================================================
   ENCABEZADO DE SERVICIOS
================================================== */
.section-intro {
    display: grid;
    grid-template-columns: 1.45fr 0.55fr;
    align-items: end;
    gap: 60px;
    margin-bottom: 55px;
}

.section-intro h2 {
    margin-bottom: 0;
    font-family: var(--font-display);
    font-size: clamp(4rem, 7.8vw, 7.6rem);
    font-weight: 400;
    line-height: 0.84;
    letter-spacing: -0.05em;
    text-transform: uppercase;
}

.section-intro__text {
    margin-bottom: 5px;
    color: var(--gray);
    font-size: 0.8rem;
    line-height: 1.65;
}


/* ==================================================
   CUADRÍCULA DE SERVICIOS
================================================== */
.services-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 0.65fr;
    gap: 14px;
}


/* ==================================================
   TARJETAS DE SERVICIO
================================================== */
.service-card {
    position: relative;
    min-height: 500px;
    overflow: hidden;
}

.service-card--large img,
.service-card--small img {
    height: 100%;
    transition: transform 700ms ease;
}

.service-card--large:hover img,
.service-card--small:hover img {
    transform: scale(1.04);
}


/* ==================================================
   TARJETA GRANDE
================================================== */
.service-card--large {
    color: var(--white);
    background: var(--black);
}

.service-card--large::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.82),
            transparent 65%
        );
}

.service-card__content {
    position: absolute;
    z-index: 3;
    right: 25px;
    bottom: 25px;
    left: 25px;
}

.service-card__content > p {
    margin-bottom: 12px;
    color: var(--red);
    font-size: 0.68rem;
    font-weight: 800;
}

.service-card__content h3 {
    margin-bottom: 25px;
    font-family: var(--font-display);
    font-size: 3.8rem;
    font-weight: 400;
    line-height: 0.88;
    text-transform: uppercase;
}

.service-card__content a {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}


/* ==================================================
   TARJETA DE TEXTO
================================================== */
.service-card--text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 38px;
    color: var(--white);
    background: var(--red);
}

.service-card__eyebrow {
    margin-bottom: 45px;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.service-card--text h3 {
    margin-bottom: 30px;
    font-family: var(--font-display);
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 0.85;
    text-transform: uppercase;
}

.service-card--text > p:not(.service-card__eyebrow) {
    margin-bottom: 32px;
    font-size: 0.76rem;
    line-height: 1.65;
}

.service-card--text a {
    width: max-content;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--white);
    font-size: 0.61rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


/* ==================================================
   TARJETA PEQUEÑA
================================================== */
.service-card--small {
    background: var(--black);
}

.service-card__small-label {
    position: absolute;
    right: 13px;
    bottom: 13px;
    left: 13px;
    padding: 13px;
    color: var(--white);
    background: var(--black);
    font-size: 0.61rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}


/* ==================================================
   ESTÁNDARES DE ALURA
================================================== */
.standards {
    padding: 90px 44px;
}


/* ==================================================
   TÍTULO DE ESTÁNDARES
================================================== */
.standards-title {
    position: relative;
    margin-bottom: 65px;
}

.standards-title::after {
    content: "";
    position: absolute;
    top: 30px;
    right: -70px;
    width: 340px;
    height: 110px;
    background: var(--red);
    filter: blur(32px);
    opacity: 0.85;
    transform: rotate(-7deg);
}

.standards-title h2 {
    position: relative;
    z-index: 2;
    max-width: 920px;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(4rem, 8vw, 8.3rem);
    font-weight: 400;
    line-height: 0.82;
    letter-spacing: -0.055em;
    text-transform: uppercase;
}

.standards-title h2 span {
    display: block;
    color: var(--red);
}


/* ==================================================
   LISTA DE ESTÁNDARES
================================================== */
.standards-list {
    border-top: 2px solid var(--black);
}

.standard-item {
    display: grid;
    grid-template-columns: 70px 1fr 1fr;
    align-items: center;
    gap: 30px;
    min-height: 130px;
    border-bottom: 1px solid var(--light-gray);
    transition:
        color var(--transition),
        background-color var(--transition),
        padding var(--transition);
}

.standard-item:hover {
    padding-inline: 20px;
    color: var(--white);
    background: var(--black);
}

.standard-item__number {
    margin: 0;
    color: var(--red);
    font-size: 0.66rem;
    font-weight: 800;
}

.standard-item h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 3.4rem;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
}

.standard-item > p:last-child {
    max-width: 430px;
    margin: 0;
    color: var(--gray);
    font-size: 0.76rem;
}

.standard-item:hover > p:last-child {
    color: rgba(255, 255, 255, 0.7);
}


/* ==================================================
   SECCIÓN DE RESERVA
================================================== */
.cta-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 660px;
    padding: 0;
    color: var(--white);
    background: var(--black);
}


/* ==================================================
   IMAGEN DE RESERVA
================================================== */
.cta-section__image {
    min-height: 660px;
}

.cta-section__image img {
    height: 100%;
    filter: grayscale(1) contrast(1.04);
}


/* ==================================================
   CONTENIDO DE RESERVA
================================================== */
.cta-section__content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 65px;
    overflow: hidden;
}

.cta-section__content::before {
    content: "BOOK";
    position: absolute;
    right: -25px;
    bottom: -35px;
    color: rgba(255, 255, 255, 0.045);
    font-family: var(--font-display);
    font-size: 12rem;
    line-height: 0.8;
}

.cta-section__content h2 {
    position: relative;
    z-index: 2;
    margin-bottom: 30px;
    font-family: var(--font-display);
    font-size: clamp(4rem, 6.5vw, 6.7rem);
    font-weight: 400;
    line-height: 0.82;
    letter-spacing: -0.045em;
    text-transform: uppercase;
}

.cta-section__content > p:not(.section-label) {
    position: relative;
    z-index: 2;
    max-width: 430px;
    margin-bottom: 32px;
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.8rem;
    line-height: 1.7;
}

.cta-section__content .button {
    position: relative;
    z-index: 2;
    width: max-content;
}



/* ==================================================
   RESEÑAS DE CLIENTES
================================================== */
.reviews-section {
    padding: 90px 44px 70px;
    color: var(--white);
    background: var(--black);
}


/* ==================================================
   ENCABEZADO DE RESEÑAS
================================================== */
.reviews-header {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.6fr);
    align-items: end;
    gap: 60px;
    margin-bottom: 45px;
}

.reviews-header h2 {
    max-width: 820px;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(4rem, 8vw, 8rem);
    font-weight: 400;
    line-height: 0.84;
    letter-spacing: -0.05em;
    text-transform: uppercase;
}

.reviews-header h2 span {
    display: block;
    color: var(--red);
}

.reviews-header__text {
    padding-bottom: 8px;
}

.reviews-header__text > p:last-child {
    max-width: 330px;
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.78rem;
    line-height: 1.7;
}

.reviews-stars {
    margin: 0;
    color: var(--red);
    font-size: 1.35rem;
    letter-spacing: 0.12em;
}


/* ==================================================
   WIDGET DE RESEÑAS
================================================== */
.reviews-widget {
    min-height: 530px;
    overflow: hidden;
    padding: 12px;
    background: var(--paper);
}

.reviews-widget iframe {
    width: 100%;
    min-height: 506px;
    display: block;
    border: 0;
    background: var(--paper);
}


/* ==================================================
   UBICACIÓN
================================================== */
.location-section {
    min-height: 660px;
    display: grid;
    grid-template-columns: 1.12fr 0.88fr;
    padding: 0;
    color: var(--white);
    background: var(--black);
}


/* ==================================================
   MAPA
================================================== */
.location-map {
    min-height: 660px;
    overflow: hidden;
    background: var(--paper-dark);
    filter: grayscale(1) contrast(1.06);
}

.location-map iframe {
    width: 100%;
    height: 100%;
    min-height: 660px;
    display: block;
    border: 0;
}


/* ==================================================
   CONTENIDO DE UBICACIÓN
================================================== */
.location-content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 65px;
    overflow: hidden;
}

.location-content::before {
    content: "CHICAGO";
    position: absolute;
    right: -22px;
    bottom: -8px;
    color: rgba(255, 255, 255, 0.035);
    font-family: var(--font-display);
    font-size: 8rem;
    line-height: 0.8;
    writing-mode: vertical-rl;
    pointer-events: none;
}

.location-content h2 {
    position: relative;
    z-index: 2;
    margin-bottom: 28px;
    font-family: var(--font-display);
    font-size: clamp(4rem, 6.5vw, 6.7rem);
    font-weight: 400;
    line-height: 0.82;
    letter-spacing: -0.045em;
    text-transform: uppercase;
}

.location-content h2 span {
    display: block;
    color: var(--red);
}

.location-description {
    position: relative;
    z-index: 2;
    max-width: 430px;
    margin-bottom: 35px;
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.8rem;
    line-height: 1.7;
}


/* ==================================================
   DATOS DE UBICACIÓN
================================================== */
.location-detail {
    position: relative;
    z-index: 2;
    padding: 18px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.location-detail__title {
    margin-bottom: 8px;
    color: var(--red);
    font-size: 0.61rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.location-detail address,
.location-detail a {
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.82rem;
    line-height: 1.8;
}

.location-button {
    position: relative;
    z-index: 2;
    width: max-content;
    margin-top: 24px;
}


/* ==================================================
   FOOTER
================================================== */
.site-footer {
    color: var(--white);
    background: var(--deep-black);
}

.footer-container {
    width: min(calc(100% - 48px), var(--page-width));
    display: grid;
    grid-template-columns: 1.7fr repeat(4, 1fr);
    gap: 45px;
    margin-inline: auto;
    padding: 70px 0;
}


/* ==================================================
   MARCA DEL FOOTER
================================================== */
.logo--footer {
    margin-bottom: 25px;
}

.footer-brand > p {
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    line-height: 1.7;
}


/* ==================================================
   COLUMNAS DEL FOOTER
================================================== */
.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.footer-title {
    margin-bottom: 14px;
    color: var(--red);
    font-size: 0.61rem;
    font-weight: 800;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.footer-column a,
.footer-column address {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.72rem;
    line-height: 1.8;
    transition: color var(--transition);
}

.footer-column a:hover {
    color: var(--white);
}


/* ==================================================
   PARTE INFERIOR DEL FOOTER
================================================== */
.footer-bottom {
    width: min(calc(100% - 48px), var(--page-width));
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-inline: auto;
    padding: 22px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-bottom p,
.footer-bottom a {
    margin: 0;
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


/* ==================================================
   BOTONES FLOTANTES
================================================== */
.floating-controls {
    position: fixed;
    z-index: 900;
    right: 22px;
    bottom: 22px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.floating-controls a {
    width: 49px;
    height: 49px;
    display: grid;
    place-items: center;
    color: var(--black);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.16);
    font-size: 1.25rem;
    transition:
        color var(--transition),
        background-color var(--transition),
        transform var(--transition);
    backdrop-filter: blur(10px);
}

.floating-controls a:hover {
    color: var(--white);
    background: var(--red);
    transform: translateX(-4px);
}


/* ==================================================
   RESPONSIVE PARA TABLET
================================================== */
@media (max-width: 980px) {

    /* HEADER */
    .header-container {
        grid-template-columns: 1fr auto;
    }

    .header-call {
        display: none;
    }

    /* MENÚ MÓVIL */
    .menu-button {
        position: relative;
        z-index: 20;
        width: 44px;
        height: 44px;
        display: grid;
        place-content: center;
        justify-self: end;
        cursor: pointer;
    }

    .menu-button span {
        width: 25px;
        height: 1px;
        display: block;
        margin: 4px 0;
        background: var(--white);
        transition: transform var(--transition);
    }

    .main-navigation {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        display: grid;
        gap: 0;
        padding: 20px 24px 30px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        background: var(--black);
        visibility: hidden;
        opacity: 0;
        transform: translateY(-20px);
        transition:
            visibility var(--transition),
            opacity var(--transition),
            transform var(--transition);
    }

    .main-navigation a {
        padding: 18px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .site-header.is-menu-open .main-navigation {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }

    .menu-button[aria-expanded="true"] span:first-child {
        transform: translateY(5px) rotate(45deg);
    }

    .menu-button[aria-expanded="true"] span:last-child {
        transform: translateY(-4px) rotate(-45deg);
    }

    /* HERO */
    .hero {
        min-height: auto;
    }

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

    .hero-header__right {
        max-width: 400px;
    }

    .hero-collage {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 350px 280px;
    }

    .collage-image--main {
        grid-column: 1;
        grid-row: 1;
    }

    .collage-story {
        grid-column: 2;
        grid-row: 1 / 3;
    }

    .collage-image--secondary {
        grid-column: 1;
        grid-row: 2;
    }

    .collage-note {
        display: none;
    }

    /* SERVICIOS */
    .section-intro {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .section-intro__text {
        max-width: 500px;
    }

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

    .service-card--small {
        grid-column: 1 / 3;
        min-height: 350px;
    }

    /* RESERVA */
    .cta-section {
        grid-template-columns: 1fr;
    }

    .cta-section__image {
        min-height: 480px;
    }

    /* FOOTER */
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-brand {
        grid-column: 1 / 3;
    }

}


/* ==================================================
   RESPONSIVE PARA CELULAR
================================================== */
@media (max-width: 640px) {

    /* ESTRUCTURA GENERAL */
    .page-background {
        padding: 20px 12px 40px;
    }

    .header-container {
        width: min(calc(100% - 28px), var(--page-width));
    }

    .editorial-page {
        border-top-width: 6px;
    }

    /* HERO */
    .hero {
        padding: 20px 18px 45px;
    }

    .hero-topline p:nth-child(2) {
        display: none;
    }

    .hero-word {
        top: 105px;
        font-size: 8rem;
        filter: blur(7px);
    }

    .hero-header {
        padding-top: 65px;
    }

    .hero-header h1 {
        font-size: clamp(3.6rem, 17vw, 5.3rem);
    }

    .hero-collage {
        display: flex;
        flex-direction: column;
    }

    .collage-image--main {
        height: 400px;
    }

    .collage-story {
        min-height: 400px;
        padding: 28px;
    }

    .collage-image--secondary {
        height: 260px;
    }

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

    .button {
        width: 100%;
    }

    .handwritten {
        display: none;
    }

    /* SERVICIOS */
    .services-preview,
    .standards {
        padding: 70px 18px 50px;
    }

    .section-intro h2,
    .standards-title h2 {
        font-size: clamp(3.5rem, 16vw, 5.2rem);
    }

    .services-grid {
        display: flex;
        flex-direction: column;
    }

    .service-card {
        min-height: 440px;
    }

    .service-card--small {
        min-height: 300px;
    }

    /* ESTÁNDARES */
    .standards-title::after {
        width: 190px;
        height: 90px;
    }

    .standard-item {
        grid-template-columns: 40px 1fr;
        gap: 15px;
        padding: 26px 0;
    }

    .standard-item h3 {
        font-size: 2.6rem;
    }

    .standard-item > p:last-child {
        grid-column: 2;
    }

    /* RESERVA */
    .cta-section__image {
        min-height: 380px;
    }

    .cta-section__content {
        padding: 60px 20px;
    }

    .cta-section__content h2 {
        font-size: clamp(3.6rem, 16vw, 5.3rem);
    }

    .cta-section__content .button {
        width: 100%;
    }

    /* FOOTER */
    .footer-container {
        width: min(calc(100% - 36px), var(--page-width));
        grid-template-columns: 1fr;
    }

    .footer-brand {
        grid-column: auto;
    }

    .footer-bottom {
        width: min(calc(100% - 36px), var(--page-width));
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    /* BOTONES FLOTANTES */
    .floating-controls {
        right: 12px;
        bottom: 12px;
    }

}



/* ==================================================
   RESPONSIVE DE RESEÑAS Y UBICACIÓN / TABLET
================================================== */
@media (max-width: 980px) {
    .reviews-header {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .location-section {
        grid-template-columns: 1fr;
    }

    .location-map,
    .location-map iframe {
        min-height: 480px;
    }
}


/* ==================================================
   RESPONSIVE DE RESEÑAS Y UBICACIÓN / CELULAR
================================================== */
@media (max-width: 640px) {
    .reviews-section {
        padding: 70px 18px 50px;
    }

    .reviews-header h2 {
        font-size: clamp(3.5rem, 16vw, 5.2rem);
    }

    .reviews-widget {
        min-height: 600px;
        padding: 5px;
    }

    .reviews-widget iframe {
        min-height: 590px;
    }

    .location-map,
    .location-map iframe {
        min-height: 390px;
    }

    .location-content {
        padding: 60px 20px;
    }

    .location-content h2 {
        font-size: clamp(3.6rem, 16vw, 5.3rem);
    }

    .location-button {
        width: 100%;
    }
}


/* ==================================================
   ACCESIBILIDAD / REDUCIR ANIMACIONES
================================================== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

}

/* ==================================================
   PÁGINA DE SERVICIOS / PORTADA
   REEMPLAZA EL ADITAMENTO ANTERIOR POR ESTE BLOQUE
================================================== */
.services-page-hero {
    min-height: auto;
    padding: 28px 44px 54px;
}


/* ==================================================
   ENCABEZADO DE LA PORTADA DE SERVICIOS
================================================== */
.services-page-hero__heading {
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) minmax(240px, 0.58fr);
    align-items: end;
    gap: 60px;
    padding: 72px 0 42px;
}

.services-page-hero__heading h1 {
    max-width: 920px;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(4.4rem, 8.6vw, 8.4rem);
    font-weight: 400;
    line-height: 0.82;
    letter-spacing: -0.055em;
    text-transform: uppercase;
}

.services-page-hero__heading h1 span {
    display: block;
    color: var(--red);
}

.services-page-hero__intro {
    padding-bottom: 8px;
}

.services-page-hero__intro > p:last-child {
    max-width: 300px;
    margin: 0;
    color: var(--gray);
    font-size: 0.78rem;
    line-height: 1.7;
}

.services-page-hero__number {
    margin-bottom: 14px;
    color: var(--red);
    font-family: var(--font-display);
    font-size: 3rem;
    line-height: 1;
}


/* ==================================================
   IMAGEN DE PORTADA DE SERVICIOS
================================================== */
.services-page-hero__image {
    position: relative;
    min-height: 520px;
    margin: 0;
    overflow: hidden;
    background: var(--black);
}

.services-page-hero__image > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 47%;
    transition: transform 800ms ease;
}

.services-page-hero__image:hover > img {
    transform: scale(1.035);
}

.services-page-hero__image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.74) 0%,
            rgba(0, 0, 0, 0.34) 46%,
            rgba(0, 0, 0, 0.08) 76%
        ),
        linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.52),
            transparent 50%
        );
}

.services-page-hero__image-copy {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 42px;
    max-width: 550px;
    color: var(--white);
    transform: translateY(-50%);
}

.services-page-hero__image-copy > p {
    margin-bottom: 14px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.61rem;
    font-weight: 800;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.services-page-hero__image-copy h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(3.4rem, 6vw, 6rem);
    font-weight: 400;
    line-height: 0.86;
    letter-spacing: -0.04em;
    text-transform: uppercase;
}

.services-page-hero__image figcaption {
    position: absolute;
    z-index: 2;
    right: 22px;
    bottom: 20px;
    left: 22px;
    color: var(--white);
    font-size: 0.59rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.services-page-hero__image-label {
    position: absolute;
    z-index: 2;
    top: 26px;
    right: 27px;
    color: var(--white);
    text-align: right;
}

.services-page-hero__image-label span {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-elegant);
    font-size: 4.8rem;
    line-height: 0.8;
}

.services-page-hero__image-label p {
    margin: 0;
    font-size: 0.57rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}


/* ==================================================
   SECCIÓN DE LISTA DE PRECIOS
================================================== */
.services-menu-section {
    padding: 90px 44px;
}


/* ==================================================
   ENCABEZADO DE LA LISTA DE PRECIOS
================================================== */
.services-menu-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(240px, 0.55fr);
    align-items: end;
    gap: 60px;
    margin-bottom: 65px;
}

.services-menu-heading h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(4rem, 8vw, 8rem);
    font-weight: 400;
    line-height: 0.84;
    letter-spacing: -0.05em;
    text-transform: uppercase;
}

.services-menu-heading h2 span {
    display: block;
    color: var(--red);
}

.services-menu-heading > p {
    max-width: 340px;
    margin-bottom: 7px;
    color: var(--gray);
    font-size: 0.79rem;
    line-height: 1.7;
}


/* ==================================================
   DISTRIBUCIÓN DE LA LISTA DE PRECIOS
================================================== */
.services-menu-layout {
    display: grid;
    grid-template-columns: minmax(255px, 0.54fr) minmax(0, 1.46fr);
    align-items: start;
    gap: 14px;
}


/* ==================================================
   BLOQUE LATERAL DE SERVICIOS
================================================== */
.services-menu-aside {
    position: sticky;
    top: 112px;
    min-height: 520px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 34px;
    color: var(--white);
    background: var(--black);
    overflow: hidden;
}

.services-menu-aside::before {
    content: "SERVICES";
    position: absolute;
    top: 34px;
    right: -18px;
    color: rgba(255, 255, 255, 0.045);
    font-family: var(--font-display);
    font-size: 6.2rem;
    line-height: 0.8;
    writing-mode: vertical-rl;
    pointer-events: none;
}

.services-menu-aside__number {
    position: absolute;
    top: 29px;
    left: 31px;
    margin: 0;
    color: var(--red);
    font-family: var(--font-display);
    font-size: 3.2rem;
    line-height: 1;
}

.services-menu-aside h3 {
    position: relative;
    z-index: 2;
    margin-bottom: 24px;
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 4vw, 4.2rem);
    font-weight: 400;
    line-height: 0.88;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.services-menu-aside > p:not(.services-menu-aside__number) {
    position: relative;
    z-index: 2;
    margin-bottom: 28px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.76rem;
    line-height: 1.7;
}

.services-menu-aside .button {
    position: relative;
    z-index: 2;
    width: 100%;
    color: var(--black);
    border-color: var(--white);
    background: var(--white);
}

.services-menu-aside .button:hover {
    color: var(--white);
    border-color: var(--red);
    background: var(--red);
}


/* ==================================================
   GRUPOS DE PRECIOS
================================================== */
.price-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.price-group {
    min-height: 430px;
    padding: 32px;
    border: 1px solid var(--light-gray);
    background: rgba(255, 255, 255, 0.5);
}

.price-group--red {
    color: var(--white);
    border-color: var(--red);
    background: var(--red);
}

.price-group--dark {
    color: var(--white);
    border-color: var(--black);
    background: var(--black);
}

.price-group--wide,
.price-group--combos {
    grid-column: 1 / 3;
    min-height: auto;
}


/* ==================================================
   ENCABEZADO DE CADA GRUPO
================================================== */
.price-group__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 35px;
    padding-bottom: 24px;
    border-bottom: 2px solid currentColor;
}

.price-group__heading p {
    margin: 0;
    color: var(--red);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.price-group--red .price-group__heading p {
    color: var(--white);
}

.price-group__heading h3 {
    max-width: 82%;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 4vw, 4.1rem);
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: -0.03em;
    text-align: right;
    text-transform: uppercase;
}


/* ==================================================
   FILAS Y PRECIOS
================================================== */
.price-list {
    display: grid;
}

.price-list--two-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 42px;
}

.price-list--three-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 28px;
}

.price-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    min-height: 58px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
    transition:
        padding var(--transition),
        color var(--transition),
        background-color var(--transition);
}

.price-group--red .price-row,
.price-group--dark .price-row {
    border-bottom-color: rgba(255, 255, 255, 0.24);
}

.price-row:hover {
    padding-inline: 10px;
    color: var(--white);
    background: var(--black);
}

.price-group--dark .price-row:hover,
.price-group--red .price-row:hover {
    color: var(--black);
    background: var(--white);
}

.price-row p {
    margin: 0;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.02em;
}

.price-row span {
    color: var(--red);
    font-family: var(--font-display);
    font-size: 1.65rem;
    line-height: 1;
}

.price-group--red .price-row span {
    color: var(--white);
}

.price-group--red .price-row:hover span,
.price-group--dark .price-row:hover span {
    color: var(--red);
}


/* ==================================================
   RESERVA DE LA PÁGINA DE SERVICIOS
================================================== */
.services-cta .cta-section__image img {
    filter: none;
    object-position: center 55%;
}


/* ==================================================
   RESPONSIVE DE SERVICIOS / TABLET
================================================== */
@media (max-width: 980px) {
    .services-page-hero__heading,
    .services-menu-heading {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .services-page-hero__intro,
    .services-menu-heading > p {
        max-width: 500px;
    }

    .services-page-hero__image {
        min-height: 560px;
    }

    .services-menu-layout {
        grid-template-columns: 1fr;
    }

    .services-menu-aside {
        position: relative;
        top: auto;
        min-height: 390px;
    }

    .price-list--three-columns {
        grid-template-columns: 1fr;
    }
}


/* ==================================================
   RESPONSIVE DE SERVICIOS / CELULAR
================================================== */
@media (max-width: 640px) {
    .services-page-hero {
        padding: 20px 18px 32px;
    }

    .services-page-hero__heading {
        padding: 62px 0 35px;
    }

    .services-page-hero__heading h1,
    .services-menu-heading h2 {
        font-size: clamp(3.5rem, 16vw, 5.3rem);
    }

    .services-page-hero__image {
        min-height: 620px;
    }

    .services-page-hero__image > img {
        object-position: 50% center;
    }

    .services-page-hero__image-copy {
        top: auto;
        right: 22px;
        bottom: 58px;
        left: 22px;
        transform: none;
    }

    .services-page-hero__image-copy h2 {
        font-size: clamp(3rem, 14vw, 4.6rem);
    }

    .services-page-hero__image-label {
        top: 22px;
        right: 20px;
    }

    .services-page-hero__image-label span {
        font-size: 3.8rem;
    }

    .services-menu-section {
        padding: 70px 18px 50px;
    }

    .price-groups {
        grid-template-columns: 1fr;
    }

    .price-group--wide,
    .price-group--combos {
        grid-column: auto;
    }

    .price-list--two-columns,
    .price-list--three-columns {
        grid-template-columns: 1fr;
    }

    .price-group {
        min-height: auto;
        padding: 28px 22px;
    }

    .services-menu-aside {
        min-height: 430px;
        padding: 28px 22px;
    }

    .price-group__heading h3 {
        font-size: 2.8rem;
    }
}
/* ==================================================
   CORRECCIÓN DEL TÍTULO ENHANCEMENTS
================================================== */
.price-group--red {
    overflow: hidden;
}

.price-group--red .price-group__heading {
    align-items: flex-start;
    gap: 12px;
}

.price-group--red .price-group__heading h3 {
    max-width: calc(100% - 40px);
    font-size: clamp(2rem, 2.8vw, 2.8rem);
    line-height: 0.9;
    letter-spacing: -0.045em;
    white-space: nowrap;
    text-align: right;
}


/* ==================================================
   CORRECCIÓN EN CELULAR
================================================== */
@media (max-width: 640px) {
    .price-group--red .price-group__heading h3 {
        max-width: calc(100% - 35px);
        font-size: 2.15rem;
    }
}
/* ==================================================
   PÁGINA A TODO EL ANCHO
   ELIMINA LOS MÁRGENES NEGROS LATERALES
================================================== */
.page-background {
    padding: 0;
}


/* Las secciones ahora abarcan toda la pantalla */
.editorial-page {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}


/* ==================================================
   CONTENIDO INTERNO CENTRADO
   Conserva la composición editorial original
================================================== */
.hero,
.experience,
.services-preview,
.gallery-section,
.standards,
.reviews-section,
.services-page-hero,
.services-menu-section {
    padding-left: max(
        44px,
        calc((100vw - 1180px) / 2 + 44px)
    );

    padding-right: max(
        44px,
        calc((100vw - 1180px) / 2 + 44px)
    );
}


/* ==================================================
   AJUSTE PARA CELULAR
================================================== */
@media (max-width: 640px) {
    .hero,
    .experience,
    .services-preview,
    .gallery-section,
    .standards,
    .reviews-section,
    .services-page-hero,
    .services-menu-section {
        padding-left: 18px;
        padding-right: 18px;
    }
}
/* ==================================================
   PÁGINA ABOUT
   AGREGA ESTE BLOQUE AL FINAL DE styles.css
================================================== */


/* ==================================================
   CONTENEDOR INTERNO DE ABOUT
   Mantiene el contenido centrado aunque la página sea full width
================================================== */
.about-container {
    width: min(calc(100% - 88px), var(--page-width));
    margin-inline: auto;
}


/* ==================================================
   PORTADA ABOUT
================================================== */
.about-hero {
    padding: 28px 0 54px;
    background: var(--paper);
}


/* ==================================================
   ENCABEZADO DE PORTADA ABOUT
================================================== */
.about-hero__heading {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(240px, 0.55fr);
    align-items: end;
    gap: 60px;
    padding: 72px 0 42px;
}

.about-hero__heading h1 {
    max-width: 900px;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(4.6rem, 9vw, 8.8rem);
    font-weight: 400;
    line-height: 0.82;
    letter-spacing: -0.055em;
    text-transform: uppercase;
}

.about-hero__heading h1 span {
    display: block;
    color: var(--red);
}

.about-hero__intro {
    padding-bottom: 8px;
}

.about-hero__intro > p:last-child {
    max-width: 300px;
    margin: 0;
    color: var(--gray);
    font-size: 0.78rem;
    line-height: 1.7;
}

.about-hero__number {
    margin-bottom: 14px;
    color: var(--red);
    font-family: var(--font-display);
    font-size: 3rem;
    line-height: 1;
}


/* ==================================================
   IMAGEN PRINCIPAL DE ABOUT
================================================== */
.about-hero__image {
    position: relative;
    min-height: 570px;
    margin: 0;
    overflow: hidden;
    background: var(--black);
}

.about-hero__image > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 52%;
    transition: transform 800ms ease;
}

.about-hero__image:hover > img {
    transform: scale(1.035);
}

.about-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.75) 0%,
            rgba(0, 0, 0, 0.34) 45%,
            rgba(0, 0, 0, 0.04) 75%
        ),
        linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.48),
            transparent 48%
        );
}

.about-hero__image-copy {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 44px;
    color: var(--white);
    transform: translateY(-50%);
}

.about-hero__image-copy > p {
    margin-bottom: 14px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.61rem;
    font-weight: 800;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.about-hero__image-copy h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(3.8rem, 7vw, 7rem);
    font-weight: 400;
    line-height: 0.84;
    letter-spacing: -0.045em;
    text-transform: uppercase;
}

.about-hero__image figcaption {
    position: absolute;
    z-index: 2;
    right: 22px;
    bottom: 20px;
    left: 22px;
    color: var(--white);
    font-size: 0.59rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}


/* ==================================================
   SECCIONES OUR SALON Y OUR TEAM
================================================== */
.about-story-section {
    padding: 92px 0;
    background: var(--paper);
}

.about-story-section--dark {
    color: var(--white);
    background: var(--black);
}

.about-story {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
    align-items: stretch;
    gap: 14px;
}

.about-story--reverse {
    grid-template-columns: minmax(340px, 0.92fr) minmax(0, 1.08fr);
}


/* ==================================================
   IMAGEN DE LAS HISTORIAS
================================================== */
.about-story__image {
    position: relative;
    min-height: 650px;
    margin: 0;
    overflow: hidden;
    background: var(--black);
}

.about-story__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 750ms ease;
}

.about-story__image:hover img {
    transform: scale(1.035);
}

.about-story__image figcaption {
    position: absolute;
    right: 15px;
    bottom: 15px;
    left: 15px;
    padding: 12px 14px;
    color: var(--white);
    background: rgba(0, 0, 0, 0.76);
    font-size: 0.59rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}


/* ==================================================
   CONTENIDO DE LAS HISTORIAS
================================================== */
.about-story__content {
    position: relative;
    min-height: 650px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(40px, 6vw, 78px);
    border: 1px solid var(--light-gray);
    background: rgba(255, 255, 255, 0.52);
    overflow: hidden;
}

.about-story-section--dark .about-story__content {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.035);
}

.about-story__content::before {
    content: "ALURA";
    position: absolute;
    right: -26px;
    bottom: -22px;
    color: rgba(0, 0, 0, 0.035);
    font-family: var(--font-display);
    font-size: 9rem;
    line-height: 0.8;
    pointer-events: none;
}

.about-story-section--dark .about-story__content::before {
    color: rgba(255, 255, 255, 0.035);
}

.about-story__number {
    position: absolute;
    top: 30px;
    right: 32px;
    margin: 0;
    color: var(--red);
    font-family: var(--font-display);
    font-size: 3rem;
    line-height: 1;
}

.about-story__content h2 {
    position: relative;
    z-index: 2;
    margin-bottom: 30px;
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 6vw, 6rem);
    font-weight: 400;
    line-height: 0.84;
    letter-spacing: -0.045em;
    text-transform: uppercase;
}

.about-story__content h2 span {
    display: block;
    color: var(--red);
}

.about-story__content > p:not(
    .about-story__number,
    .section-label
) {
    position: relative;
    z-index: 2;
    max-width: 510px;
    margin-bottom: 18px;
    color: var(--gray);
    font-size: 0.8rem;
    line-height: 1.8;
}

.about-story-section--dark
.about-story__content > p:not(
    .about-story__number,
    .section-label
) {
    color: rgba(255, 255, 255, 0.64);
}


/* ==================================================
   ENLACES DE ABOUT
================================================== */
.about-inline-link {
    position: relative;
    z-index: 2;
    width: max-content;
    margin-top: 15px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--red);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.about-inline-link--light {
    color: var(--white);
}


/* ==================================================
   VALORES DE ALURA
================================================== */
.about-values {
    padding: 92px 0;
    background: var(--paper);
}

.about-values__heading {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(240px, 0.55fr);
    align-items: end;
    gap: 60px;
    margin-bottom: 62px;
}

.about-values__heading h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(4rem, 8vw, 8rem);
    font-weight: 400;
    line-height: 0.84;
    letter-spacing: -0.05em;
    text-transform: uppercase;
}

.about-values__heading h2 span {
    display: block;
    color: var(--red);
}

.about-values__heading > p {
    max-width: 340px;
    margin-bottom: 8px;
    color: var(--gray);
    font-size: 0.79rem;
    line-height: 1.7;
}


/* ==================================================
   TARJETAS DE VALORES
================================================== */
.about-values__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 2px solid var(--black);
}

.about-value-card {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 28px;
    border-right: 1px solid var(--light-gray);
    transition:
        color var(--transition),
        background-color var(--transition);
}

.about-value-card:last-child {
    border-right: 0;
}

.about-value-card:hover {
    color: var(--white);
    background: var(--black);
}

.about-value-card > p {
    margin: 0;
    color: var(--red);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.about-value-card h3 {
    margin: auto 0 25px;
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 3.7vw, 4rem);
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.about-value-card span {
    color: var(--gray);
    font-size: 0.75rem;
    line-height: 1.65;
}

.about-value-card:hover span {
    color: rgba(255, 255, 255, 0.66);
}


/* ==================================================
   RESERVA DE ABOUT
================================================== */
.about-booking .cta-section__image img {
    filter: none;
    object-position: center 52%;
}


/* ==================================================
   RESPONSIVE ABOUT / TABLET
================================================== */
@media (max-width: 980px) {
    .about-hero__heading,
    .about-values__heading {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .about-hero__intro,
    .about-values__heading > p {
        max-width: 500px;
    }

    .about-story,
    .about-story--reverse {
        grid-template-columns: 1fr;
    }

    .about-story--reverse .about-story__content {
        order: 2;
    }

    .about-story--reverse .about-story__image {
        order: 1;
    }

    .about-story__image,
    .about-story__content {
        min-height: 560px;
    }

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

    .about-value-card:nth-child(2) {
        border-right: 0;
    }

    .about-value-card:nth-child(-n + 2) {
        border-bottom: 1px solid var(--light-gray);
    }
}


/* ==================================================
   RESPONSIVE ABOUT / CELULAR
================================================== */
@media (max-width: 640px) {
    .about-container {
        width: min(calc(100% - 36px), var(--page-width));
    }

    .about-hero {
        padding: 20px 0 32px;
    }

    .about-hero__heading {
        padding: 62px 0 35px;
    }

    .about-hero__heading h1,
    .about-values__heading h2 {
        font-size: clamp(3.5rem, 16vw, 5.3rem);
    }

    .about-hero__image {
        min-height: 640px;
    }

    .about-hero__image > img {
        object-position: 54% center;
    }

    .about-hero__image-copy {
        top: auto;
        right: 22px;
        bottom: 58px;
        left: 22px;
        transform: none;
    }

    .about-hero__image-copy h2 {
        font-size: clamp(3.4rem, 15vw, 5rem);
    }

    .about-story-section,
    .about-values {
        padding: 70px 0 50px;
    }

    .about-story__image {
        min-height: 480px;
    }

    .about-story__content {
        min-height: auto;
        padding: 72px 24px 52px;
    }

    .about-story__content h2 {
        font-size: clamp(3.4rem, 15vw, 5rem);
    }

    .about-values__grid {
        grid-template-columns: 1fr;
    }

    .about-value-card,
    .about-value-card:nth-child(2) {
        min-height: 260px;
        border-right: 0;
        border-bottom: 1px solid var(--light-gray);
    }

    .about-value-card:last-child {
        border-bottom: 0;
    }
}
/* ==================================================
   PÁGINA ABOUT CORREGIDA
   ELIMINA EL ADITAMENTO ABOUT ANTERIOR
   Y AGREGA ESTE BLOQUE AL FINAL DE styles.css
================================================== */


/* ==================================================
   CONTENEDOR INTERNO
================================================== */
.about-page-shell {
    width: min(calc(100% - 88px), var(--page-width));
    margin-inline: auto;
}


/* ==================================================
   PORTADA ABOUT
================================================== */
.about-page-hero {
    padding: 28px 0 54px;
    background: var(--paper);
}


/* ==================================================
   ENCABEZADO DE PORTADA
================================================== */
.about-page-hero__heading {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(220px, 0.55fr);
    align-items: end;
    gap: 60px;
    padding: 72px 0 42px;
}

.about-page-hero__heading h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(4.7rem, 9vw, 8.9rem);
    font-weight: 400;
    line-height: 0.82;
    letter-spacing: -0.055em;
    text-transform: uppercase;
}

.about-page-hero__heading h1 span {
    display: block;
    color: var(--red);
}

.about-page-hero__side {
    margin: 0 0 8px;
    color: var(--gray);
    font-size: 0.69rem;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}


/* ==================================================
   IMAGEN PRINCIPAL
================================================== */
.about-page-hero__image {
    position: relative;
    min-height: 560px;
    margin: 0;
    overflow: hidden;
    background: var(--black);
}

.about-page-hero__image > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 48%;
    transition: transform 800ms ease;
}

.about-page-hero__image:hover > img {
    transform: scale(1.035);
}

.about-page-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.78) 0%,
            rgba(0, 0, 0, 0.34) 46%,
            rgba(0, 0, 0, 0.04) 76%
        ),
        linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.46),
            transparent 48%
        );
}

.about-page-hero__image-copy {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 44px;
    color: var(--white);
    transform: translateY(-50%);
}

.about-page-hero__image-copy > p {
    margin-bottom: 14px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.61rem;
    font-weight: 800;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.about-page-hero__image-copy h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(3.8rem, 7vw, 7rem);
    font-weight: 400;
    line-height: 0.84;
    letter-spacing: -0.045em;
    text-transform: uppercase;
}

.about-page-hero__image figcaption {
    position: absolute;
    z-index: 2;
    right: 22px;
    bottom: 20px;
    left: 22px;
    color: var(--white);
    font-size: 0.59rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}


/* ==================================================
   SECCIONES OUR SALON Y OUR TEAM
================================================== */
.about-page-section {
    padding: 92px 0;
    background: var(--paper);
}

.about-page-section--dark {
    color: var(--white);
    background: var(--black);
}

.about-page-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
    align-items: stretch;
    gap: 14px;
}

.about-page-feature--reverse {
    grid-template-columns: minmax(340px, 0.92fr) minmax(0, 1.08fr);
}


/* ==================================================
   IMÁGENES DE ABOUT
================================================== */
.about-page-feature__image {
    position: relative;
    min-height: 650px;
    margin: 0;
    overflow: hidden;
    background: var(--black);
}

.about-page-feature__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 750ms ease;
}

.about-page-feature__image:hover img {
    transform: scale(1.035);
}

.about-page-feature__image figcaption {
    position: absolute;
    right: 15px;
    bottom: 15px;
    left: 15px;
    padding: 12px 14px;
    color: var(--white);
    background: rgba(0, 0, 0, 0.76);
    font-size: 0.59rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}


/* ==================================================
   TEXTO DE ABOUT
================================================== */
.about-page-feature__content {
    position: relative;
    min-height: 650px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(42px, 6vw, 78px);
    border: 1px solid var(--light-gray);
    background: rgba(255, 255, 255, 0.54);
    overflow: hidden;
}

.about-page-section--dark .about-page-feature__content {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.035);
}

.about-page-feature__content::before {
    content: "ALURA";
    position: absolute;
    right: -26px;
    bottom: -20px;
    color: rgba(0, 0, 0, 0.035);
    font-family: var(--font-display);
    font-size: 9rem;
    line-height: 0.8;
    pointer-events: none;
}

.about-page-section--dark
.about-page-feature__content::before {
    color: rgba(255, 255, 255, 0.035);
}

.about-page-feature__number {
    position: absolute;
    top: 30px;
    right: 32px;
    margin: 0;
    color: var(--red);
    font-family: var(--font-display);
    font-size: 3rem;
    line-height: 1;
}

.about-page-feature__content h2 {
    position: relative;
    z-index: 2;
    margin-bottom: 30px;
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 6vw, 6rem);
    font-weight: 400;
    line-height: 0.84;
    letter-spacing: -0.045em;
    text-transform: uppercase;
}

.about-page-feature__content h2 span {
    display: block;
    color: var(--red);
}

.about-page-feature__content > p:not(
    .about-page-feature__number,
    .section-label
) {
    position: relative;
    z-index: 2;
    max-width: 560px;
    margin-bottom: 25px;
    color: var(--gray);
    font-size: 0.84rem;
    line-height: 1.9;
}

.about-page-section--dark
.about-page-feature__content > p:not(
    .about-page-feature__number,
    .section-label
) {
    color: rgba(255, 255, 255, 0.68);
}


/* ==================================================
   ENLACES DE ABOUT
================================================== */
.about-page-link {
    position: relative;
    z-index: 2;
    width: max-content;
    margin-top: 4px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--red);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.about-page-link--light {
    color: var(--white);
}


/* ==================================================
   LLAMADO FINAL
================================================== */
.about-page-cta {
    padding: 92px 0;
    color: var(--white);
    background: var(--red);
}

.about-page-cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) auto;
    align-items: end;
    gap: 60px;
}

.about-page-cta h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(4rem, 8vw, 8rem);
    font-weight: 400;
    line-height: 0.84;
    letter-spacing: -0.05em;
    text-transform: uppercase;
}

.about-page-cta h2 span {
    display: block;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--white);
}

.about-page-cta__action {
    padding-bottom: 8px;
}


/* ==================================================
   RESPONSIVE ABOUT / TABLET
================================================== */
@media (max-width: 980px) {
    .about-page-hero__heading {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .about-page-feature,
    .about-page-feature--reverse {
        grid-template-columns: 1fr;
    }

    .about-page-feature--reverse
    .about-page-feature__content {
        order: 2;
    }

    .about-page-feature--reverse
    .about-page-feature__image {
        order: 1;
    }

    .about-page-feature__image,
    .about-page-feature__content {
        min-height: 560px;
    }

    .about-page-cta__inner {
        grid-template-columns: 1fr;
    }

    .about-page-cta__action {
        max-width: 320px;
    }
}


/* ==================================================
   RESPONSIVE ABOUT / CELULAR
================================================== */
@media (max-width: 640px) {
    .about-page-shell {
        width: min(calc(100% - 36px), var(--page-width));
    }

    .about-page-hero {
        padding: 20px 0 32px;
    }

    .about-page-hero__heading {
        padding: 62px 0 35px;
    }

    .about-page-hero__heading h1,
    .about-page-cta h2 {
        font-size: clamp(3.5rem, 16vw, 5.3rem);
    }

    .about-page-hero__image {
        min-height: 620px;
    }

    .about-page-hero__image > img {
        object-position: 50% center;
    }

    .about-page-hero__image-copy {
        top: auto;
        right: 22px;
        bottom: 58px;
        left: 22px;
        transform: none;
    }

    .about-page-hero__image-copy h2 {
        font-size: clamp(3.4rem, 15vw, 5rem);
    }

    .about-page-section,
    .about-page-cta {
        padding: 70px 0 50px;
    }

    .about-page-feature__image {
        min-height: 470px;
    }

    .about-page-feature__content {
        min-height: auto;
        padding: 76px 24px 54px;
    }

    .about-page-feature__content h2 {
        font-size: clamp(3.4rem, 15vw, 5rem);
    }

    .about-page-feature__content > p:not(
        .about-page-feature__number,
        .section-label
    ) {
        font-size: 0.8rem;
        line-height: 1.8;
    }

    .about-page-cta__action,
    .about-page-cta__action .button {
        width: 100%;
        max-width: none;
    }
}
/* ==================================================
   PÁGINA CONTACT
   AGREGA ESTE BLOQUE AL FINAL DE styles.css
================================================== */


/* ==================================================
   CONTENEDOR INTERNO
================================================== */
.contact-page-shell {
    width: min(calc(100% - 88px), var(--page-width));
    margin-inline: auto;
}


/* ==================================================
   PORTADA CONTACT
================================================== */
.contact-page-hero {
    padding: 28px 0 54px;
    background: var(--paper);
}


/* ==================================================
   ENCABEZADO DE PORTADA
================================================== */
.contact-page-hero__heading {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
    align-items: end;
    gap: 60px;
    padding: 72px 0 42px;
}

.contact-page-hero__heading h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(4.7rem, 9vw, 8.9rem);
    font-weight: 400;
    line-height: 0.82;
    letter-spacing: -0.055em;
    text-transform: uppercase;
}

.contact-page-hero__heading h1 span {
    display: block;
    color: var(--red);
}

.contact-page-hero__intro {
    max-width: 350px;
    margin: 0 0 8px;
    color: var(--gray);
    font-size: 0.8rem;
    line-height: 1.75;
}


/* ==================================================
   IMAGEN PRINCIPAL
================================================== */
.contact-page-hero__image {
    position: relative;
    min-height: 560px;
    margin: 0;
    overflow: hidden;
    background: var(--black);
}

.contact-page-hero__image > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 50%;
    transition: transform 800ms ease;
}

.contact-page-hero__image:hover > img {
    transform: scale(1.035);
}

.contact-page-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.78) 0%,
            rgba(0, 0, 0, 0.34) 46%,
            rgba(0, 0, 0, 0.04) 76%
        ),
        linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.46),
            transparent 48%
        );
}

.contact-page-hero__image-copy {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 44px;
    color: var(--white);
    transform: translateY(-50%);
}

.contact-page-hero__image-copy > p {
    margin-bottom: 14px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.61rem;
    font-weight: 800;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.contact-page-hero__image-copy h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(3.8rem, 7vw, 7rem);
    font-weight: 400;
    line-height: 0.84;
    letter-spacing: -0.045em;
    text-transform: uppercase;
}

.contact-page-hero__image figcaption {
    position: absolute;
    z-index: 2;
    right: 22px;
    bottom: 20px;
    left: 22px;
    color: var(--white);
    font-size: 0.59rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}


/* ==================================================
   SECCIÓN CONTACTO Y FORMULARIO
================================================== */
.contact-page-main {
    padding: 92px 0;
    background: var(--paper);
}

.contact-page-grid {
    display: grid;
    grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
    align-items: stretch;
    gap: 14px;
}


/* ==================================================
   PANEL DE INFORMACIÓN
================================================== */
.contact-info-panel {
    position: relative;
    min-height: 760px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(36px, 5vw, 62px);
    color: var(--white);
    background: var(--black);
    overflow: hidden;
}

.contact-info-panel::before {
    content: "CONTACT";
    position: absolute;
    top: 35px;
    right: -22px;
    color: rgba(255, 255, 255, 0.04);
    font-family: var(--font-display);
    font-size: 6.3rem;
    line-height: 0.8;
    writing-mode: vertical-rl;
    pointer-events: none;
}

.contact-info-panel__number {
    position: absolute;
    top: 30px;
    left: 32px;
    margin: 0;
    color: var(--red);
    font-family: var(--font-display);
    font-size: 3rem;
    line-height: 1;
}

.contact-info-panel h2 {
    position: relative;
    z-index: 2;
    margin-bottom: 38px;
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 5.5vw, 5.8rem);
    font-weight: 400;
    line-height: 0.84;
    letter-spacing: -0.045em;
    text-transform: uppercase;
}

.contact-info-panel h2 span {
    display: block;
    color: var(--red);
}


/* ==================================================
   ELEMENTOS DE INFORMACIÓN
================================================== */
.contact-info-item {
    position: relative;
    z-index: 2;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.contact-info-item__label {
    margin-bottom: 8px;
    color: var(--red);
    font-size: 0.61rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.contact-info-item a,
.contact-info-item address,
.contact-info-item > p:not(.contact-info-item__label) {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    line-height: 1.8;
}

.contact-info-button {
    position: relative;
    z-index: 2;
    width: 100%;
    margin-top: 25px;
}


/* ==================================================
   REDES SOCIALES
================================================== */
.contact-social {
    position: relative;
    z-index: 2;
    margin-top: 34px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.contact-social__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.contact-social__links a {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    transition: color var(--transition);
}

.contact-social__links a:hover {
    color: var(--red);
}


/* ==================================================
   PANEL DEL FORMULARIO
================================================== */
.contact-form-panel {
    min-height: 760px;
    padding: clamp(40px, 6vw, 78px);
    border: 1px solid var(--light-gray);
    background: rgba(255, 255, 255, 0.54);
}

.contact-form-panel h2 {
    margin-bottom: 20px;
    font-family: var(--font-display);
    font-size: clamp(3.7rem, 6vw, 6.2rem);
    font-weight: 400;
    line-height: 0.84;
    letter-spacing: -0.045em;
    text-transform: uppercase;
}

.contact-form-panel h2 span {
    display: block;
    color: var(--red);
}

.contact-form-panel__description {
    max-width: 520px;
    margin-bottom: 42px;
    color: var(--gray);
    font-size: 0.8rem;
    line-height: 1.75;
}


/* ==================================================
   MAPA Y UBICACIÓN
================================================== */
.contact-location {
    min-height: 660px;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    padding: 0;
    color: var(--white);
    background: var(--black);
}

.contact-location__map {
    min-height: 660px;
    overflow: hidden;
    background: var(--paper-dark);
    filter: grayscale(1) contrast(1.06);
}

.contact-location__map iframe {
    width: 100%;
    height: 100%;
    min-height: 660px;
    display: block;
    border: 0;
}

.contact-location__content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(45px, 6vw, 78px);
    overflow: hidden;
}

.contact-location__content::before {
    content: "CHICAGO";
    position: absolute;
    right: -25px;
    bottom: -10px;
    color: rgba(255, 255, 255, 0.035);
    font-family: var(--font-display);
    font-size: 8rem;
    line-height: 0.8;
    writing-mode: vertical-rl;
    pointer-events: none;
}

.contact-location__content h2 {
    position: relative;
    z-index: 2;
    margin-bottom: 35px;
    font-family: var(--font-display);
    font-size: clamp(3.8rem, 6.5vw, 6.6rem);
    font-weight: 400;
    line-height: 0.84;
    letter-spacing: -0.045em;
    text-transform: uppercase;
}

.contact-location__content h2 span {
    display: block;
    color: var(--red);
}

.contact-location__content address {
    position: relative;
    z-index: 2;
    margin-bottom: 35px;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.84rem;
    line-height: 1.85;
}

.contact-location__content .button {
    position: relative;
    z-index: 2;
    width: max-content;
}


/* ==================================================
   RESPONSIVE CONTACT / TABLET
================================================== */
@media (max-width: 980px) {
    .contact-page-hero__heading {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .contact-page-hero__intro {
        max-width: 540px;
    }

    .contact-page-grid {
        grid-template-columns: 1fr;
    }

    .contact-info-panel,
    .contact-form-panel {
        min-height: auto;
    }

    .contact-info-panel {
        padding-top: 100px;
    }

    .contact-location {
        grid-template-columns: 1fr;
    }

    .contact-location__map,
    .contact-location__map iframe {
        min-height: 480px;
    }
}


/* ==================================================
   RESPONSIVE CONTACT / CELULAR
================================================== */
@media (max-width: 640px) {
    .contact-page-shell {
        width: min(calc(100% - 36px), var(--page-width));
    }

    .contact-page-hero {
        padding: 20px 0 32px;
    }

    .contact-page-hero__heading {
        padding: 62px 0 35px;
    }

    .contact-page-hero__heading h1 {
        font-size: clamp(3.5rem, 16vw, 5.3rem);
    }

    .contact-page-hero__image {
        min-height: 620px;
    }

    .contact-page-hero__image > img {
        object-position: 52% center;
    }

    .contact-page-hero__image-copy {
        top: auto;
        right: 22px;
        bottom: 58px;
        left: 22px;
        transform: none;
    }

    .contact-page-hero__image-copy h2 {
        font-size: clamp(3.4rem, 15vw, 5rem);
    }

    .contact-page-main {
        padding: 70px 0 50px;
    }

    .contact-info-panel,
    .contact-form-panel {
        padding-right: 24px;
        padding-left: 24px;
    }

    .contact-form-panel h2,
    .contact-location__content h2 {
        font-size: clamp(3.4rem, 15vw, 5rem);
    }

    .contact-form {
        grid-template-columns: 1fr;
    }

    .contact-form__field--full,
    .contact-form__submit {
        grid-column: auto;
    }

    .contact-form__submit,
    .contact-form__submit .button {
        width: 100%;
    }

    .contact-location__map,
    .contact-location__map iframe {
        min-height: 390px;
    }

    .contact-location__content {
        padding: 65px 20px;
    }

    .contact-location__content .button {
        width: 100%;
    }
}
/* ==================================================
   IMAGEN PRINCIPAL DE CONTACT CORREGIDA
================================================== */
.contact-page-hero__image {
    min-height: 560px;
}

.contact-page-hero__image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: brightness(0.82) contrast(1.03);
}


/* Oscurece especialmente la zona izquierda para leer el título */
.contact-page-hero__overlay {
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.82) 0%,
            rgba(0, 0, 0, 0.52) 38%,
            rgba(0, 0, 0, 0.12) 72%,
            rgba(0, 0, 0, 0.04) 100%
        ),
        linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.38),
            transparent 52%
        );
}


/* ==================================================
   CONTACT EN CELULAR
================================================== */
@media (max-width: 640px) {
    .contact-page-hero__image {
        min-height: 580px;
    }

    .contact-page-hero__image > img {
        object-position: 57% center;
    }
}
/* ==================================================
   SIGNATURE LOOKS - HARMONIZED FINAL VERSION
================================================== */
.signature-looks {
    padding: 0;
    background: linear-gradient(180deg, var(--paper) 0%, #ece9e2 100%);
}

.signature-concept-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.95fr) minmax(340px, 1fr) minmax(260px, 0.88fr);
    gap: 36px;
    align-items: center;
    padding: 58px 48px 54px;
}

.signature-copy__eyebrow,
.signature-panel__label {
    margin-bottom: 18px;
    color: #5d5752;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.signature-copy h2 {
    margin-bottom: 22px;
    color: var(--black);
    font-family: var(--font-elegant);
    font-size: clamp(3.2rem, 5vw, 5.4rem);
    line-height: 0.92;
    letter-spacing: -0.05em;
}

.signature-copy h2 span {
    display: block;
    color: #7b736d;
    font-style: italic;
}

.signature-copy__text {
    max-width: 340px;
    margin-bottom: 32px;
    color: #5f5a56;
    font-size: 1rem;
    line-height: 1.75;
}

.signature-copy__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
}

.signature-copy__meta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--black);
}

.signature-copy__icon {
    width: 46px;
    height: 46px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(21, 21, 21, 0.12);
    border-radius: 50%;
    background: #e8e4dd;
    color: var(--black);
    font-size: 0.95rem;
}

.signature-copy__meta strong {
    display: block;
    font-size: 0.76rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.signature-copy__meta span:last-child {
    display: block;
    margin-top: 3px;
    color: #706a65;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
}

.signature-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    min-height: auto;
}

.signature-stage::before,
.signature-stage::after,
.signature-stage__glow,
.signature-stage__caption {
    display: none !important;
}

.signature-stage img {
    width: min(100%, 430px);
    aspect-ratio: 4 / 5;
    object-fit: contain;
    object-position: center;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.signature-panel {
    padding: 0 0 0 12px;
    background: transparent;
    border: none;
    border-left: 1px solid rgba(21, 21, 21, 0.1);
    backdrop-filter: none;
}

.signature-panel h3 {
    margin-bottom: 14px;
    color: var(--black);
    font-family: var(--font-body);
    font-size: 1.32rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.signature-panel__text {
    max-width: 290px;
    margin-bottom: 26px;
    color: #5f5a56;
    font-size: 0.98rem;
    line-height: 1.75;
}

.design-swatches {
    display: grid;
    grid-template-columns: repeat(3, 68px);
    gap: 14px;
    margin-bottom: 28px;
}

.design-swatch {
    width: 68px;
    height: 68px;
    padding: 0;
    border: 2px solid rgba(21, 21, 21, 0.08);
    border-radius: 50%;
    background: var(--white);
    overflow: hidden;
    box-shadow: 0 6px 14px rgba(21, 21, 21, 0.08);
    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.design-swatch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.design-swatch:hover {
    transform: translateY(-2px);
    border-color: rgba(228, 38, 38, 0.42);
    box-shadow: 0 10px 18px rgba(21, 21, 21, 0.12);
}

.design-swatch.is-active {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(228, 38, 38, 0.16);
}

.signature-panel__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid rgba(21, 21, 21, 0.14);
    border-radius: 999px;
    background: transparent;
    color: var(--black);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.signature-panel__link:hover {
    color: var(--white);
    background: var(--black);
    border-color: var(--black);
}

@media (max-width: 1080px) {
    .signature-concept-layout {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 44px 28px 42px;
    }

    .signature-copy,
    .signature-panel {
        max-width: 100%;
    }

    .signature-stage {
        order: 2;
    }

    .signature-panel {
        order: 3;
        padding: 0;
        border-left: none;
        border-top: 1px solid rgba(21, 21, 21, 0.1);
        padding-top: 24px;
    }

    .signature-copy__text,
    .signature-panel__text {
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    .signature-concept-layout {
        padding: 36px 20px 38px;
        gap: 24px;
    }

    .signature-copy h2 {
        font-size: 2.8rem;
    }

    .signature-stage img {
        width: min(100%, 330px);
    }

    .design-swatches {
        grid-template-columns: repeat(3, 58px);
        gap: 12px;
    }

    .design-swatch {
        width: 58px;
        height: 58px;
    }
}

/* Smooth preview change */
.signature-stage img {
    transition: opacity 180ms ease, transform 180ms ease;
}

.signature-stage img.is-changing {
    opacity: 0.2;
    transform: scale(0.985);
}


/* ==================================================
   PRODUCTION REFINEMENTS
================================================== */
body {
    animation: page-enter 360ms ease both;
    transition: opacity 150ms ease;
}

body.is-leaving {
    opacity: 0;
}

@keyframes page-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}

.logo {
    width: min(252px, 26vw);
    display: block;
    line-height: 0;
}

.logo--footer {
    width: min(270px, 100%);
}

.brand-logo-image {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.menu-button {
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
}

:where(a, button, input, textarea, select):focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 4px;
}

.design-swatch:focus-visible {
    outline-offset: 3px;
}

.contact-action-list {
    display: grid;
    gap: 12px;
}

.contact-action-card {
    min-height: 92px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
    border: 1px solid rgba(21, 21, 21, 0.14);
    background: rgba(255, 255, 255, 0.48);
    transition: transform var(--transition), background-color var(--transition), border-color var(--transition);
}

.contact-action-card:hover {
    transform: translateY(-2px);
    border-color: rgba(21, 21, 21, 0.32);
    background: var(--white);
}

.contact-action-card__number {
    color: var(--red);
    font-family: var(--font-display);
    font-size: 1.65rem;
    line-height: 1;
}

.contact-action-card__copy {
    display: grid;
    gap: 4px;
}

.contact-action-card__copy strong {
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.contact-action-card__copy small {
    color: var(--gray);
    font-size: 0.75rem;
}

.contact-action-card__arrow {
    font-size: 1rem;
}

.selected-look-notice {
    margin: -8px 0 28px;
    padding: 18px 20px;
    border-left: 3px solid var(--red);
    background: rgba(228, 38, 38, 0.06);
}

.selected-look-notice[hidden] {
    display: none;
}

.selected-look-notice > span {
    display: block;
    margin-bottom: 5px;
    color: var(--gray);
    font-size: 0.61rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.selected-look-notice strong {
    display: block;
    margin-bottom: 6px;
    font-size: 1rem;
}

.selected-look-notice p,
.contact-response-note {
    margin: 0;
    color: var(--gray);
    font-size: 0.75rem;
    line-height: 1.7;
}

.contact-response-note {
    margin-top: 22px;
}

.floating-controls a:first-child {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

@media (max-width: 980px) {
    .logo { width: min(230px, 58vw); }
}

@media (max-width: 640px) {
    .site-header { backdrop-filter: blur(10px); }
    .header-container { min-height: 74px; }
    .logo { width: min(205px, 62vw); }
    .contact-form-panel { min-height: auto; padding: 40px 24px; }
    .contact-action-card { min-height: 82px; padding: 18px; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    body { animation: none; transition: none; }
    .contact-action-card { transition: none; }
}


/* ==================================================
   FINAL DELIVERY 2 — LAYOUT + SIGNATURE LOOKS POLISH
   Keeps the experience lightweight (no 3D) and removes
   excess vertical space on large desktop viewports.
================================================== */
.hero {
    min-height: auto !important;
}

.signature-looks {
    min-height: 0 !important;
    padding: 0 !important;
}

.signature-concept-layout {
    min-height: 0 !important;
    align-content: center;
    padding-top: clamp(38px, 4vw, 64px) !important;
    padding-bottom: clamp(38px, 4vw, 64px) !important;
}

.signature-stage {
    min-height: 0 !important;
    align-self: center;
}

.signature-stage img {
    display: block;
    width: min(100%, 440px);
    height: auto;
    aspect-ratio: 1122 / 1402;
    object-fit: contain;
}

/* The swatches are the design selector; no extra Colors/View all button is needed. */
.signature-panel__link {
    display: none !important;
}

/* Cleaner premium phone CTAs — avoids the inconsistent legacy phone glyph. */
.header-call {
    gap: 0;
    white-space: nowrap;
}

.floating-controls a {
    font-family: var(--font-body);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .08em;
}

@media (min-width: 1081px) {
    .signature-concept-layout {
        grid-template-columns: minmax(250px, .88fr) minmax(360px, 1fr) minmax(270px, .84fr);
        gap: clamp(28px, 3vw, 52px);
    }
}

@media (max-width: 1080px) {
    .signature-concept-layout {
        padding-top: 42px !important;
        padding-bottom: 42px !important;
    }
}

@media (max-width: 640px) {
    .signature-concept-layout {
        padding-top: 32px !important;
        padding-bottom: 34px !important;
    }
    .signature-stage img {
        width: min(100%, 340px);
    }
    .floating-controls a:last-child {
        display: none;
    }
}

/* ==================================================
   FINAL MERGE V10 — OLD TEMPLATE + CURRENT FEATURES
   The original editorial template remains the visual source of truth.
================================================== */

/* Loader — same editorial vocabulary as the original template */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--white);
    background: var(--deep-black);
    transition: opacity 600ms ease, visibility 600ms ease;
}
.page-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-issue {
    position: absolute;
    top: 28px;
    left: 34px;
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.46);
}
.loader-word {
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translate(-50%,-50%) scaleY(1.16);
    font-family: var(--font-display);
    font-size: clamp(8rem, 25vw, 23rem);
    line-height: .7;
    letter-spacing: -.075em;
    color: var(--red);
    opacity: .86;
    filter: blur(10px);
    animation: loader-pulse 1.35s ease-in-out infinite alternate;
}
.loader-lockup {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: clamp(18px,4vw,60px);
    text-transform: uppercase;
}
.loader-lockup span {
    font-size: clamp(.58rem,1vw,.82rem);
    font-weight: 800;
    letter-spacing: .4em;
}
.loader-lockup strong {
    font-family: var(--font-elegant);
    font-size: clamp(4rem,10vw,9rem);
    font-weight: 400;
    line-height: 1;
}
.loader-progress {
    position: absolute;
    left: 50%;
    bottom: 44px;
    width: min(360px,72vw);
    height: 1px;
    background: rgba(255,255,255,.18);
    transform: translateX(-50%);
    overflow: hidden;
}
.loader-progress i { display:block; width:45%; height:100%; background:var(--red); animation:loader-line 1.15s ease-in-out infinite; }
@keyframes loader-pulse { to { opacity:.98; filter:blur(4px); transform:translate(-50%,-50%) scaleY(1.2) scaleX(1.02); } }
@keyframes loader-line { 0%{transform:translateX(-120%)} 100%{transform:translateX(330%)} }

/* Cinematic sticky feature — styled as an editorial spread, not a new design system */
.experience-scroll {
    height: 270vh;
    padding: 0;
    background: var(--paper);
    overflow: visible;
}
.experience-sticky {
    position: sticky;
    top: 88px;
    height: calc(100vh - 88px);
    min-height: 620px;
    padding: 26px 32px 28px;
    overflow: hidden;
    background: var(--paper);
    border-top: 1px solid var(--black);
    border-bottom: 1px solid var(--black);
}
.experience-topline,
.experience-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.experience-topline { height: 34px; padding-bottom: 12px; border-bottom: 1px solid var(--black); }
.experience-topline b { color: var(--red); font-weight: 900; }
.experience-grid {
    height: calc(100% - 70px);
    display: grid;
    grid-template-columns: minmax(270px,.44fr) minmax(0,1fr);
    gap: 16px;
    padding: 16px 0;
}
.experience-copy-panel {
    position: relative;
    overflow: hidden;
    padding: 30px 26px;
    color: var(--white);
    background: var(--black);
}
.experience-copy-stack { position:relative; height:calc(100% - 52px); }
.experience-copy {
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    opacity:0;
    pointer-events:none;
    will-change: transform, opacity, filter;
}
.experience-copy.is-active { opacity:1; pointer-events:auto; }
.experience-copy .section-label { color:var(--red); }
.experience-copy h2 {
    margin: 0 0 28px;
    color:var(--white);
    font-family:var(--font-display);
    font-size:clamp(3rem,5.8vw,6.6rem);
    line-height:.86;
    letter-spacing:-.055em;
    text-transform:uppercase;
}
.experience-copy h2 span { display:inline-block; color:var(--red); }
.experience-copy > p:not(.section-label) { max-width:420px; margin:0 0 26px; color:rgba(255,255,255,.58); font-size:.8rem; line-height:1.7; }
.experience-copy a { width:max-content; padding-bottom:5px; border-bottom:1px solid var(--white); font-size:.62rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.experience-stepper { position:absolute; right:26px; bottom:24px; left:26px; display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; color:rgba(255,255,255,.54); font-size:.56rem; font-weight:800; }
.experience-stepper i { height:1px; position:relative; background:rgba(255,255,255,.2); overflow:hidden; }
.experience-stepper i b { position:absolute; inset:0 auto 0 0; width:var(--exp-progress,0%); background:var(--red); }
.experience-media-panel { position:relative; overflow:hidden; background:#111; }
.experience-media { position:absolute; inset:0; opacity:0; overflow:hidden; will-change:transform,opacity; }
.experience-media.is-active { opacity:1; }
.experience-media video { width:100%; height:100%; object-fit:cover; object-position:center; display:block; transform:scale(1.02); will-change:transform; }
.experience-media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.55)); pointer-events:none; }
.experience-media-label { position:absolute; z-index:2; left:24px; right:24px; bottom:20px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; color:var(--white); }
.experience-media-label span { font-family:var(--font-display); font-size:clamp(2.8rem,6vw,7rem); line-height:.8; letter-spacing:-.05em; text-transform:uppercase; }
.experience-media-label b { max-width:120px; font-size:.52rem; letter-spacing:.17em; text-align:right; }
.experience-media-crop { position:absolute; z-index:3; top:14px; right:14px; padding:7px 9px; color:var(--black); background:var(--paper); font-size:.48rem; font-weight:900; letter-spacing:.13em; }
.experience-bottom { height:36px; border-top:1px solid var(--black); padding-top:10px; color:var(--gray); }

/* Academy preview keeps the same collage / poster grammar */
.academy-preview { padding: 40px 44px 48px; }
.academy-preview__masthead {
  position:relative;
  min-height:auto;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);
  align-items:end;
  gap:28px 42px;
  overflow:hidden;
  border-bottom:1px solid var(--black);
  padding:24px 0 26px;
}
.academy-preview__word {
  position:absolute;
  z-index:0;
  top:12px;
  left:0;
  color:var(--red);
  font-family:var(--font-display);
  font-size:clamp(6rem,13vw,12rem);
  line-height:.84;
  letter-spacing:-.05em;
  opacity:.12;
  transform:none;
  filter:none;
  pointer-events:none;
}
.academy-preview__masthead > *:not(.academy-preview__word) { position:relative; z-index:2; }
.academy-preview__masthead h2 {
  max-width:7ch;
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(3.7rem,7.1vw,7rem);
  line-height:.88;
  letter-spacing:-.04em;
  text-transform:uppercase;
  text-wrap:balance;
}
.academy-preview__masthead h2 span { color:var(--red); display:block; }
.academy-preview__masthead > p:last-child {
  max-width:420px;
  margin:0 0 10px;
  justify-self:end;
  color:rgba(21,21,21,.66);
  font-size:.8rem;
  line-height:1.75;
}
.academy-preview__grid {
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(300px,.72fr);
  grid-template-rows:minmax(300px,auto) minmax(250px,auto);
  gap:14px;
  padding-top:18px;
  align-items:stretch;
}
.academy-preview__image {
  margin:0;
  overflow:hidden;
  border:1px solid var(--black);
  background:#dbd8d1;
}
.academy-preview__image img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.85) contrast(1.04);
}
.academy-preview__image--large {
  grid-column:1;
  grid-row:1 / span 2;
  min-height:600px;
}
.academy-preview__image--large img { object-position:center; }
.academy-preview__image--small {
  grid-column:2;
  grid-row:2;
  min-height:286px;
}
.academy-preview__image--small img { object-position:center 38%; }
.academy-preview__info {
  grid-column:2;
  grid-row:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:300px;
  padding:30px 28px;
  color:var(--black);
  background:#f4f2ed;
  border:1px solid var(--black);
}
.academy-preview__info > span {
  color:var(--red);
  font-family:var(--font-display);
  font-size:4rem;
  line-height:.9;
}
.academy-preview__info h3 {
  margin:18px 0 12px;
  font-family:var(--font-display);
  font-size:2.6rem;
  line-height:.92;
  letter-spacing:-.03em;
  text-transform:uppercase;
}
.academy-preview__info p {
  margin:0;
  color:rgba(21,21,21,.7);
  font-size:.78rem;
  line-height:1.8;
}
.academy-preview__stats {
  display:grid;
  gap:0;
  margin:24px 0 26px;
  border-top:1px solid rgba(21,21,21,.14);
}
.academy-preview__stats b {
  padding:12px 0 10px;
  border-bottom:1px solid rgba(21,21,21,.14);
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.15em;
  color:var(--black);
}

/* Social icons + TMS signature */
.social-icon-link { display:flex!important; align-items:center; gap:9px; }
.social-icon-link span { width:23px; height:23px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.18); }
.social-icon-link svg { width:13px; height:13px; }
.social-icon-link svg rect,.social-icon-link svg circle,.social-icon-link svg path { fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.social-icon-link svg .fill { fill:currentColor; stroke:none; }
.tms-signature {
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:24px;
    padding:24px max(24px,calc((100vw - var(--page-width))/2));
    color:rgba(255,255,255,.45);
    background:#050505;
    border-top:1px solid rgba(255,255,255,.1);
    font-size:.52rem;
    font-weight:700;
    letter-spacing:.17em;
    text-transform:uppercase;
}
.tms-signature strong { color:var(--white); font-size:.65rem; letter-spacing:.2em; text-align:center; }
.tms-signature small { text-align:right; font:inherit; color:rgba(255,255,255,.35); }

/* Seminar page built from the same template vocabulary */
.seminar-page-hero { min-height:760px; padding:28px 44px 48px; }
.seminar-page-hero__top { display:flex; justify-content:space-between; gap:20px; padding-bottom:13px; border-bottom:1px solid var(--black); font-size:.57rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.seminar-page-hero__stage { position:relative; min-height:650px; display:grid; grid-template-columns:1fr .8fr; align-items:end; gap:24px; padding-top:42px; overflow:hidden; }
.seminar-page-hero__word { position:absolute; top:30px; left:-20px; right:-20px; color:var(--red); font-family:var(--font-display); font-size:clamp(9rem,20vw,18rem); line-height:.75; letter-spacing:-.075em; text-align:center; filter:blur(10px); opacity:.92; transform:scaleY(1.17); }
.seminar-page-hero__copy { position:relative; z-index:2; padding:0 0 30px; }
.seminar-page-hero__copy h1 { margin:0 0 24px; font-family:var(--font-display); font-size:clamp(5rem,10vw,10rem); line-height:.78; letter-spacing:-.06em; text-transform:uppercase; }
.seminar-page-hero__copy h1 span { color:var(--red); }
.seminar-page-hero__copy > p:not(.section-label) { max-width:500px; font-size:.84rem; line-height:1.7; }
.seminar-page-hero__image { position:relative; z-index:2; height:520px; margin:0; overflow:hidden; }
.seminar-page-hero__image img { height:100%; object-fit:cover; }
.seminar-page-hero__image figcaption { position:absolute; bottom:12px; right:12px; padding:6px 8px; color:var(--white); background:var(--black); font-size:.48rem; font-weight:800; letter-spacing:.12em; }
.seminar-curriculum { padding:44px; }
.seminar-curriculum__heading { display:grid; grid-template-columns:1fr .55fr; gap:50px; align-items:end; padding-bottom:28px; border-bottom:1px solid var(--black); }
.seminar-curriculum__heading h2 { margin:0; font-family:var(--font-display); font-size:clamp(4rem,8vw,8rem); line-height:.82; letter-spacing:-.05em; text-transform:uppercase; }
.seminar-curriculum__heading p { margin:0; font-size:.78rem; line-height:1.7; }
.seminar-curriculum__grid { display:grid; grid-template-columns:repeat(3,1fr); border-left:1px solid var(--black); border-top:1px solid var(--black); margin-top:14px; }
.seminar-curriculum__grid article { min-height:230px; padding:22px; border-right:1px solid var(--black); border-bottom:1px solid var(--black); }
.seminar-curriculum__grid span { color:var(--red); font-family:var(--font-display); font-size:3rem; }
.seminar-curriculum__grid h3 { margin:16px 0 10px; font-family:var(--font-display); font-size:2rem; text-transform:uppercase; }
.seminar-curriculum__grid p { margin:0; color:var(--gray); font-size:.72rem; line-height:1.65; }
.seminar-details { display:grid; grid-template-columns:1fr .78fr; padding:0; }
.seminar-details__image { min-height:600px; margin:0; overflow:hidden; }
.seminar-details__image img { height:100%; object-fit:cover; }
.seminar-details__copy { padding:48px 42px; color:var(--white); background:var(--black); }
.seminar-details__copy h2 { margin:0 0 24px; font-family:var(--font-display); font-size:clamp(4rem,7vw,7rem); line-height:.82; text-transform:uppercase; }
.seminar-details__copy h2 span { color:var(--red); }
.seminar-details__copy ul { padding:0; margin:26px 0; list-style:none; border-top:1px solid rgba(255,255,255,.22); }
.seminar-details__copy li { padding:11px 0; border-bottom:1px solid rgba(255,255,255,.16); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; }
.seminar-price-block { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:30px 0; }
.seminar-price-block div { padding:16px; color:var(--black); background:var(--paper); }
.seminar-price-block span { display:block; font-size:.52rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.seminar-price-block strong { display:block; margin-top:8px; font-family:var(--font-display); font-size:2.5rem; line-height:1; }
.seminar-contact-strip { padding:40px 44px; display:grid; grid-template-columns:1.2fr repeat(2,.8fr); gap:28px; align-items:center; background:var(--red); }
.seminar-contact-strip h2 { margin:0; font-family:var(--font-display); font-size:clamp(3.5rem,6vw,6rem); line-height:.82; text-transform:uppercase; }
.seminar-contact-strip p,.seminar-contact-strip a { margin:0; font-size:.72rem; font-weight:700; }

/* 404 */
.not-found-page { min-height:calc(100vh - 180px); padding:40px 44px 56px; display:grid; place-items:center; }
.not-found-page__inner { width:100%; position:relative; text-align:center; overflow:hidden; }
.not-found-page__code { color:var(--red); font-family:var(--font-display); font-size:clamp(14rem,35vw,32rem); line-height:.7; letter-spacing:-.08em; filter:blur(8px); opacity:.8; }
.not-found-page h1 { position:relative; margin:-3rem 0 18px; font-family:var(--font-display); font-size:clamp(4rem,8vw,8rem); line-height:.85; text-transform:uppercase; }
.not-found-page p { max-width:520px; margin:0 auto 28px; color:var(--gray); }

/* Subtle scroll animation without changing the template's static layout */
.js-reveal { opacity:0; transform:translateY(22px); transition:opacity .72s ease, transform .72s cubic-bezier(.2,.7,.2,1); }
.js-reveal.is-visible { opacity:1; transform:none; }
.js-parallax { will-change:transform; }

@media (max-width:980px) {
    .experience-sticky { top:74px; height:calc(100vh - 74px); }
    .experience-grid { grid-template-columns:.52fr 1fr; }
    .experience-copy-panel { padding:24px 20px; }
    .experience-copy h2 { font-size:clamp(2.8rem,7vw,5rem); }
    .academy-preview__masthead,.seminar-page-hero__stage,.seminar-curriculum__heading,.seminar-details { grid-template-columns:1fr; }
    .academy-preview__masthead > p:last-child { justify-self:start; max-width:520px; margin-bottom:0; }
    .academy-preview__grid { grid-template-columns:1fr 1fr; grid-template-rows:auto auto; }
    .academy-preview__image--large { grid-column:1 / -1; grid-row:1; min-height:480px; }
    .academy-preview__info { grid-column:1; grid-row:2; }
    .academy-preview__image--small { grid-column:2; grid-row:2; min-height:100%; }
    .seminar-curriculum__grid { grid-template-columns:repeat(2,1fr); }
    .seminar-page-hero__image { height:460px; }
    .seminar-contact-strip { grid-template-columns:1fr 1fr; }
    .seminar-contact-strip h2 { grid-column:1/-1; }
    .tms-signature { grid-template-columns:1fr; text-align:center; }
    .tms-signature small { text-align:center; }
}

@media (max-width:640px) {
    .loader-issue { left:18px; top:20px; }
    .loader-lockup { gap:12px; }
    .loader-lockup span { letter-spacing:.25em; }
    .experience-scroll { height:auto; }
    .experience-sticky { position:relative; top:auto; height:auto; min-height:0; padding:18px 16px 20px; }
    .experience-topline { margin-bottom:12px; }
    .experience-grid { height:auto; display:flex; flex-direction:column; padding:0; }
    .experience-copy-panel { min-height:420px; order:2; }
    .experience-copy-stack { min-height:310px; }
    .experience-media-panel { height:68svh; min-height:480px; order:1; }
    .experience-media { opacity:0!important; transform:none!important; }
    .experience-media.is-active { opacity:1!important; }
    .experience-media video { object-position:62% center; transform:scale(1.08)!important; }
    .experience-media-label span { font-size:2.7rem; }
    .experience-bottom { margin-top:10px; }
    .academy-preview { padding:30px 20px; }
    .academy-preview__masthead { min-height:auto; gap:18px; padding:18px 0 20px; }
    .academy-preview__word { top:18px; font-size:clamp(4.6rem,22vw,6.8rem); opacity:.1; }
    .academy-preview__masthead h2 { max-width:7.5ch; font-size:clamp(3.1rem,15vw,4.8rem); line-height:.9; }
    .academy-preview__grid { grid-template-columns:1fr; grid-template-rows:auto; }
    .academy-preview__image--large,.academy-preview__image--small,.academy-preview__info { grid-column:auto; grid-row:auto; }
    .academy-preview__image { min-height:360px; }
    .academy-preview__info { min-height:auto; padding:26px 22px; }
    .academy-preview__info h3 { font-size:2.2rem; }
    .seminar-page-hero,.seminar-curriculum { padding:24px 20px 34px; }
    .seminar-page-hero__stage { min-height:0; padding-top:60px; }
    .seminar-page-hero__copy h1 { font-size:5rem; }
    .seminar-page-hero__image { height:420px; }
    .seminar-curriculum__grid { grid-template-columns:1fr; }
    .seminar-details__image { min-height:480px; }
    .seminar-details__copy { padding:36px 22px; }
    .seminar-price-block { grid-template-columns:1fr; }
    .seminar-contact-strip { grid-template-columns:1fr; padding:30px 20px; }
    .tms-signature { padding:22px 20px; }
    .tms-signature strong { line-height:1.5; }
}

@media (prefers-reduced-motion: reduce) {
    .loader-word,.loader-progress i { animation:none; }
    .js-reveal { opacity:1; transform:none; transition:none; }
}

/* V10 mobile cinematic story keeps both films accessible while preserving the template */
@media (max-width:640px) {
    .experience-scroll { height: 205vh; overflow: visible; }
    .experience-sticky { position: sticky; top: 74px; height: calc(100svh - 74px); min-height: 620px; padding: 12px 14px 14px; overflow: hidden; }
    .experience-topline { height: 28px; margin:0; padding-bottom:8px; font-size:.46rem; }
    .experience-grid { height: calc(100% - 56px); display:grid; grid-template-columns:1fr; grid-template-rows:54% 46%; gap:8px; padding:8px 0; }
    .experience-media-panel { order:1; width:100%; height:auto; min-height:0; }
    .experience-copy-panel { order:2; width:100%; min-height:0; padding:14px 16px; }
    .experience-copy-stack { height:calc(100% - 34px); min-height:0; }
    .experience-copy { justify-content:center; }
    .experience-copy .section-label { margin-bottom:8px; font-size:.48rem; }
    .experience-copy h2 { margin-bottom:10px; font-size:clamp(2rem,9vw,3.25rem); line-height:.84; }
    .experience-copy > p:not(.section-label) { margin-bottom:10px; font-size:.64rem; line-height:1.45; }
    .experience-copy a { font-size:.5rem; }
    .experience-stepper { right:16px; bottom:10px; left:16px; }
    .experience-media { opacity:0; transform:none; }
    .experience-media.is-active { opacity:1; }
    .experience-media video { object-position:62% 72%; transform:scale(1.16); }
    .experience-media-label { left:12px; right:12px; bottom:10px; }
    .experience-media-label span { font-size:2.1rem; }
    .experience-media-label b { display:none; }
    .experience-media-crop { top:8px; right:8px; font-size:.4rem; }
    .experience-bottom { height:28px; padding-top:7px; font-size:.4rem; }
}


/* ==================================================
   FINAL PRODUCTION V11 — SPACING, LEGIBILITY & SCROLL
   ================================================== */

/* Signature hand: turn the previously empty middle column into an editorial nail-study frame. */
.signature-stage {
    position: relative;
    isolation: isolate;
    min-height: clamp(520px, 40vw, 700px) !important;
    padding: clamp(36px, 4vw, 58px) clamp(24px, 3vw, 42px) !important;
    overflow: hidden;
    border: 1px solid rgba(21,21,21,.12);
    background:
        linear-gradient(90deg, transparent 49.85%, rgba(21,21,21,.09) 50%, transparent 50.15%),
        linear-gradient(0deg, transparent 49.85%, rgba(21,21,21,.07) 50%, transparent 50.15%),
        radial-gradient(circle at 53% 54%, rgba(228,38,38,.18) 0 18%, rgba(228,38,38,.07) 31%, transparent 56%),
        #efede7;
}
.signature-stage::before {
    content: "LOOK" !important;
    display: block !important;
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-51%) scaleY(1.12);
    font-family: var(--font-display);
    font-size: clamp(8rem, 13vw, 14rem);
    line-height: .7;
    letter-spacing: -.06em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(21,21,21,.11);
    white-space: nowrap;
    pointer-events: none;
}
.signature-stage::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    z-index: 1;
    left: 51%;
    top: 58%;
    width: 58%;
    aspect-ratio: 1.75 / 1;
    transform: translate(-50%,-50%) rotate(-8deg);
    border-radius: 50%;
    background: rgba(228,38,38,.28);
    filter: blur(38px);
    mix-blend-mode: multiply;
    opacity: .55;
    pointer-events: none;
}
.signature-stage img {
    position: relative;
    z-index: 3;
    width: min(100%, 500px) !important;
    max-height: 620px;
    filter: drop-shadow(0 28px 26px rgba(21,21,21,.14));
}
.signature-stage__index,
.signature-stage__footer {
    position: absolute;
    z-index: 5;
    left: 18px;
    right: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    font-size: .5rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(21,21,21,.58);
    pointer-events: none;
}
.signature-stage__index { top: 16px; }
.signature-stage__footer { bottom: 15px; }
.signature-stage__index span,
.signature-stage__footer i { color: var(--red); font-style: normal; }
.signature-stage__index b,
.signature-stage__footer em { font-style: normal; font-weight: 800; }

/* The two-film story should read instantly instead of crushing words into each other. */
.experience-scroll { height: 190vh; }
.experience-copy-panel { padding: clamp(24px, 2.1vw, 34px) clamp(22px, 1.8vw, 30px); }
.experience-copy h2 {
    max-width: 8.5ch;
    margin-bottom: clamp(18px, 2vh, 28px);
    font-size: clamp(3.05rem, 4.15vw, 5.25rem);
    line-height: .91;
    letter-spacing: -.042em;
    text-wrap: balance;
}
.experience-copy h2 span {
    display: inline;
    line-height: inherit;
}
.experience-copy > p:not(.section-label) {
    margin-bottom: 20px;
    font-size: clamp(.72rem, .72vw, .82rem);
    line-height: 1.58;
}
.experience-media-label span {
    font-size: clamp(2.6rem, 5.25vw, 6.2rem);
    line-height: .86;
}

/* Seminar typography: preserve the huge poster feel without glyph collisions. */
.seminar-curriculum__heading {
    grid-template-columns: minmax(0,1.15fr) minmax(260px,.55fr);
    gap: clamp(30px,4vw,70px);
    align-items: end;
}
.seminar-curriculum__heading h2 {
    max-width: 10.5ch;
    font-size: clamp(4rem, 6.35vw, 7.4rem);
    line-height: .91;
    letter-spacing: -.038em;
    text-wrap: balance;
}
.seminar-curriculum__heading h2 span {
    display: inline-block;
    color: var(--black);
}

/* General production polish for oversized display copy. */
.academy-preview__masthead h2,
.seminar-page-hero__copy h1,
.services-page-hero__heading h1,
.about-page-hero__heading h1,
.contact-page-hero__heading h1 {
    overflow-wrap: normal;
    word-break: normal;
    text-wrap: balance;
}

@media (max-width: 1180px) {
    .signature-stage { min-height: 560px !important; }
    .signature-stage img { width: min(100%, 440px) !important; }
    .experience-copy h2 { font-size: clamp(2.75rem, 5.2vw, 4.35rem); max-width: 9ch; }
    .seminar-curriculum__heading h2 { font-size: clamp(3.8rem, 7vw, 6.1rem); }
}

@media (max-width: 760px) {
    /* Keep the cinematic feature interactive on phones, but make the required gesture much shorter. */
    .experience-scroll { height: 172svh !important; }
    .experience-sticky {
        position: sticky !important;
        top: 74px !important;
        height: calc(100svh - 74px) !important;
        min-height: 620px !important;
        padding: 12px 14px 14px !important;
    }
    .experience-topline { height: 26px; margin-bottom: 8px; padding-bottom: 8px; font-size: .46rem; }
    .experience-grid {
        height: calc(100% - 56px) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px;
        padding: 0 !important;
    }
    .experience-media-panel {
        order: 1;
        flex: 0 0 48%;
        height: auto !important;
        min-height: 0 !important;
    }
    .experience-copy-panel {
        order: 2;
        flex: 1 1 auto;
        min-height: 0 !important;
        padding: 18px 18px 16px;
    }
    .experience-copy-stack { min-height: 0 !important; height: calc(100% - 32px); }
    .experience-copy { justify-content: center; }
    .experience-copy h2 { max-width: 8.8ch; font-size: clamp(2.45rem, 10vw, 3.55rem); line-height: .9; margin-bottom: 12px; }
    .experience-copy > p:not(.section-label) { font-size: .69rem; line-height: 1.5; margin-bottom: 12px; }
    .experience-copy a { font-size: .54rem; }
    .experience-stepper { right:18px; bottom:12px; left:18px; }
    .experience-media video { object-position: 58% center; transform: scale(1.06); }
    .experience-media-label { left:14px; right:14px; bottom:12px; }
    .experience-media-label span { font-size: clamp(2rem, 10vw, 3rem); }
    .experience-media-label b { font-size:.42rem; }
    .experience-bottom { height:30px; padding-top:8px; font-size:.43rem; }

    .signature-stage {
        min-height: 470px !important;
        padding: 38px 14px 36px !important;
    }
    .signature-stage::before { font-size: clamp(7rem, 31vw, 10rem); }
    .signature-stage::after { width: 74%; opacity:.42; }
    .signature-stage img { width: min(100%, 350px) !important; max-height: 405px; }
    .signature-stage__index,.signature-stage__footer { left:12px; right:12px; font-size:.43rem; letter-spacing:.12em; }

    .seminar-curriculum__heading { grid-template-columns:1fr; gap:22px; }
    .seminar-curriculum__heading h2 { max-width: 11ch; font-size: clamp(3.25rem, 15vw, 5.1rem); line-height:.92; }
}

@media (max-width: 430px) {
    .experience-sticky { min-height: 590px !important; }
    .experience-copy h2 { font-size: clamp(2.3rem, 11vw, 3.05rem); }
    .experience-media-label b { display:none; }
    .signature-stage { min-height: 430px !important; }
    .signature-stage img { width:min(100%,315px) !important; }
}


/* ==================================================
   FINAL DELIVERY V12 — STRICT SEMINAR SOURCE + MOTION
   ================================================== */
:root{--motion-red:#e32626;--motion-ease:cubic-bezier(.16,1,.3,1)}
html{scroll-behavior:auto}
body{overflow-x:hidden}
body::after{content:"";position:fixed;z-index:9998;inset:0;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");mix-blend-mode:multiply}
.site-header{transition:transform .45s var(--motion-ease),background-color .35s,border-color .35s}
.site-header.is-motion-scrolled{background:rgba(239,237,231,.9);backdrop-filter:blur(16px);border-bottom:1px solid rgba(21,21,21,.14)}
.main-navigation a{position:relative}
.main-navigation a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--motion-ease)}
.main-navigation a:hover::after,.main-navigation a.is-active::after{transform:scaleX(1);transform-origin:left}
.button{position:relative;isolation:isolate;overflow:hidden;transition:transform .35s var(--motion-ease),color .32s,background .32s,border-color .32s}
.button::before{content:"";position:absolute;z-index:-1;inset:0;background:var(--red);transform:translateY(104%);transition:transform .45s var(--motion-ease)}
.button:hover{transform:translateY(-3px)}
.button:hover::before{transform:translateY(0)}
.button--black:hover,.button--outline:hover{color:#fff;border-color:var(--red)}
.button--white:hover{color:#fff}
.button span{transition:transform .35s var(--motion-ease)}
.button:hover span{transform:translate(3px,-3px) rotate(-8deg)}

/* Dramatic page-transition overlay, generated by JS. */
.motion-transition{position:fixed;z-index:10050;inset:0;pointer-events:none;visibility:hidden}
.motion-transition.is-active{visibility:visible}
.motion-transition__panel{position:absolute;left:0;width:100%;height:34%;background:var(--red);transform:translateX(-105%)}
.motion-transition__panel:nth-child(1){top:0}.motion-transition__panel:nth-child(2){top:33.333%}.motion-transition__panel:nth-child(3){bottom:0}
.motion-transition.is-active .motion-transition__panel{animation:motionWipe .72s var(--motion-ease) forwards}
.motion-transition.is-active .motion-transition__panel:nth-child(2){animation-delay:.05s}.motion-transition.is-active .motion-transition__panel:nth-child(3){animation-delay:.1s}
.motion-transition__word{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--font-display);font-size:clamp(5rem,16vw,15rem);line-height:.8;color:#111;letter-spacing:-.06em;opacity:0}
.motion-transition.is-active .motion-transition__word{animation:motionWord .42s .22s both}
@keyframes motionWipe{to{transform:translateX(0)}}
@keyframes motionWord{from{opacity:0;filter:blur(12px);transform:translate(-50%,-42%) scale(.92)}to{opacity:1;filter:blur(0);transform:translate(-50%,-50%) scale(1)}}

/* Scroll progress / motion cursor accent. */
.motion-progress{position:fixed;z-index:9000;left:0;top:0;width:100%;height:3px;pointer-events:none;background:transparent}
.motion-progress i{display:block;width:var(--motion-progress,0%);height:100%;background:var(--red);box-shadow:0 0 12px rgba(227,38,38,.35)}
.motion-cursor{position:fixed;z-index:10020;left:0;top:0;width:42px;height:42px;border:1px solid rgba(21,21,21,.48);border-radius:50%;pointer-events:none;opacity:0;transform:translate(-50%,-50%);transition:width .28s var(--motion-ease),height .28s var(--motion-ease),background .25s,border-color .25s,opacity .2s;mix-blend-mode:difference}
.motion-cursor.is-hover{width:68px;height:68px;background:#fff;border-color:#fff}

/* More expressive reveals, without layout shifts. */
.motion-reveal{opacity:0;transform:translate3d(0,42px,0);filter:blur(8px);clip-path:inset(0 0 20% 0);transition:opacity .9s var(--motion-ease),transform .9s var(--motion-ease),filter .85s var(--motion-ease),clip-path 1s var(--motion-ease)}
.motion-reveal.is-motion-visible{opacity:1;transform:none;filter:blur(0);clip-path:inset(0)}
.motion-image{position:relative;overflow:hidden;--motion-y:0px;--motion-r:0deg}
.motion-image img{will-change:transform;transform:translate3d(0,var(--motion-y),0) scale(1.065) rotate(var(--motion-r));transition:filter .6s ease}
.motion-image::after{content:"";position:absolute;z-index:3;inset:0;background:var(--red);transform:translateX(-103%);opacity:.92;pointer-events:none}
.motion-image.is-motion-visible::after{animation:imageSlash .82s var(--motion-ease) both}
@keyframes imageSlash{0%{transform:translateX(-103%)}48%{transform:translateX(0)}100%{transform:translateX(103%)}}
.motion-word{will-change:transform;transform:translate3d(var(--word-x,0px),0,0)}
.motion-copy{will-change:transform}

/* Hover depth for existing photo/collage modules. */
.collage-image,.service-card,.academy-preview__image,.cta-section__image,.seminar-source-visual,.seminar-source-poster figure{transform-style:preserve-3d;transition:transform .55s var(--motion-ease),box-shadow .45s var(--motion-ease)}
.collage-image:hover,.service-card:hover,.academy-preview__image:hover,.seminar-source-poster figure:hover{box-shadow:0 26px 55px rgba(21,21,21,.16)}

/* Source-safe seminar preview on home. */
.academy-preview--source-safe .academy-preview__word{color:var(--red)}
.academy-preview--source-safe .academy-preview__masthead h2 span{color:var(--red)}
.academy-preview__stats--safe{grid-template-columns:1fr!important}
.academy-preview__stats--safe b{font-size:clamp(.95rem,1.8vw,1.35rem)!important;line-height:1.08;font-family:var(--font-display);letter-spacing:-.01em!important}
.footer-note{margin:.35rem 0;color:rgba(255,255,255,.55);font-size:.68rem;line-height:1.5}

/* Seminar page: ONLY facts from the two supplied screenshots. */
.seminar-source-page{overflow:hidden}
.seminar-source-hero{position:relative;min-height:880px;padding:24px 42px 52px;background:#efede7;overflow:hidden}
.seminar-source-rail{position:relative;z-index:5;display:flex;justify-content:space-between;gap:18px;padding:0 0 13px;border-bottom:1px solid #171717;font-size:.55rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.seminar-source-word{position:absolute;z-index:0;left:-1.5%;right:-1.5%;top:22px;font-family:var(--font-display);font-size:clamp(10rem,21vw,22rem);line-height:.72;letter-spacing:-.065em;color:#d7b2b2;white-space:nowrap}
.seminar-source-grid{position:relative;z-index:2;display:grid;grid-template-columns:.72fr 1.28fr;gap:36px;align-items:end;min-height:790px;padding-top:150px}
.seminar-source-copy{padding:0 0 54px 5vw}
.seminar-source-copy h1{margin:20px 0 30px;font-family:var(--font-serif);font-size:clamp(3.8rem,7vw,8rem);font-weight:400;line-height:.92;letter-spacing:-.045em}
.seminar-source-copy h1 span{font-family:var(--font-display);font-size:.92em;color:var(--red);letter-spacing:-.035em}
.seminar-source-copy>p:not(.section-label){max-width:430px;margin:0 0 30px;font-size:.86rem;line-height:1.7}
.seminar-source-visual{height:650px;margin:0;background:#dedbd4}
.seminar-source-visual>img{width:100%;height:100%;object-fit:cover;object-position:center 44%;filter:saturate(.75) contrast(1.02)}
.seminar-source-logo{position:absolute;z-index:5;top:26px;left:28px;width:240px;padding:10px 14px;background:rgba(239,237,231,.84);backdrop-filter:blur(8px)}
.seminar-source-logo img{display:block;width:100%;height:auto;filter:brightness(0)}
.seminar-source-date{position:absolute;z-index:5;right:24px;bottom:24px;display:grid;gap:4px;padding:18px 20px;background:#efede7;border:1px solid #171717}
.seminar-source-date span{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.seminar-source-date strong{color:#9c6f58;font-family:var(--font-serif);font-size:2rem;line-height:1.05;font-weight:400}
.seminar-source-mark{position:absolute;z-index:1;right:-20px;top:28%;font-family:var(--font-serif);font-size:15rem;color:rgba(227,38,38,.09);pointer-events:none}
.seminar-source-marquee{overflow:hidden;border-top:1px solid #171717;border-bottom:1px solid #171717;background:var(--red);color:#111}
.seminar-source-marquee div{width:max-content;padding:16px 0;font-family:var(--font-display);font-size:clamp(2.4rem,5vw,5.4rem);line-height:.8;letter-spacing:-.025em;white-space:nowrap;animation:seminarMarquee 19s linear infinite}
@keyframes seminarMarquee{to{transform:translateX(-50%)}}
.seminar-source-poster{padding:48px 42px 60px;background:#efede7}
.seminar-source-poster__title{display:grid;grid-template-columns:.3fr 1fr;gap:20px;align-items:end;padding-bottom:20px;border-bottom:1px solid #171717}
.seminar-source-poster__title span{font-size:.57rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.seminar-source-poster__title h2{margin:0;font-family:var(--font-display);font-size:clamp(7rem,17vw,18rem);line-height:.7;color:#d7b2b2;letter-spacing:-.055em;text-align:right}
.seminar-source-poster__body{display:grid;grid-template-columns:1fr .8fr;gap:0;margin-top:22px;border:1px solid #171717}
.seminar-source-poster__body figure{height:610px;margin:0}.seminar-source-poster__body figure img{width:100%;height:100%;object-fit:cover;object-position:center}
.seminar-source-poster__copy{display:flex;flex-direction:column;justify-content:flex-end;padding:42px;background:#f4f2ed;border-left:1px solid #171717}
.seminar-source-poster__copy>p{max-width:420px;margin:0 0 36px;font-family:var(--font-serif);font-size:clamp(1.6rem,3vw,3rem);line-height:1.12}
.seminar-source-poster__facts{display:grid;margin-bottom:28px;border-top:1px solid #171717}.seminar-source-poster__facts span{padding:12px 0;border-bottom:1px solid #171717;font-size:.65rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}

/* Existing two-film story: more alive but shorter and quicker. */
.experience-scroll{height:176vh!important}
.experience-media::after{content:"";position:absolute;z-index:4;inset:0;border:0 solid var(--red);pointer-events:none;transition:border-width .55s var(--motion-ease)}
.experience-media.is-active::after{border-width:6px 0 0 0}
.experience-media video{will-change:transform,filter;filter:saturate(.88) contrast(1.03)}
.experience-copy h2{transition:color .4s ease,text-shadow .4s ease}
.experience-copy.is-active h2{text-shadow:3px 3px 0 rgba(227,38,38,.16)}

@media(max-width:900px){
  .motion-cursor{display:none}
  .seminar-source-hero{min-height:auto;padding:18px 22px 36px}
  .seminar-source-rail{font-size:.48rem}.seminar-source-rail span:nth-child(2){display:none}
  .seminar-source-word{top:60px;font-size:clamp(8rem,26vw,13rem)}
  .seminar-source-grid{grid-template-columns:1fr;min-height:0;padding-top:170px;gap:22px}
  .seminar-source-copy{padding:0}.seminar-source-copy h1{font-size:clamp(4rem,14vw,7rem)}
  .seminar-source-visual{height:570px}.seminar-source-logo{width:200px}
  .seminar-source-poster{padding:34px 22px 44px}.seminar-source-poster__title{grid-template-columns:1fr}.seminar-source-poster__title h2{text-align:left;font-size:clamp(6rem,21vw,12rem)}
  .seminar-source-poster__body{grid-template-columns:1fr}.seminar-source-poster__copy{border-left:0;border-top:1px solid #171717}.seminar-source-poster__body figure{height:520px}
}
@media(max-width:600px){
  body::after{opacity:.02}
  .seminar-source-rail span:last-child{margin-left:auto}
  .seminar-source-word{top:62px;font-size:clamp(6.7rem,28vw,9rem)}
  .seminar-source-grid{padding-top:145px}.seminar-source-copy h1{font-size:clamp(3.6rem,17vw,5.8rem)}
  .seminar-source-visual{height:480px}.seminar-source-logo{left:14px;top:14px;width:165px}.seminar-source-date{right:12px;bottom:12px;padding:13px 14px}.seminar-source-date strong{font-size:1.55rem}.seminar-source-mark{font-size:9rem}
  .seminar-source-poster__body figure{height:440px}.seminar-source-poster__copy{padding:26px 20px}.seminar-source-poster__copy>p{font-size:1.7rem}
  .experience-scroll{height:158svh!important}
}
@media(prefers-reduced-motion:reduce){
  .motion-transition,.motion-progress,.motion-cursor{display:none!important}.motion-reveal{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}.motion-image::after{display:none}.motion-image img,.motion-word{transform:none!important}.seminar-source-marquee div{animation:none}
}


/* ==========================================================
   SEMINAR V13 — unified editorial system
   Uses the same black / paper / red / Anton visual language
   as Services, About and Contact. No pink treatment.
   ========================================================== */
.seminar-v13-page{overflow:hidden;background:var(--paper)}
.seminar-v13-hero{padding:34px 44px 44px;background:var(--paper);color:var(--black)}
.seminar-v13-topline{margin-bottom:32px}
.seminar-v13-heading{display:grid;grid-template-columns:1fr auto;gap:36px;align-items:end;margin-bottom:26px;border-bottom:1px solid var(--black);padding-bottom:28px}
.seminar-v13-heading__main h1{margin:8px 0 0;font-family:var(--font-display);font-size:clamp(5.4rem,11vw,11rem);font-weight:400;line-height:.78;letter-spacing:-.055em;text-transform:uppercase}
.seminar-v13-heading__main h1 span{display:block;color:var(--red)}
.seminar-v13-heading__meta{display:flex;align-items:flex-end;gap:12px;padding-bottom:8px;text-transform:uppercase}
.seminar-v13-heading__meta strong{font-family:var(--font-display);font-size:clamp(5.2rem,8vw,8.6rem);font-weight:400;line-height:.7;color:var(--red)}
.seminar-v13-heading__meta span{padding-bottom:7px;font-size:.58rem;font-weight:800;letter-spacing:.16em;writing-mode:vertical-rl;transform:rotate(180deg)}
.seminar-v13-feature{position:relative;height:min(70vh,720px);min-height:560px;margin:0;overflow:hidden;border:1px solid var(--black);background:#d8d5cf}
.seminar-v13-feature>img{width:100%;height:100%;object-fit:cover;object-position:center 45%;filter:saturate(.82) contrast(1.03);transition:transform .9s cubic-bezier(.16,1,.3,1),filter .6s ease}
.seminar-v13-feature:hover>img{transform:scale(1.025);filter:saturate(.96) contrast(1.03)}
.seminar-v13-feature__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,9,9,.38),transparent 42%,transparent 70%,rgba(9,9,9,.12));pointer-events:none}
.seminar-v13-feature__label{position:absolute;left:30px;bottom:28px;z-index:3;color:#fff;text-transform:uppercase}
.seminar-v13-feature__label span{display:block;margin-bottom:8px;font-size:.52rem;font-weight:800;letter-spacing:.18em}
.seminar-v13-feature__label b{display:block;font-family:var(--font-display);font-size:clamp(4rem,8vw,8rem);font-weight:400;line-height:.78;letter-spacing:-.045em}
.seminar-v13-feature__date{position:absolute;right:28px;top:26px;z-index:3;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:10px;align-items:end;padding:14px 16px;background:var(--paper);border:1px solid var(--black);color:var(--black);text-transform:uppercase}
.seminar-v13-feature__date span{grid-column:1/-1;font-size:.48rem;font-weight:800;letter-spacing:.18em}
.seminar-v13-feature__date strong{font-family:var(--font-display);font-size:4.2rem;font-weight:400;line-height:.78;color:var(--red)}
.seminar-v13-feature__date b{padding-bottom:4px;font-size:.55rem;line-height:1.25;letter-spacing:.13em}
.seminar-v13-feature__index{position:absolute;right:-.02em;bottom:-.18em;z-index:1;font-family:var(--font-display);font-size:clamp(12rem,24vw,25rem);line-height:.8;color:rgba(255,255,255,.11);pointer-events:none}

.seminar-v13-strip{overflow:hidden;border-top:1px solid var(--black);border-bottom:1px solid var(--black);background:var(--red);color:var(--black)}
.seminar-v13-strip div{width:max-content;padding:13px 0;font-family:var(--font-display);font-size:clamp(2rem,4.4vw,4.8rem);line-height:.82;letter-spacing:-.02em;white-space:nowrap;animation:seminarV13Marquee 20s linear infinite}
@keyframes seminarV13Marquee{to{transform:translateX(-50%)}}

.seminar-v13-story{padding:58px 44px 70px;background:var(--paper);color:var(--black)}
.seminar-v13-story__heading{display:grid;grid-template-columns:.32fr 1fr;gap:28px;align-items:end;padding-bottom:28px;border-bottom:1px solid var(--black)}
.seminar-v13-story__heading h2{margin:0;font-family:var(--font-display);font-size:clamp(4.8rem,10vw,10rem);font-weight:400;line-height:.8;letter-spacing:-.05em;text-transform:uppercase}
.seminar-v13-story__heading h2 span{color:var(--red)}
.seminar-v13-story__grid{display:grid;grid-template-columns:1.15fr .85fr;margin-top:22px;border:1px solid var(--black)}
.seminar-v13-story__image{position:relative;min-height:650px;margin:0;overflow:hidden;background:#d8d5cf;border-right:1px solid var(--black)}
.seminar-v13-story__image img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.82);transition:transform .9s cubic-bezier(.16,1,.3,1),filter .55s ease}
.seminar-v13-story__image:hover img{transform:scale(1.035);filter:saturate(.98)}
.seminar-v13-story__image figcaption{position:absolute;left:16px;bottom:14px;padding:7px 9px;background:var(--paper);border:1px solid var(--black);font-size:.48rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.seminar-v13-story__copy{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:650px;padding:42px;background:#f4f2ed;overflow:hidden}
.seminar-v13-story__number{position:absolute;right:-.05em;top:-.15em;font-family:var(--font-display);font-size:clamp(12rem,22vw,23rem);line-height:.85;color:rgba(227,38,38,.08);pointer-events:none}
.seminar-v13-statement{position:relative;z-index:2;max-width:540px;margin:0 0 38px;font-family:var(--font-display);font-size:clamp(2.7rem,4.8vw,5rem);font-weight:400;line-height:.9;letter-spacing:-.035em;text-transform:uppercase}
.seminar-v13-facts{position:relative;z-index:2;margin-bottom:28px;border-top:1px solid var(--black)}
.seminar-v13-facts div{display:grid;grid-template-columns:42px 1fr;gap:16px;align-items:center;padding:13px 0;border-bottom:1px solid var(--black);text-transform:uppercase}
.seminar-v13-facts span{color:var(--red);font-family:var(--font-display);font-size:1.55rem;line-height:1}
.seminar-v13-facts b{font-size:.62rem;font-weight:800;letter-spacing:.14em}
.seminar-v13-story__copy .button{position:relative;z-index:2;align-self:flex-start}

@media(max-width:1000px){
  .seminar-v13-heading{grid-template-columns:1fr}.seminar-v13-heading__meta{justify-self:start}.seminar-v13-heading__meta span{writing-mode:initial;transform:none;padding-bottom:4px}
  .seminar-v13-story__heading{grid-template-columns:1fr;gap:12px}
  .seminar-v13-story__grid{grid-template-columns:1fr}.seminar-v13-story__image{border-right:0;border-bottom:1px solid var(--black);min-height:520px}.seminar-v13-story__copy{min-height:auto;padding-top:120px}
}
@media(max-width:700px){
  .seminar-v13-hero,.seminar-v13-story{padding-left:20px;padding-right:20px}
  .seminar-v13-hero{padding-top:22px}
  .seminar-v13-topline{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}.seminar-v13-topline p:last-child{grid-column:1/-1}
  .seminar-v13-heading{gap:16px;margin-bottom:18px;padding-bottom:20px}.seminar-v13-heading__main h1{font-size:clamp(4.4rem,19vw,6.5rem);line-height:.79}.seminar-v13-heading__meta strong{font-size:5rem}
  .seminar-v13-feature{height:68svh;min-height:520px}.seminar-v13-feature>img{object-position:62% center}.seminar-v13-feature__label{left:16px;bottom:18px}.seminar-v13-feature__label b{font-size:4rem}.seminar-v13-feature__date{right:12px;top:12px}.seminar-v13-feature__date strong{font-size:3.4rem}
  .seminar-v13-strip div{font-size:2.7rem;padding:11px 0}
  .seminar-v13-story{padding-top:40px;padding-bottom:46px}.seminar-v13-story__heading h2{font-size:clamp(4rem,17vw,6rem)}.seminar-v13-story__image{min-height:470px}.seminar-v13-story__image img{object-position:55% center}.seminar-v13-story__copy{padding:100px 22px 28px}.seminar-v13-statement{font-size:clamp(2.3rem,11vw,3.7rem)}
}
@media(prefers-reduced-motion:reduce){.seminar-v13-strip div{animation:none}.seminar-v13-feature>img,.seminar-v13-story__image img{transition:none}}


/* ==================================================
   FINAL PREMIUM MOTION V15
   Editorial clarity + immersive scroll choreography
   ================================================== */
:root{
  --premium-ease:cubic-bezier(.16,1,.3,1);
  --premium-red:#ed2525;
  --premium-ink:#151515;
  --premium-paper:#f4f2ed;
}
html{scroll-padding-top:90px}
body{overflow-x:clip}
.editorial-page{position:relative;isolation:isolate;perspective:1200px}
.editorial-page::after{
  content:"";position:absolute;z-index:20;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(21,21,21,.2) 12%,rgba(21,21,21,.2) 88%,transparent);
  transform:scaleX(var(--premium-section-line,.2));transform-origin:left center;pointer-events:none;
}

/* HOME academy masthead — no overlap, deliberate hierarchy. */
.academy-preview__masthead{
  min-height:clamp(400px,56vw,690px)!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.82fr)!important;
  grid-template-rows:auto 1fr!important;
  align-items:end!important;
  column-gap:clamp(42px,5vw,86px)!important;
  row-gap:24px!important;
  padding:38px 0 42px!important;
  overflow:hidden!important;
}
.academy-preview__masthead .section-label{grid-column:1/-1;grid-row:1;align-self:start;margin:0;z-index:5}
.academy-preview__word{
  grid-column:1;grid-row:2;position:relative!important;inset:auto!important;align-self:end;
  font-family:var(--font-display)!important;font-size:clamp(6.8rem,14.2vw,14rem)!important;
  line-height:.78!important;letter-spacing:-.045em!important;color:var(--premium-red)!important;
  opacity:1!important;filter:none!important;transform:none!important;white-space:nowrap!important;
  max-width:100%;overflow:hidden;z-index:1!important;
}
.academy-preview__headline{grid-column:2;grid-row:2;align-self:center;position:relative;z-index:6;min-width:0}
.academy-preview__headline h2{
  display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:.11em!important;
  width:100%!important;max-width:8.8ch!important;margin:0!important;font-family:var(--font-display)!important;
  font-size:clamp(3.25rem,4.85vw,5.4rem)!important;line-height:1.01!important;letter-spacing:-.028em!important;
  text-transform:uppercase!important;overflow:visible!important;text-wrap:balance!important;
}
.academy-preview__headline .academy-line{display:block!important;white-space:normal!important;overflow:visible!important}
.academy-line--black{color:var(--premium-ink)!important}
.academy-line--red{color:var(--premium-red)!important}
.academy-preview__description{
  position:relative!important;right:auto;bottom:auto;z-index:7;max-width:340px!important;margin:22px 0 0!important;
  padding-top:12px;border-top:1px solid rgba(21,21,21,.22);font-size:.72rem!important;line-height:1.65!important;
  color:rgba(21,21,21,.58)!important;
}

/* The academy content card now matches the editorial paper system instead of looking like a foreign black card. */
.academy-preview__info{
  background:linear-gradient(145deg,#f7f5f0 0%,#ece9e2 100%)!important;color:var(--premium-ink)!important;
  border:1px solid var(--premium-ink)!important;box-shadow:none!important;position:relative;overflow:hidden;
}
.academy-preview__info::after{
  content:"ACADEMY";position:absolute;right:-.03em;bottom:-.22em;font-family:var(--font-display);
  font-size:clamp(5rem,10vw,9rem);line-height:.8;color:rgba(237,37,37,.065);pointer-events:none;
}
.academy-preview__info>*{position:relative;z-index:2}
.academy-preview__info p{color:rgba(21,21,21,.62)!important}
.academy-preview__stats b{color:var(--premium-ink)!important;border-color:rgba(21,21,21,.18)!important}
.academy-preview__image{position:relative;overflow:hidden!important}
.academy-preview__image::before{
  content:"";position:absolute;z-index:3;inset:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(237,37,37,.11),transparent 30%,transparent 68%,rgba(21,21,21,.1));mix-blend-mode:multiply;
}

/* Motion masks & interactive editorial marks. */
.premium-image-mask{overflow:hidden!important;clip-path:inset(0 round 0);will-change:clip-path}
.premium-image-mask img{will-change:transform,filter}
.premium-heading{will-change:transform,opacity,filter;transform-origin:50% 100%}
.premium-kicker{will-change:transform,opacity}
.premium-section-index{
  position:absolute;z-index:40;right:18px;top:50%;transform:translateY(-50%) rotate(90deg);
  transform-origin:center;font:700 .48rem/1 var(--font-sans);letter-spacing:.22em;text-transform:uppercase;
  color:rgba(21,21,21,.32);pointer-events:none;white-space:nowrap;
}
.editorial-page:has(.section-label--light) .premium-section-index,.cta-section .premium-section-index{color:rgba(255,255,255,.42)}

.premium-scroll-ui{
  position:fixed;z-index:800;right:18px;bottom:18px;display:flex;align-items:center;gap:10px;
  min-width:150px;padding:10px 12px;background:rgba(15,15,15,.82);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(12px);color:#fff;pointer-events:none;mix-blend-mode:normal;
}
.premium-scroll-ui__count{font-family:var(--font-display);font-size:1.35rem;line-height:.8;color:var(--premium-red)}
.premium-scroll-ui__name{max-width:110px;font-size:.46rem;font-weight:800;letter-spacing:.16em;line-height:1.25;text-transform:uppercase;color:rgba(255,255,255,.72)}
.premium-scroll-ui__bar{position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:rgba(255,255,255,.12);overflow:hidden}
.premium-scroll-ui__bar i{display:block;width:100%;height:100%;background:var(--premium-red);transform:scaleX(var(--premium-page-progress,0));transform-origin:left center}

/* Image movement should feel editorial, not like generic zoom hover. */
.premium-drift-left{transform-origin:center center}
.premium-drift-right{transform-origin:center center}
.signature-stage::after{animation:premiumStageBreath 5.5s ease-in-out infinite alternate}
@keyframes premiumStageBreath{from{opacity:.25;transform:scale(.96)}to{opacity:.5;transform:scale(1.04)}}
.design-swatch{transition:transform .45s var(--premium-ease),border-color .3s ease,filter .35s ease!important}
.design-swatch:hover{transform:translateY(-7px) rotate(-2deg);filter:contrast(1.05)}
.design-swatch:nth-child(even):hover{transform:translateY(-7px) rotate(2deg)}
.service-card,.standard-item,.review-card{transition:transform .55s var(--premium-ease),box-shadow .45s var(--premium-ease)!important}
.service-card:hover,.standard-item:hover,.review-card:hover{transform:translateY(-8px);box-shadow:0 22px 50px rgba(21,21,21,.12)}

/* More tactile text hover on navigation. */
.main-navigation a{position:relative;overflow:hidden}
.main-navigation a::after{content:"";position:absolute;left:0;right:0;bottom:7px;height:1px;background:var(--premium-red);transform:scaleX(0);transform-origin:right;transition:transform .42s var(--premium-ease)}
.main-navigation a:hover::after,.main-navigation a.is-active::after{transform:scaleX(1);transform-origin:left}

/* Stronger section arrival without compromising reading. */
.premium-section-active .section-label{color:var(--premium-red);transition:color .45s ease}

@media(max-width:1180px){
  .academy-preview__masthead{min-height:520px!important;grid-template-columns:1fr .82fr!important;column-gap:34px!important}
  .academy-preview__word{font-size:clamp(7rem,16vw,12rem)!important}
  .academy-preview__headline h2{font-size:clamp(3.7rem,6.7vw,5.6rem)!important}
  .academy-preview__description{max-width:285px!important}
}
@media(max-width:900px){
  .premium-scroll-ui{display:none}
  .premium-section-index{display:none}
  .academy-preview__masthead{
    min-height:auto!important;grid-template-columns:1fr!important;grid-template-rows:auto auto auto auto!important;
    gap:14px!important;padding:22px 0 26px!important;
  }
  .academy-preview__masthead .section-label{grid-column:1;grid-row:1}
  .academy-preview__word{grid-column:1;grid-row:2;font-size:clamp(5.5rem,20vw,9rem)!important;opacity:.14!important;color:var(--premium-red)!important}
  .academy-preview__headline{grid-column:1;grid-row:3;align-self:start}
  .academy-preview__headline h2{font-size:clamp(3.4rem,11.5vw,5.5rem)!important;line-height:.86!important;text-wrap:wrap!important}
  .academy-preview__description{position:relative!important;right:auto;bottom:auto;max-width:520px!important;margin-top:16px!important}
}
@media(max-width:640px){
  .academy-preview__word{font-size:clamp(4.4rem,21vw,6.2rem)!important}
  .academy-preview__headline h2{font-size:clamp(2.8rem,13.8vw,4.3rem)!important;line-height:.88!important}
  .academy-preview__headline .academy-line{white-space:normal!important}
  .premium-image-mask{clip-path:none!important}
}
@media(prefers-reduced-motion:reduce){
  .premium-scroll-ui,.premium-section-index{display:none!important}
  .signature-stage::after{animation:none!important}
  .premium-heading,.premium-kicker,.premium-image-mask img{transform:none!important;filter:none!important;opacity:1!important}
}


/* ==================================================
   FINAL MASTER V16 — production polish
   ================================================== */
.footer-bottom--final{
  display:grid!important;
  grid-template-columns:1fr auto auto!important;
  align-items:center!important;
  gap:28px!important;
  padding:22px 0!important;
  border-top:1px solid rgba(255,255,255,.09)!important;
}
.footer-bottom--final p,.footer-bottom--final a{margin:0!important}
.footer-credit{
  justify-self:end;
  color:rgba(255,255,255,.48)!important;
  font-size:.56rem!important;
  letter-spacing:.04em!important;
  text-transform:none!important;
}
.footer-credit strong{color:rgba(255,255,255,.78);font-weight:600}

/* Pedicure gallery: the two supplied images live inside the same editorial system. */
.pedicure-editorial{padding:54px 44px 64px;background:var(--paper);color:var(--black);overflow:hidden}
.pedicure-editorial__heading{
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;
  padding-bottom:26px;border-bottom:1px solid var(--black);position:relative
}
.pedicure-editorial__heading h2{
  grid-column:1;margin:0;max-width:8ch;font-family:var(--font-display);
  font-size:clamp(5.4rem,10.8vw,11rem);line-height:.78;letter-spacing:-.05em;text-transform:uppercase
}
.pedicure-editorial__heading h2 span{color:var(--red)}
.pedicure-editorial__meta{grid-column:2;display:grid;gap:6px;justify-items:end;padding-bottom:10px;text-transform:uppercase}
.pedicure-editorial__meta span{font-size:.52rem;font-weight:800;letter-spacing:.18em;color:var(--red)}
.pedicure-editorial__meta b{font-size:.56rem;letter-spacing:.15em}
.pedicure-editorial__grid{
  display:grid;grid-template-columns:1.18fr .82fr;gap:16px;padding-top:18px;align-items:start
}
.pedicure-card{position:relative;margin:0;overflow:hidden;border:1px solid var(--black);background:#ddd8cf;transform-origin:center;isolation:isolate}
.pedicure-card--primary{min-height:690px}
.pedicure-card--secondary{min-height:570px;margin-top:94px}
.pedicure-card img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;transition:transform .85s var(--premium-ease),filter .55s ease;filter:saturate(.92) contrast(1.02)}
.pedicure-card--primary img{object-position:center}
.pedicure-card--secondary img{object-position:center 52%}
.pedicure-card::before{
  content:"";position:absolute;z-index:2;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(10,10,10,.35));mix-blend-mode:multiply
}
.pedicure-card::after{
  content:"PEDICURE";position:absolute;z-index:2;right:-.035em;top:-.08em;
  font-family:var(--font-display);font-size:clamp(4.5rem,9vw,9rem);line-height:.8;color:rgba(255,255,255,.17);pointer-events:none
}
.pedicure-card figcaption{
  position:absolute;z-index:3;left:18px;right:18px;bottom:16px;display:flex;justify-content:space-between;align-items:center;
  color:#fff;text-transform:uppercase;font-size:.5rem;letter-spacing:.16em
}
.pedicure-card figcaption span{font-family:var(--font-display);font-size:2.2rem;line-height:.8;color:var(--red)}
.pedicure-card:hover img{transform:scale(1.035);filter:saturate(1.02) contrast(1.03)}

/* More obvious but still controlled section-to-section motion cues. */
.editorial-page{--section-fade:1;transition:filter .5s ease}
.editorial-page.premium-section-active{filter:saturate(1.015)}
.editorial-page::after{
  content:"";position:absolute;z-index:30;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,var(--red),var(--red) 16%,transparent 16%);transform:scaleX(var(--premium-section-line,.2));transform-origin:left
}
.premium-motion-slice{overflow:hidden;display:block}
.premium-motion-slice>span{display:block;will-change:transform}

@media(max-width:980px){
  .academy-preview__masthead{grid-template-columns:1fr!important;gap:20px!important}
  .academy-preview__word{grid-column:1!important;grid-row:2!important;font-size:clamp(6rem,18vw,10rem)!important}
  .academy-preview__headline{grid-column:1!important;grid-row:3!important;max-width:620px}
  .academy-preview__headline h2{font-size:clamp(3.5rem,8vw,5.2rem)!important;max-width:9ch!important}
  .footer-bottom--final{grid-template-columns:1fr auto!important}
  .footer-credit{grid-column:1/-1;grid-row:2;justify-self:start}
  .pedicure-editorial__grid{grid-template-columns:1fr 1fr}
  .pedicure-card--primary{min-height:560px}.pedicure-card--secondary{min-height:500px;margin-top:58px}
}
@media(max-width:640px){
  .academy-preview__masthead{padding:22px 0 26px!important}
  .academy-preview__word{font-size:clamp(4.8rem,20vw,7rem)!important;opacity:.18!important}
  .academy-preview__headline h2{font-size:clamp(3rem,15vw,4.65rem)!important;line-height:1!important;gap:.12em!important;max-width:8ch!important}
  .academy-preview__description{font-size:.74rem!important;max-width:300px!important}
  .footer-bottom--final{grid-template-columns:1fr!important;gap:12px!important}
  .footer-credit{grid-column:auto;grid-row:auto;justify-self:start;line-height:1.55}
  .pedicure-editorial{padding:38px 20px 46px}
  .pedicure-editorial__heading{grid-template-columns:1fr;gap:16px}
  .pedicure-editorial__heading h2{font-size:clamp(4rem,18vw,6rem)}
  .pedicure-editorial__meta{grid-column:1;justify-items:start;padding-bottom:0}
  .pedicure-editorial__grid{grid-template-columns:1fr;gap:12px}
  .pedicure-card--primary,.pedicure-card--secondary{min-height:520px;margin-top:0}
  .pedicure-card::after{font-size:5rem}
}
@media(prefers-reduced-motion:reduce){
  .pedicure-card img,.editorial-page{transition:none!important}
}