/* Font Face Declarations */
/* Crimson Text, served from this site rather than from Google, so no
   third party sees the visitor's IP. Latin and Latin Extended only;
   the browser fetches just the weight and range a page actually uses. */
/* latin-ext */
@font-face {
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/crimson-text/crimson-text-italic-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/crimson-text/crimson-text-italic-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/crimson-text/crimson-text-italic-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/crimson-text/crimson-text-italic-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/crimson-text/crimson-text-italic-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/crimson-text/crimson-text-italic-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/crimson-text/crimson-text-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/crimson-text/crimson-text-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/crimson-text/crimson-text-normal-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/crimson-text/crimson-text-normal-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/crimson-text/crimson-text-normal-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/crimson-text/crimson-text-normal-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Champagne & Limousines';
    /* woff2 first at 33 KB; the ttf stays for anything that cannot read it,
       which in practice is nothing still in use. */
    src: url('fonts/Champagne___Limousines.woff2') format('woff2'),
         url('fonts/Champagne___Limousines.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Brand Colors */
    --color-sage: #a8a79c;
    --color-cream: #efede8;
    --color-dark-gray: #3f4247;
    --color-black: #403e3f;
    --color-white: #ffffff;
    --color-dark-blue: #404247;

    /* Fonts */
    --font-body: 'Champagne & Limousines', sans-serif;
    --font-heading: "Crimson Text", serif;

    /* Font Size */

    --font-small:0.9rem;
}

/* 01 - Reset & Base
   ========================================================================== */

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

html {
    font-size: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

body {
    background: var(--color-cream);
    color: var(--color-dark-gray);
    margin: 0 auto;
    padding: 0;
    position: relative;
}

a {
    color: var(--c-secondary);
    text-decoration: none;
}

p, ul, ol {
    margin: 1.6rem 0;
}

/* ------------- Images ------------- */

img {
    max-width: 100%;
}

.image-n-150 {
    margin-bottom: -150px;
}

.image-n-550 {
    margin-bottom: -600px;
}

.clara-espacio .second-image {
    position: absolute;
    z-index: 2;
    right: -150px;
    top: 200px;
}

figure {
    position: relative;
    margin: 0;
    padding: 0;
}

/* Image Card */

.image-card a {
    position: relative;
    display: block;
    overflow: hidden;
}

.image-card a::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, rgba(65, 67, 65, 0.8), transparent);
    transition: all 0.3s ease;
    opacity: 0.6;
}

.image-card a:hover::after {
    opacity: 1;
}

.image-card a img {
    display: block;
}

.image-card h3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-white);
    font-weight: normal;
    z-index: 2;
}

.video-card-visual {
    aspect-ratio: 1.6;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.video-card-visual__video {
    opacity: 0;
    width: 101%;
    height: 101%;
    padding: 0;
    transition: opacity .4s;
    position: absolute;
    inset: 0%;
}

/* If video is active and hovered, set it to opacity 1 */
[data-video-on-hover="active"] video {
    opacity: 1;
}

/* Colors */

.bg-primary {
    background: var(--color-dark-gray);
    color: var(--color-white);
}

.bg-white {
    background:var(--color-white);
    color:var(--color-dark-gray);
}

/* 02 ############################### Grid System ############################### */

.row {
    max-width: 1560px;
    margin: 0 auto;
    display: grid;
}

.row-narrow {
    max-width: 1190px;
    margin: 0 auto;
    display: grid;
}

.full-width {
    width: 100%;
    max-width: 100%;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    position: relative;
    display: block;
}

.one-c {
    display: grid;
    grid-template-columns: 1fr;
}

.two-c {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
}

.two-uc {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3.5rem;
}

.two-cu {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3.5rem;
}

.three-c {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3.5rem;
}

.three-uc {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 3.5rem;
}

.four-c {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3.5rem;
}

.five-c {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3.5rem;
}

.six-c {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 3.5rem;
}

.seven-c {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3.5rem;
}

.eight-c {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 3.5rem;
}

.twelve-c {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 3.5rem;
}

.sixteen-c {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    gap: 3.5rem;
}

.two-one-c {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4.5rem;
}

.one-two-c {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4.5rem;
}

/* Column Span */

.c-span-4 {
    grid-column: span 4 / span 4;
}

.c-span-5 {
    grid-column: span 5 / span 5;
}

.c-span-6 {
    grid-column: span 6 / span 6;
}

.c-span-7 {
    grid-column: span 7 / span 7;
}

.c-span-8 {
    grid-column: span 8 / span 8;
}

.c-span-9 {
    grid-column: span 9 / span 9;
}

.c-span-10 {
    grid-column: span 10 / span 10;
}

.c-span-11 {
    grid-column: span 11 / span 11;
}

.c-span-12 {
    grid-column: span 12 / span 12;
}

.c-span-13 {
    grid-column: span 13 / span 13;
}

.c-span-14 {
    grid-column: span 14 / span 14;
}

.c-span-15 {
    grid-column: span 15 / span 15;
}

.c-span-16 {
    grid-column: span 16 / span 16;
}

/* Column Start */

.c-start-2 {
    grid-column-start: 2;
}

.c-start-3 {
    grid-column-start: 3;
}

.c-start-4 {
    grid-column-start: 4;
}

.c-start-5 {
    grid-column-start: 5;
}

.c-start-6 {
    grid-column-start: 6;
}

.c-start-7 {
    grid-column-start: 7;
}

.c-start-8 {
    grid-column-start: 8;
}

.c-start-9 {
    grid-column-start: 9;
}

.c-start-10 {
    grid-column-start: 10;
}

.c-start-11 {
    grid-column-start: 11;
}

.c-start-12 {
    grid-column-start: 12;
}

.c-start-13 {
    grid-column-start: 13;
}

.c-start-14 {
    grid-column-start: 14;
}

.c-start-15 {
    grid-column-start: 15;
}

.c-start-16 {
    grid-column-start: 16;
}

/* Gap Utilities */

.gap-100 {
    gap: 1rem;
}

.gap-200 {
    gap: 2rem;
}

.gap-350 {
    gap: 3.5rem;
}

.gap-450 {
    gap: 4.5rem;
}

/* ----------------- Spacing ----------------- */

.spacing-200 {
    padding: 2rem 0;
}

.spacing-300 {
    padding: 3rem 0;
}

.spacing-400 {
    padding: 4rem 0;
}

.spacing-500 {
    padding: 5rem 0;
}

.spacing-600 {
    padding: 6rem 0;
}

.spacing-700 {
    padding: 7rem 0;
}

.spacing-900 {
    padding: 9rem 0;
}

.spacing-1200 {
    padding: 12rem 0;
}

.spacing-negative {
    margin-top: -5rem;
}

.no-spacing-bottom {
    padding-bottom: 0;
}

.no-spacing-top {
    padding-top: 0;
}

.v-center-content {
    align-self: center;
}

/* 02 ############################### Header Layouts ############################### */

/* Page header — the label, headline and intro sit directly on the page
   grid, so their offsets are set with the c-start / c-span utilities
   instead of a fixed margin (and they reflow properly on small screens).
   Row gap is zeroed so the elements' own margins set the rhythm. */
.header-grid {
    /* The page grid's 3.5rem gap is not wanted for this header — the
       elements' own margins set the vertical rhythm and the columns
       should be flush. */
    gap: 0;
}

.header-grid > * {
    margin-top: 0;
}

#header-layout-2 {
    max-width:860px;
    margin:0 auto;
}

/* 03 ############################### Typography ############################### */

body,
h5,
h6,
textarea,
select,
button {
    font-family: var(--font-body);
}

h1, h2, h3 {
    font-family: var(--font-heading);
    font-weight: normal;
}

body,
input,
textarea,
select,
button {
    font-size: 1.5rem;
    line-height: 2rem;
    color: var(--color-dark-gray);
}

h1 {
    font-style: normal;
    font-size: 4.6rem;
    margin-bottom: 2rem;
    line-height: normal;
    font-weight: normal;
}

h2 {
    font-size: 3.6rem;
    font-weight: normal;
    line-height: 3.9rem;
}

h3 {
    font-size: 2.2rem;
    line-height: 2.6rem;
}

h4 {
    font-size: 2rem;
    font-weight: normal;
    line-height: 1.4;
}

h5 {
    font-weight: 500;
    font-size: 1.2rem;
}

.cta-box h3 {
    font-size: 2.5rem;
    margin-bottom: 0;
}

h1 span,
h2 span,
h3 span {
    font-weight: 700;
    font-style: italic;
}

.text-big {
    font-size: 2rem;
    line-height: 3.2rem;
}

.text-m-big {
    font-size: 1.8rem;
    line-height: 2.2rem;
}

.small-title {
    text-transform: uppercase;
    font-size: 1rem;
    display: inline-block;
    font-weight: 500;
    letter-spacing: 3px;
    margin-bottom:2rem;
}


   #intro p {
        margin:0.5rem;
    }

    .header-narrow {
        max-width: 770px;
    margin: 0 auto;
    }

/* ----------------- Text Styles ----------------- */

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

.text-right {
    text-align: right;
}

.signature {
    max-width: 200px;
    margin: 4rem auto;
    opacity: 0.8;
}

/* 04 ############################### Navigation ############################### */

/* ----------------- Header & Navigation ----------------- */

#main-header {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
    color:var(--color-white);
}

.bg-color #main-header, .bg-color #main-header a {
    color:var(--color-black);
}

.bg-color #main-header {
    border-bottom:1px solid #d5d4d0;
}

.bg-color main {
    padding-top:6rem;
}

#main-header img {
    max-width: 300px;
}

#main-header ul {
    margin: 0;
    padding: 0;
}

#header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
}

#header li {
    padding: 0 17px;
    display: inline-block;  
}

#header a {
    display: inline-block;
    text-decoration: none;
    position: relative;
    font-weight: 500;
    color: var(--dark);
    transition: .2s all ease-in;
    color: var(--color-white);
}

#header-right {
    display: flex;
    justify-content: flex-end;
}

#language {
    margin-left: 4rem;
}

/* ----------------- Logo (reusable text logo) -----------------
   Used in:
   - Desktop header (#header .logo) — large
   - Mobile banner (.mobile-logo) — medium, white
   - Mobile menu panel (.mobile-menu-logo .logo) — medium, dark
*/

.logo {
    position: relative;
    text-decoration: none;
    color: inherit;
    display: inline-block;
}

.logo a {
    position: relative;
    text-decoration: none;
    color: inherit;
}

.logo span {
    font-size: 1rem;
    position: absolute;
    right: -15px;
    top: -15px;
}

/* Desktop header sizing */
#header .logo {
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 2.4rem;
}

/* ----------------- Underline Link Effect ----------------- */

[data-underline-link] {
    text-decoration: none;
    position: relative;
}

[data-underline-link]::before {
    content: "";
    position: absolute;
    bottom: -0.125em;
    left: 0;
    width: 100%;
    height: 0.0625em;
    background-color: currentColor;
    transition: transform 0.435s cubic-bezier(0.625, 0.05, 0, 1);
    transform-origin: right;
    transform: scaleX(0) rotate(0.001deg);
    display:block;
}

    [data-underline-link]:hover::before {
        transform-origin: left;
        transform: scaleX(1) rotate(0.001deg);
    }

        .text-link {
        position:relative;
        padding-left: 1.5rem;
    }

    .text-link::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--color-sage);
    }


/* 05 ############################### Section Styles ############################### */

/* Home Banner */

#main-banner {
    min-height: 100vh;
    overflow: hidden;
    color: var(--color-white);
    position: relative;
}

/* Main content - H1 + arrow, vertically centered left */
.banner-main {
    position: absolute;
    left: 5vw;
    top: 50%;
    z-index: 3;
    max-width: 940px;

}

.banner-main h1 {
    font-size: 4.7rem;
    line-height: 1.15;
    margin: 0 0 2rem 0;
    font-weight: normal;
}

.banner-main h1 em {
    font-style: italic;
}

/* Arrow below H1 */
.banner-scroll-arrow {
    display: inline-block;
    margin-top: 1rem;
}

.scroll-arrow-circle {
    display: block;
    width: 60px;
    height: 60px;
    border: 1px solid var(--color-white);
    border-radius: 50%;
    position: relative;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.scroll-arrow-circle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-right: 1px solid var(--color-white);
    border-bottom: 1px solid var(--color-white);
    transform: translate(-50%, -60%) rotate(45deg);
    transition: border-color 0.3s ease;
}

.banner-scroll-arrow:hover .scroll-arrow-circle {
    background-color: var(--color-sage);
    border-color: var(--color-sage);
}

/* Description - bottom right */
.banner-description {
    position: absolute;
    right: 5vw;
    bottom: 5vh;
    z-index: 3;
    max-width: 580px;
}

.banner-description p {

    line-height: 1.7;
    margin: 0;
    opacity: 0.9;
}

#main-banner-content {
    grid-column: 2 / span 9;
    position: relative;
    z-index: 3;
}

#banner h1 {
    position: relative;
}

/* Banner Slider */

.fling-minislide {
    display: block;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: absolute;
    background-color: #000;
    left: 0;
    top: 0;
}


.second-image-right {
    max-width: 300px;
    position: absolute;
    z-index: 2;
    right: -150px;
    top: 150px;
}

.second-image-right-offset {
    margin-top: -8rem;
}


/* ----------------- About Clara Section ----------------- */

.about-clara h2 em {
    font-style: italic;
}

.about-image-main {
    margin-top: -4rem;
}

.about-image-main .second-image {
    max-width: 300px;
    position: absolute;
    z-index: 2;
    right: -150px;
    top: 150px;
        left: -90px;
}

.about-image-offset {
    margin-top: -8rem;
}

.about-image-small img,
.about-image-main img {
    width: 100%;
    height: auto;
    display: block;
}

/* Circle Button */

.button-circle {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: var(--color-dark-gray);
    margin-top: 1rem;
}

.button-circle::before {
    content: '';
    width: 50px;
    height: 50px;
    border: 1px solid var(--color-dark-gray);
    border-radius: 50%;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.button-circle:hover::before {
    background-color: var(--color-sage);
    border-color: var(--color-sage);
}

.button-circle span {
    font-size: 1rem;
    letter-spacing: 0.5px;
}

/* ----------------- End About Clara Section ----------------- */

.fling-minislide img {
    position: absolute;
    left: 0;
    top: 0;
    animation: fling-minislide 32s infinite, zoom-in 32s infinite;
    opacity: 0;
    object-fit: cover;
    width: 100vw;
    height: 100vh;
}

/* Four photographs on a 32 second loop, each starting 8 seconds after the
   one before it.

   This used to read 28% to 1 and 32% to 0, against a base of 0. That meant
   the first photograph climbed from nothing to full over nine seconds, so
   the banner opened black and stayed black — and because each one was only
   up for a tenth of the loop, the screen went black again between every
   slide. It is also what made the largest paint land at 9.4 seconds: there
   was nothing to paint until then.

   Each one now fades in as well as out, over the same window, so the two
   cross symmetrically.

   Fading only on the way out is not enough, because it leaves the change
   depending on paint order: three of the four hand over to a photograph
   written earlier in the markup, which sits underneath, so fading out
   reveals it. The fourth hands back to -4, which is written last and so
   sits on top, and appeared at full with nothing to fade through — a cut
   where the other three had a fade. With both ends fading, which one is on
   top stops mattering. */
@keyframes fling-minislide {
    0%   { opacity: 0; }
    4%   { opacity: 1; }
    25%  { opacity: 1; }
    29%  { opacity: 0; }
    100% { opacity: 0; }
}

/* Every delay is pulled back by the 1.28s the fade-in takes (4% of 32s), so
   the loop opens with -4 already at full rather than fading up from black.
   Shifting all four by the same amount leaves the spacing between them
   untouched; it only starts the loop a moment further in.

   -4, the flowers, is the one seen first, and stays so. */
.fling-minislide img:nth-child(4) { animation-delay: -1.28s; }
.fling-minislide img:nth-child(3) { animation-delay: 6.72s; }
.fling-minislide img:nth-child(2) { animation-delay: 14.72s; }
.fling-minislide img:nth-child(1) { animation-delay: 22.72s; }

@keyframes zoom-in {
    0% {
        transform: scale(1) translateY(0);
        transform-origin: 50% 84%;
    }
    100% {
        transform: scale(1.5) translateY(15px);
        transform-origin: center;
    }
}

/* -------------- Product Slider --------------------- */

.gsap-slider {
    grid-column-gap: 3em;
    grid-row-gap: 3em;
    flex-flow: column;
    align-items: center;
    width: 100%;
    padding-left: 5vw;
    padding-right: 5vw;
    display: flex;
    position: relative;
    overflow: hidden;
}

.gsap-slider__collection {
    width: 100%;
    max-width: 72em;
}

.gsap-slider__list {
    -webkit-user-select: none;
    user-select: none;
    will-change: transform;
    touch-action: pan-y;
    backface-visibility: hidden;
    display: flex;
}

.gsap-slider__item {
    width: calc(((100% - 1px) - (var(--slider-spv) - 1) * var(--slider-gap)) / var(--slider-spv));
    margin-right: var(--slider-gap);
    flex: none;
}

.empty-card {
    background: var(--color-dark-gray);
    color: var(--color-cream);
    padding: 2rem;
    aspect-ratio: 4 / 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-card a {
    color: var(--color-cream);
    text-align: center;
}

/* The cards open the collection. The slider suppresses a click that was
   really a drag, so dragging the row never navigates. */
a.product-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.product-card figure {
    overflow:hidden;
    margin-bottom:0.5rem;
}

.product-card img {
    transition:all ease .8s;
    display:block;
}

.product-card:hover img {
        scale: 1.2;
}


/* Slider Setup */

[data-gsap-slider-init] {
    --slider-status: on;
    --slider-spv: 4;
    --slider-gap: 1.5em;
}

@media screen and (max-width: 991px) {
    [data-gsap-slider-init] {
        --slider-status: on;
        --slider-spv: 2.25;
        --slider-gap: 1.5em;
    }
}

@media screen and (max-width: 767px) {
    [data-gsap-slider-init] {
        --slider-status: on;
        --slider-spv: 1.15;
        --slider-gap: 1em;
    }
}

[data-gsap-slider-item]:last-child {
    margin-right: 0;
}


/* Slider Controls */

.slider-header {
    align-items: end;
}

.gsap-slider__controls {
    grid-column-gap: .3em;
    grid-row-gap: .3em;
    justify-content: center;
    align-items: center;
    display: flex;
    margin-top: auto;
    transition:all ease .2s;
}

.gsap-slider__control {
    background: none;
    color: var(--color-dark-gray);
    border: 1px solid var(--color-dark-gray);
    border-radius: 120rem;
    width: 55px;
    height: 55px;
    text-align: center;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.gsap-slider__control:hover {
    background:var(--color-sage);
    color:var(--color-cream);
    border-color:var(--color-sage);
}

.gsap-slider__control img {
    max-width: 25px;
        transform: rotate(180deg);
        top: 2px;
    max-width: 20px;
    position:relative;
}

.gsap-slider__control--next img {
    transform: rotate(360deg);
}

[data-gsap-slider-status="not-active"] [data-gsap-slider-controls] {
    display: none;
}

[data-gsap-slider-control-status="not-active"] {
    opacity: 0.2;
    pointer-events: none;
}

/* 06 ############################### Scaling Video Effect ############################### */

.scaling-video-section {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    padding: 10vh 5vw 0;
    display: flex;
    position: relative;
}

.scaling-video-fullscreen {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    padding-top: 5vh;
    display: flex;
    position: relative;
}

.scaling-video__small-box {
    width: 80%;
    max-width: 1200px;
    position: relative;
}

.scaling-video__big-box {
    width: calc(100vw - (100vw - 100%));
    margin-left: calc(-50vw + 50%);
    position: relative;
}

.scaling-video__before {
    padding-top: 56.25%;
}

.scaling-video__wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.scaling-video {
    will-change: transform;
    background-color: var(--color-sage);
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    isolation: isolate;
    transform: translateX(0) rotate(0.001deg);
}

.scaling-video__video {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: inherit;
}

.scaling-video__dark {
    opacity: 0;
    background-color: var(--color-dark-gray);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.scaling-video__text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--color-white);
    z-index: 2;
    opacity: 0;
    width:700px;
     transform: translate(-50%, -50%)!important;
}

.scaling-video__text img{
    max-width:200px;
    margin:0 auto 2rem auto;
}

.scaling-video__text h2 {
    color: var(--color-white);
    max-width: 600px;
    margin: 0;
}

/* 07 ############################### Footer CTA ############################### */

#footer-cta {
    position: relative;
    background-color: var(--color-dark-gray);
    background-image: url('images/cta-banner.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Scrim so the copy stays readable over the photo */
#footer-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

#footer-cta .row {
    max-width: 760px;
    position: relative;
    z-index: 1;
}

#footer-cta h2,
#footer-cta p,
#footer-cta .cta-phone,
#footer-cta .cta-phone-label,
#footer-cta .cta-btn-secondary {
    color: var(--color-white);
}

#footer-cta .cta-btn-secondary {
    border-color: var(--color-white);
}

.cta-phone {
    display: block;
    margin-top: 48px;
    font-family: var(--font-heading);
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 400;
    font-style: italic;
    color: var(--white);
    text-decoration: none;
    letter-spacing: 0.02em;
}

.cta-btn-primary {
    display: inline-block;
    padding: 18px 48px;
    background: var(--color-sage);
    color: var(--color-white);
    font-weight: 500;
    font-size:1.3rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    transition: opacity 0.2s;
        border: 1px solid var(--color-sage);
}

.cta-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 36px;
    border: 1px solid var(--color-sage);
    font-size:1.3rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
}


/* 06.5 ############################### Contact Page ############################### */

.page-contact #main-header {
    position: relative;
    background: var(--color-cream);
}

.page-contact #header {
    border-bottom: 1px solid rgba(63, 66, 71, 0.1);
}

.page-contact #main-nav a {
    color: var(--color-dark-gray);
}

/* Contact Section */

.contact-section {
    padding-bottom: 0;
}

/* Contact Details */

.contact-details {
    padding-right: 2rem;
}

.contact-block {
    margin-bottom: 2.5rem;
}

.contact-block .small-title {
    display: block;
    margin-bottom: 1rem;
}

.contact-block address {
    font-style: normal;
}

.contact-block p {
    margin: 0 0 0.75rem 0;
    line-height: 1.7;
}

.contact-block a {
    color: var(--color-dark-gray);
    transition: color 0.3s ease;
}

.contact-block a:hover {
    color: var(--color-sage);
}

.contact-hours {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 1.5rem;
}

/* "Con cita previa" — the condition on the hours, so it reads after them.
   Shared by the footer, the contact page and the espacio page. */
.hours-note {
    margin-top: 0.75rem;
}

.contact-hours dd {
    margin: 0;
}

.contact-social {
    display: flex;
    gap: 1.5rem;
}

.link-arrow {
    display: inline-block;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-top: 0.5rem;
}

.link-arrow::after {
    content: ' →';
    transition: transform 0.3s ease;
    display: inline-block;
}

.link-arrow:hover::after {
    transform: translateX(4px);
}

/* Contact Form */

.contact-form-wrapper {
    background: var(--color-white);
    padding: 3rem;
}

/* Stands in for the form while mail cannot be delivered. The wrapper's
   white panel and its 3rem of padding are for a form; a photograph wants
   neither, so it runs to the edges of the column instead of sitting in a
   box. */
.contact-form-wrapper--photo {
    background: none;
    padding: 0;
    min-width: 0;
}

.contact-photo {
    margin: 0;
    height: 100%;
    min-height: 32rem;
    /* Without this the photograph's own width becomes the column's minimum
       and the grid grows past the page. */
    min-width: 0;
}

.contact-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 767px) {
    /* Stacked under the details it has no column to match, so it takes a
       shape of its own rather than the full height of what is above it. */
    .contact-photo {
        height: auto;
        min-height: 0;
        aspect-ratio: 4 / 5;
    }
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Grid and flex items default to min-width:auto, so a field cannot
       shrink below the width its own text asks for. With the larger type
       that pushed the two-column row past the edge of the page. */
    min-width: 0;
}

.form-group label {
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 1rem;
    border: 1px solid rgba(63, 66, 71, 0.2);
    background: transparent;
    font-family: inherit;
    /* The same size as body copy. Smaller made what the visitor is typing
       harder to read than the text around it, which is the wrong way round. */
    font-size: 1.5rem;
    color: var(--color-dark-gray);
    transition: border-color 0.3s ease;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-dark-gray);
}

.form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%233f4247' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
}

.form-group textarea {
    resize: vertical;
    min-height: 150px;
}

.form-checkbox label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    /* It was 0.9rem, too small to read for a line nobody may skip. Kept
       below the fields, since it is a consent line rather than copy. */
    font-size: 1.2rem;
    text-transform: none;
    letter-spacing: 0;
}

.form-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    cursor: pointer;
}

.form-checkbox a {
    color: var(--color-dark-gray);
    text-decoration: underline;
}

.btn-submit {
    padding: 1.25rem 2rem;
    background: var(--color-dark-gray);
    color: var(--color-white);
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
    align-self: flex-start;
}

.btn-submit:hover {
    background: var(--color-black);
}

/* Contact form — notices, honeypot and the required-fields note */

.form-notice {
    padding: 2rem;
    margin-bottom: 2rem;
    background: var(--color-white);
    border-left: 2px solid var(--color-sage);
}

.form-notice h2 {
    margin: 0 0 0.5rem 0;
    font-size: 1.6rem;
}

.form-notice p,
.form-notice li {
    margin: 0.25rem 0;
}

.form-notice ul {
    margin: 0;
    padding-left: 1.2rem;
}

.form-notice--error {
    border-left-color: #a4553f;
}

/* The honeypot. Taken out of the layout and off the tab order rather than
   set to display:none, which some bots know to look for. */
.form-website {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-required {
    margin-top: 1rem;
    font-size: var(--font-small);
    color: var(--color-sage);
}


/* Map Section */

.map-section {
    margin-top: 4rem;
}

.map-placeholder {
    position: relative;
    height: 500px;
    overflow: hidden;
}

.map-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
}

.map-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(63, 66, 71, 0.3);
}

.btn {
    display: inline-block;
    padding: 1rem 2rem;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.btn-white {
    background: var(--color-white);
    color: var(--color-dark-gray);
}

.btn-white:hover {
    background: var(--color-cream);
}


/* 07 ############################### Footer ############################### */

#page-footer {
    background: var(--color-dark-gray);
    color: var(--color-cream);
    position: relative;
    padding-top: 6rem;
}

.footer-logo {
    max-width: 550px;
}

/* Footer Contact */

.footer-contact {
    font-style: normal;
    margin: 1.5rem 0 2rem 0;
}

.footer p {
    margin: 0;    
    line-height: 1.8;
}

.footer-emails {
    margin-bottom: 2rem;
}


.footer-phones {
    margin-bottom: 2rem;
}

.footer a {
    color: var(--color-cream);
}

.footer a:hover {
    opacity: 0.7;
}


.footer-contact p, address.footer-contact, .footer-nav li {
    margin-top:0;
}

/* Footer Hours */

.footer-hours {
    margin-bottom: 2rem;
}

.footer-hours dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 2rem;
    margin: 0;
}

.footer-hours dt {
    font-weight: normal;
}

.footer-hours dd {
    margin: 0;
}

/* Footer Social */

.footer-social a {
    color: var(--color-cream);
}

/* Footer Navigation */

.footer-nav {
    margin-bottom: 3rem;
}

#page-footer .small-title {
    margin-bottom: 1rem;
    color: var(--color-sage);
}

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


.footer-nav a {
    color: var(--color-cream);
}


/* Footer Newsletter */

.footer-newsletter {
    margin-bottom: 3rem;
}


.footer-newsletter p {
    margin: 0 0 1.5rem 0;
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.newsletter-form input[type="email"] {
    background: transparent;
    border: 1px solid var(--color-sage);
    padding: 0.875rem 1rem;
    color: var(--color-cream);
    font-family: var(--font-body);
}

.newsletter-form input[type="email"]::placeholder {
    color: var(--color-sage);
}

.newsletter-form input[type="email"]:focus {
    outline: none;
    border-color: var(--color-cream);
}

.newsletter-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.newsletter-checkbox input[type="checkbox"] {
    margin-top: 0.2rem;
    cursor: pointer;
}

.newsletter-checkbox a {
    color: var(--color-cream);
    text-decoration: underline;
}

.newsletter-form button {
    background: var(--color-cream);
    color: var(--color-dark-gray);
    border: none;
    padding: 0.875rem 2rem;
    font-family: var(--font-body);
    cursor: pointer;
    align-self: flex-start;
    transition: opacity 0.3s ease;
}

.newsletter-form button:hover {
    opacity: 0.85;
}

/* Footer Language Switcher */

.footer-language {
    margin-top: 3rem;
}

.footer-language .small-title {
    margin-bottom: 1rem;
    color: var(--color-sage);
}

.footer-language ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1rem;
}

.footer-language a {
    color: var(--color-cream);
    opacity: 0.5;
    font-size: 0.875rem;
    letter-spacing: 1px;
    transition: opacity 0.3s ease;
}

.footer-language a:hover,
.footer-language a.active {
    opacity: 1;
}


/* Footer Bottom */

.footer-bottom {
    border-top: 1px solid rgba(168, 167, 156, 0.2);
    padding: 2rem 0;
    text-transform:uppercase;
}

.footer-bottom p {
    margin: 0;
    font-size: 0.875rem;
}

.footer-bottom a {
    color: var(--color-cream);
    transition: opacity 0.3s ease;
}

.back-to-top {
    color: var(--color-cream);
    font-size: 0.875rem;
    transition: opacity 0.3s ease;
}

/* The legal notice is a formality, not a destination, so it sits beside the
   back-to-top instead of taking a column of its own. The rule between them
   keeps the two readable as separate links. */
.footer-bottom__links {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.footer-legal {
    font-size: 0.875rem;
    padding-right: 1rem;
    margin-right: 1rem;
    border-right: 1px solid rgba(168, 167, 156, 0.35);
}

.footer-legal:hover { opacity: 0.7; }

@media screen and (max-width: 767px) {
    /* The centred headings ran edge to edge, while the copy under them sits
       1.2rem in. Same inset, so they line up. */
    .header-narrow {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }

    /* Side by side they would wrap mid-link on a phone, so the rule goes
       and they stack. */
    .footer-bottom__links {
        display: block;
    }
    .footer-legal {
        display: block;
        padding-right: 0;
        margin-right: 0;
        margin-bottom: 0.5rem;
        border-right: 0;
    }
}

.back-to-top:hover {
    opacity: 0.7;
}


/* ============================================================================
   08 ############################### About ############################### 
   ============================================================================ */

   #about-video {
    height:800px;
    overflow:hidden;
    position:relative;
    max-width: 1740px;
    margin: 0 auto;
   }


/* ============================================================================
   08 ############################### Projects ############################### 
   ============================================================================ */


#projects .small-title {
    margin:0;
    text-transform:unset;
    font-weight:300;
    font-size:1.3rem;
}

#projects h3 {
    font-size: 2rem;
    font-weight: normal;
    line-height: 1.4;
    margin-bottom:0;
}

   /*----------------Project Overview---------------*/

.filter-group {
  width: 100%;
}

/* Filter Buttons */
.filter-buttons {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  flex-flow: wrap;
  justify-content: flex-start;
  padding: 1em 1em 3em;
  display: flex;
}

.filter-btn {
  -webkit-appearance: none;
  appearance: none;
  background-color: #efeeec;
  border-radius: 10em;
  padding: .65em 1.25em;
  font-size: 1.5em;
  transition: color 0.6s cubic-bezier(0.625, 0.05, 0, 1), background-color 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

.filter-btn[data-filter-status="active"] {
  background-color: #131313;
  color: #EFEEEC;
}

/* Filter List */
.filter-list {
  flex-flow: wrap;
  width: 100%;
  display: flex;
}

.filter-list__item {
  width: 25%;
  padding: 1.5rem .75em;
}

.filter-list__item[data-filter-status="active"] {
  transition: opacity 0.6s cubic-bezier(0.625, 0.05, 0, 1), transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
  transform: scale(1) rotate(0.001deg);
  opacity: 1;
  visibility: visible;
  position: relative;
}
.filter-list__item[data-filter-status="transition-out"] {
  transition: opacity 0.45s cubic-bezier(0.625, 0.05, 0, 1), transform 0.45s cubic-bezier(0.625, 0.05, 0, 1);
  transform: scale(0.9) rotate(0.001deg);
  opacity: 0;
  visibility: visible;
}
.filter-list__item[data-filter-status="not-active"] {
  transform: scale(0.9) rotate(0.001deg);
  opacity: 0;
  visibility: hidden; 
  position: absolute;
}

/* Filter — Minimal Variant (text tabs with active underline) */

.filter-buttons--minimal {
  justify-content: center;
  padding: 0 1em 3em;
}

.filter-btn--minimal {
  background: transparent;
  border-radius: 0;
  padding: .5em .25em;
  font-size: 1em;
  color: var(--color-dark-gray);
  border: none;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  transition: border-color 0.4s ease, color 0.4s ease;
}

.filter-btn--minimal[data-filter-status="active"] {
  background: transparent;
  color: var(--color-dark-gray);
  border-bottom-color: var(--color-dark-gray);
}

/* Filter List — 2 column variant */

.filter-list--2col .filter-list__item {
  width: 50%;
}

/* Hidden tag collector for filter system */

.filter-tags-collect {
  display: none;
}

/* Marquee — infinite horizontal image strip */

.marquee {
  overflow: hidden;
}

.marquee-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  gap: 1rem;
  will-change: transform;
}

.marquee-item {
  flex: 0 0 auto;
  width: 22vw;
  max-width: 380px;
  min-width: 200px;
}

.marquee-item img {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 767px) {
  .marquee-item {
    width: 60vw;
  }
}

/* Project Card */

.project-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.project-card figure {
  overflow: hidden;
  margin: 0 0 1rem 0;
}

.project-card img {
  display: block;
  width: 100%;
  /* Every card holds the same 3:2, so a row of them lines up whatever shape
     the banner behind it happens to be. It also reserves the space before the
     photograph arrives, so a lazy card no longer lands at zero height and
     pushes the row about. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.project-card:hover img {
  transform: scale(1.05);
}

.project-card h3 {
  margin: 0 0 0.25rem 0;
}

.project-card .small-title {
  display: block;
}

@media screen and (max-width: 991px) {
  .filter-list__item {
    width: 50%;
  }
}

@media screen and (max-width: 767px) {
  .filter-list__item,
  .filter-list--2col .filter-list__item {
    width: 100%;
  }
}


   /*--------------Single  Project------------------*/

.proyecto h2 {
    font-size: 2.8rem;
}

   #project-banner {
    position: relative;
    overflow: hidden;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
   }

   #project-banner-content {
    max-width: 960px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    padding: 0 5vw;
   }

   #project-banner-content h1,
   #project-banner-content p {
        color: var(--color-white);
   }

   .project-banner-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
   }

    .project-banner-image:after {
        background:rgba(0, 0, 0, 0.5);
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        content:" ";
        display:block;
    }

   .project-banner-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
   }

.project-stats h2 {
    margin-bottom:5rem;
}

.project-stats li {
    list-style:none;
}

.project-stats span {
    text-transform: uppercase;
    font-size:var(--font-small);
    display:block;
}


/*-------- Project banner, split variant: title left, facts right --------*/

#project-banner.is--split {
    align-items: flex-end;
}

.project-banner-split {
    width: 100%;
    position: relative;
    z-index: 2;
    align-items: start;
    padding-bottom: 6rem;
}

.project-banner-split h1,
.project-banner-split p,
.project-banner-split li {
    color: var(--color-white);
}

.project-banner-intro h1 {
    margin-bottom: 1.5rem;
}

.project-banner-intro p {
    margin: 0;
}

.project-stats--banner ul {
    margin: 0;
    grid-column-gap: 2rem;
    grid-row-gap: 2.5rem;
}

.project-stats--banner span {
    /* the label reads in the same colour as its value: sage is too faint to
       hold against a bright banner photograph */
    margin-bottom: 0.25rem;
}

/* Below 1024 the page grid drops to 8 columns, so the two halves stack.
   Stacked, the content is taller than 80vh — let the banner grow instead
   of clipping the headline off the top. */
@media screen and (max-width: 1024px) {
    #project-banner.is--split {
        height: auto;
        min-height: 80vh;
    }

    .project-banner-split {
        padding-top: 12rem;
        padding-bottom: 4rem;
    }

    .project-banner-split .project-banner-intro,
    .project-banner-split .project-stats--banner {
        grid-column: 1 / -1;
    }

    .project-stats--banner {
        margin-top: 3rem;
    }
}

@media screen and (max-width: 768px) {
    .project-stats--banner ul {
        grid-template-columns: 1fr 1fr;
        grid-row-gap: 1.5rem;
    }
}


/*-------- Project image trio (opens the lightbox) --------*/

/* The three stand in one grid row, so they hold one height between them: the
   row stretches each item and the photograph covers its own box. Without this
   the row steps up and down whenever the three are not the same proportion,
   which is what happens the moment one of them is swapped for another. */
.project-trio__item {
    overflow: hidden;
}

.project-trio .gallery-item__button {
    display: block;
    background: transparent;
    height: 100%;
}

.project-trio .gallery-item__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/*-------- Text block over the project floor plan --------*/

#project-plan {
    position: relative;
}

#project-plan.has-plan::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--project-plan);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    opacity: 0.35;
    pointer-events: none;
    z-index: 0;
}

#project-plan .row {
    position: relative;
    z-index: 1;
}

/* The shared responsive rules rewrite .c-start-* / .c-span-* below 1366,
   so this column is placed explicitly at every step. */
@media screen and (max-width: 1366px) {
    #project-plan .project-plan__text {
        grid-column: 2 / span 7;
    }
}

@media screen and (max-width: 1024px) {
    #project-plan .project-plan__text {
        grid-column: 1 / span 5;
    }
}

@media screen and (max-width: 768px) {
    #project-plan .project-plan__text {
        grid-column: 1 / -1;
    }
}

@media screen and (max-width: 767px) {
    #project-plan.has-plan::before {
        opacity: 0.15;
    }
}


/*-------- Masonry item as a lightbox trigger --------*/

.masonry-item__button {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
}

.masonry-item__button img {
    transition: transform 0.8s ease;
}

.masonry-item__button:hover img {
    transform: scale(1.05);
}

.masonry-item__button:focus-visible {
    outline: 1px solid var(--color-dark-gray);
    outline-offset: 3px;
}


/*-------- Contact block --------*/

/* A long button label (an email address) must not widen the grid track */
#footer-cta .row > * {
    min-width: 0;
}

#footer-cta .double-cta a {
    max-width: 100%;
    overflow-wrap: anywhere;
}


/*---------------------Project Gallery------------------------*/

.gallery-grid {
  grid-column-gap: 1.25em;
  grid-row-gap: 4em;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding-bottom: 8em;
  display: flex;
}

.gallery-grid__item {
  width: calc(33.3333% - .833333em);
}

.gallery-item__button {
  outline-offset: -1px;
  background-color:none;
  width: 100%;
  padding: 0;
  color:var(--color-white);
  border:none;
  overflow:hidden;
  cursor:pointer;
}

.gallery-item__button img {
        transition: all ease 1s;
}

.gallery-item__button:hover img {
        scale: 1.1;
}

.gallery-item__button:focus-visible {
  outline-offset: 3px;
  border-radius: .25em;
  outline: 1px solid #131313;
}

.gallery-item__img {
  width: 100%;
}

/* Gallery as slider — overrides */

.gallery-slider {
  --slider-spv: 3;
}

.gallery-slider .gsap-slider__collection {
  position: relative;
}

.gallery-slider .gallery-grid {
  flex-wrap: nowrap;
  padding-bottom: 0;
}

.gallery-slider .gallery-grid__item {
  width: calc(((100% - 1px) - (var(--slider-spv) - 1) * var(--slider-gap)) / var(--slider-spv));
}

.gallery-slider__controls {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 5;
}

.gallery-slider__controls .gsap-slider__control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
}

.gallery-slider__control--prev {
  left: 1rem;
}

.gallery-slider__control--next {
  right: 1rem;
}

@media screen and (max-width: 991px) {
  .gallery-slider {
    --slider-spv: 2.25;
  }
}

@media screen and (max-width: 767px) {
  .gallery-slider {
    --slider-spv: 1.15;
  }
}

.lightbox-wrap {
  z-index: 100;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100dvh;
  display: none;
  position: fixed;
  inset: 0% 0% auto;
}

.lightbox-wrap.is-active {
  display: flex;
}

.lightbox-img__wrap {
  width: 90vw;
  height: calc(100svh - 10em);
}

.lightbox-img__container {
  width: 100%;
  height: 100%;
}

.lightbox-img__list {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.lightbox-img__item {
  visibility: hidden;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

.lightbox-img__item.is-active {
  visibility: visible;
}

.lightbox-img {
  object-fit: contain;
  border-radius: .375em;
  min-width: auto;
  max-height: 100%;
}

.lightbox-img__item img { 
  object-fit: contain !important;
  min-width: auto;
  width: auto;
  max-height: 100%;
}

.lightbox-nav {
  z-index: 2;
  color: #fff;
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: absolute;
  bottom: 1em;
  left: 2em;
  right: 2em;
}

.lightbox-nav__col {
  width: 33.333%;
}

.lightbox-nav__col.start {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.lightbox-nav__col.center {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  justify-content: center;
  align-items: center;
  display: flex;
}

.lightbox-nav__col.end {
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.lightbox-nav__text {
  margin-bottom: 0;
  font-size: 1em;
}

.lightbox-nav__button {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  background-color: #0000;
  justify-content: flex-start;
  align-items: center;
  margin: -1em;
  padding: 1em;
  display: flex;
  border:none;
  color:#fff;
  cursor:pointer;
}

.lightbox-nav__dot {
  background-color: currentColor;
  border-radius: 10em;
  width: .375em;
  height: .375em;
  margin-bottom: -.1em;
  transition-property: transform;
  transition-duration: .45s;
  transition-timing-function: cubic-bezier(.625, .05, 0, 1);
}

@media screen and (max-width: 767px) {
  .gallery-grid {
    grid-column-gap: 1em;
  }

  .gallery-grid__item {
    width: calc(50% - .5em);
  }
}

@media screen and (max-width: 479px) {
  .gallery-grid {
    grid-column-gap: .75em;
    grid-row-gap: 3em;
  }

  .gallery-grid__item {
    width: calc(50% - .375em);
  }
}



/* ============================================================================
   08 ############################### Team ############################### 
   ============================================================================ */

   #team h4 {
    font-family: var(--font-heading);
    font-size:1.5rem;
    margin:0;
   }

   .company-position {
    font-size:1.3rem;
    margin-top:-10px;
}

#team-grid.four-c {
    gap: 2rem;
}

.profile-image {
    overflow:hidden;
    margin-bottom:1rem;
}

/* Every portrait is cut to 900x1011, so the cards in a row finish level. This
   holds the shape anyway, so one upload of the wrong proportions cannot pull
   its row out of line. */
.profile-image img {
    display: block;
    width: 100%;
    aspect-ratio: 900 / 1011;
    object-fit: cover;
}

.profile-card {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    text-align: left;
    color: inherit;
    font: inherit;
    cursor: pointer;
    display: block;
    width: 100%;
}

.profile-card img {
    transition: all ease 1s;
    display: block;
    width: 100%;
}

.profile-card:hover img {
        scale: 1.1;
}

.profile-bio {
    display: none;
}

/* Profile Lightbox */

.profile-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5vh 5vw;
    visibility: hidden;
    opacity: 0;
}

.profile-lightbox[aria-hidden="false"] {
    visibility: visible;
    opacity: 1;
}

.profile-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(64, 62, 63, 0.6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    cursor: pointer;
}

.profile-lightbox__panel {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--color-white, #ffffff);
    width: 100%;
    max-width: 1100px;
    max-height: 90vh;
    overflow: hidden;
    z-index: 1;
}

.profile-lightbox__close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--color-dark-gray);
    z-index: 2;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.profile-lightbox__close:hover {
    opacity: 0.6;
}

.profile-lightbox__image {

    background: var(--color-cream);
    position:relative;
}

.profile-lightbox__image:after {
content:"";
width:20px;
height:100px;
position:absolute;
bottom:0;
right:-20px;
    background: var(--color-sage);
}

.profile-lightbox__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-lightbox__content {
    padding: 4rem 3rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.profile-lightbox__content h3 {
    margin: 0 0 0.25rem 0;
}

.profile-lightbox__content .company-position {
margin:0;
}

.profile-lightbox__content p {
    margin-bottom: 1rem;
}

@media screen and (max-width: 767px) {
    /* On a phone the lightbox takes the whole window and scrolls as one
       piece. It used to hold the panel to 95vh with the photograph in a
       40vh row: a photograph that keeps its own shape is taller than that
       row, so it ran out of the panel and over the text underneath. Letting
       both rows size themselves and scrolling the lightbox is what fixes it. */
    .profile-lightbox {
        padding: 0;
        align-items: flex-start;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* The window a phone actually shows, rather than the one behind its
       toolbars, so the foot of the panel is reachable. */
    @supports (height: 100dvh) {
        .profile-lightbox {
            height: 100dvh;
            bottom: auto;
        }
    }

    /* Fixed, so it still covers the page once the panel scrolls past it. */
    .profile-lightbox__backdrop {
        position: fixed;
    }

    .profile-lightbox__panel {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        max-height: none;
        min-height: 100%;
        overflow: visible;
    }

    /* The team photographs are all 900x1011; the collection sets its own
       4:5 further down. Either way the box has a shape of its own, so the
       panel grows to fit it instead of the image spilling out.

       align-self keeps the row from stretching it: a stretched box with a
       shape of its own takes its width from that height instead, and then
       hangs off the side of the panel. */
    .profile-lightbox__image {
        aspect-ratio: 900 / 1011;
        align-self: start;
        width: 100%;
    }

    /* The sage tab sits in the gap between the two columns. There is one
       column here, so it would hang off the right edge — and the panel no
       longer clips it. */
    .profile-lightbox__image:after {
        display: none;
    }

    .profile-lightbox__content {
        padding: 2rem 1.5rem;
        overflow-y: visible;
        justify-content: flex-start;
    }

    /* Held against the window so it is reachable wherever the panel is
       scrolled to. This needs the panel to carry no transform of its own,
       which is why the opening tween clears one. */
    .profile-lightbox__close {
        position: fixed;
        top: 0.75rem;
        right: 0.75rem;
        background: rgba(255, 255, 255, 0.85);
        border-radius: 50%;
    }
}

/* ============================================================================
   07.5 ########################## Mobile Navigation ##########################
   - Below 1100px: desktop header hides, hamburger + slide-out appear
   - Mobile logo sits inside banner top-left (scrolls away with content)
   - Hamburger is fixed top-right, always accessible
   ============================================================================ */


/* Hide hamburger + mobile menu + mobile logo on desktop by default */
#mobile-menu-toggle,
#mobile-menu,
.mobile-logo {
    display: none;
}


@media screen and (max-width: 1100px) {

    /* --- Hide desktop header --- */
    #main-header {
        display: none;
    }

    /* --- Mobile logo: sits in the banner top-left, scrolls away with content
           (NOT fixed — only the hamburger is pinned).
           Matches desktop logo styling. --- */
    .mobile-logo {
        display: inline-block;
        position: absolute;
        top: 2.3rem;
        left: 2rem;
        z-index: 10;
        text-transform: uppercase;
        letter-spacing: 4px;
        font-size: 1.8rem;
        color: var(--color-white);
        text-decoration: none;
    }

    /* If a page has a light banner instead of dark imagery, flip the color */
    .bg-color .mobile-logo {
        color: var(--color-dark-gray);
    }


    /* --- Hamburger button: round, fixed, top-right --- */
    #mobile-menu-toggle {
        display: flex;
        position: fixed;
        top: 1.5rem;
        right: 1.5rem;
        z-index: 200;

        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        padding: 0;

        background: var(--color-dark-gray);
        box-shadow: 0 4px 14px rgba(64, 62, 63, 0.25);

        align-items: center;
        justify-content: center;

        transition: background 0.25s ease, transform 0.25s ease;
    }

    #mobile-menu-toggle:hover {
        transform: scale(1.05);
    }

    /* The 3 lines */
    .hamburger-icon {
        position: relative;
        display: block;
        width: 22px;
        height: 16px;
    }

    .hamburger-icon span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 1.5px;
        background: var(--color-cream);
        transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease;
    }

    .hamburger-icon span:nth-child(1) { top: 0; }
    .hamburger-icon span:nth-child(2) { top: 7px; }
    .hamburger-icon span:nth-child(3) { top: 14px; }

    /* When open: morph into an X */
    #mobile-menu-toggle.is-active .hamburger-icon span:nth-child(1) {
        top: 7px;
        transform: rotate(45deg);
    }
    #mobile-menu-toggle.is-active .hamburger-icon span:nth-child(2) {
        opacity: 0;
    }
    #mobile-menu-toggle.is-active .hamburger-icon span:nth-child(3) {
        top: 7px;
        transform: rotate(-45deg);
    }


    /* --- Slide-out menu --- */
    #mobile-menu {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 150;
        pointer-events: none;
    }

    .mobile-menu-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(64, 62, 63, 0.5);
        opacity: 0;
        transition: opacity 0.35s ease;
    }

    .mobile-menu-panel {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: min(85%, 380px);
        background: var(--color-cream);
        padding: 2.5rem;

        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 3rem;

        transform: translateX(100%);
        transition: transform 0.45s cubic-bezier(0.5, 0, 0.2, 1);
        box-shadow: -8px 0 30px rgba(64, 62, 63, 0.15);
    }

    /* Open state */
    #mobile-menu.open {
        pointer-events: all;
    }

    #mobile-menu.open .mobile-menu-backdrop {
        opacity: 1;
    }

    #mobile-menu.open .mobile-menu-panel {
        transform: translateX(0);
    }

    /* Logo inside menu — centered at top, uses shared .logo class */
    .mobile-menu-logo {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 2rem;
        border-bottom: 1px solid rgba(64, 62, 63, 0.12);
        width: 100%;
    }

    .mobile-menu-logo .logo {
        text-transform: uppercase;
        letter-spacing: 4px;
        font-size: 1.5rem;
        color: var(--color-dark-gray);
    }

    /* Nav links inside slide-out */
    .mobile-menu-nav {
        width: 100%;
    }

    .mobile-menu-nav ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        padding: 0;
        margin: 0;
    }

    .mobile-menu-nav a {
        display: block;
        padding: 0.6rem 0;
        font-family: var(--font-heading);
        font-size: 1.7rem;
        font-weight: 400;
        color: var(--color-dark-gray);
        text-decoration: none;
        letter-spacing: 0.02em;
        transition: color 0.25s ease;
    }

    .mobile-menu-nav a:hover,
    .mobile-menu-nav a:active {
        color: var(--color-sage);
    }

    /* Footer of menu: contact + language toggle */
    .mobile-menu-footer {
        margin-top: auto;
        padding-top: 2rem;
        border-top: 1px solid rgba(64, 62, 63, 0.12);
        width: 100%;

        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .mobile-menu-contact {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .mobile-menu-tel {
        font-family: var(--font-heading);
        font-size: 1.2rem;
        color: var(--color-dark-gray);
        text-decoration: none;
        letter-spacing: 0.02em;
        transition: color 0.2s ease;
    }

    .mobile-menu-tel:hover {
        color: var(--color-sage);
    }

    .mobile-menu-email {
        font-family: var(--font-body);
        font-size: 0.9rem;
        color: var(--color-dark-gray);
        text-decoration: none;
        letter-spacing: 0.04em;
        transition: color 0.2s ease;
    }

    .mobile-menu-email:hover {
        color: var(--color-sage);
    }

    .mobile-menu-lang {
        list-style: none;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        padding: 0;
        margin: 0;
        font-family: var(--font-body);
        font-size: 0.9rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }

    .mobile-menu-lang a {
        color: var(--color-dark-gray);
        text-decoration: none;
        opacity: 0.5;
        transition: opacity 0.2s ease;
    }

    .mobile-menu-lang a.active,
    .mobile-menu-lang a:hover {
        opacity: 1;
    }

    .mobile-menu-lang li + li::before {
        content: "/";
        margin-right: 1rem;
        color: var(--color-dark-gray);
        opacity: 0.4;
    }
}


/* ============================================================================
   08 ############################### Responsive ############################### 
   ============================================================================ */


/* -------------------------------- Tablet Horizontal (max-width: 1366px) -------------------------------- */


@media screen and (max-width: 1366px) {

.image-n-550 {
    display:none;
}

.image-n-150 {
    margin-bottom:6rem;
}

        .row {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .row-narrow {
        padding-left: 6rem;
        padding-right: 6rem;
    }

    .c-start-2 {
    grid-column-start: 1;
}

.c-span-5 {
    grid-column: span 6 / span 6;
}

header .c-span-8 {
    grid-column: span 11 / span 11;
}

/* About Clara */

.about-clara .first-image.c-span-4.c-start-3 {
        grid-column-start: 1;
            grid-column: span 6 / span 6;
}

.about-clara .second-image.c-span-7.c-start-8 {
grid-column: span 9 / span 9;
}

/* Espacio */

.clara-espacio .second-image {
    position: absolute;
    z-index: 2;
    right: -60px;
    top: 165px;
    max-width: 220px;
}

.clara-espacio .c-start-11.c-span-5 {

}

/* Clara Collection */

.clara-collection.spacing-1200 {
    padding:4rem 0;
}

.product-slider.spacing-1200 {
    padding:0!important;
}

/* Spacing */

.spacing-1200 {
    padding-top: 9rem;
    padding-bottom:9rem;
}

.spacing-1200.no-spacing-bottom {
    padding-top: 9rem;
    padding-bottom:0;
}

.gsap-slider.spacing-1200 {
    padding:0;
}

    /* Typography */

    h2 {
        font-size: 3rem;
        line-height: 2.78rem;
    }

    .small-title {
        margin-bottom:0;
    }


/* Footer */

#page-footer {
    padding:0 2rem;
}

}


/* -------------------------------- Tablet (max-width: 1024px) -------------------------------- */

@media screen and (max-width: 1024px) {

    .about-image-small img, .about-image-main img {
    width: 70%;
}

.about-image-main .second-image {
    max-width: 211px;
    position: absolute;
    z-index: 2;
    right: 17px;
    top: 66px;
    left: unset;
}

.about-clara .row:first-of-type {
  margin-bottom:4rem;
}

.about-clara .row:last-of-type {
    display:none;
}

    /* --- Grid System --- */
    .sixteen-c {
        grid-template-columns: repeat(8, 1fr);
        gap: 2rem;
    }

    .row {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .row-narrow {
        padding-left: 6rem;
        padding-right: 6rem;
    }

    /* Column overrides for tablet */
    .c-span-4  { grid-column: span 4; }
    .c-span-5  { grid-column: span 5; }
    .c-span-7  { grid-column: span 7; }
    .c-span-8  { grid-column: span 8; }
    .c-span-9  { grid-column: span 8; }
    .c-span-10 { grid-column: span 8; }

    .c-start-2  { grid-column-start: 1; }
    .c-start-3  { grid-column-start: 1; }
    .c-start-6  { grid-column-start: 1; }
    .c-start-8  { grid-column-start: 1; }
    .c-start-9  { grid-column-start: 5; }
    .c-start-11 { grid-column-start: 1; }
    .c-start-12 { grid-column-start: 1; }
    .c-start-13 { grid-column-start: 5; }

    /* --- Typography --- */
    h1 {
        font-size: 3.6rem;
        line-height: 1.15;
    }

    h2 {
        font-size: 2.8rem;
        line-height: 3.2rem;
    }

    h3 {
        font-size: 1.9rem;
        line-height: 2.3rem;
    }

    body, input, textarea, select, button {
        font-size: 1.3rem;
        line-height: 1.85rem;
    }

    .text-big {
        font-size: 1.7rem;
        line-height: 2.7rem;
    }

    .text-m-big {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .banner-main h1 {
        font-size: 3.4rem;
    }

    /* --- Spacing --- */

    .no-spacing-bottom {
        padding-bottom:0!important;
    }

        .no-spacing-top {
        padding-top:0!important;
    }

    .spacing-1200 {
        padding-top: 6rem;
        padding-bottom:6rem;
    }

    .spacing-900 {
        padding-top: 5rem;
        padding-bottom:5rem;
    }

    .spacing-700 {
        padding-top: 4rem;
        padding-bottom:4rem;
    }

    .spacing-600 {
        padding-top: 3rem;
        padding-bottom:3rem;
    }

    /* --- Header --- */
    #main-header img {
        max-width: 200px;
    }

    /* --- Banner --- */
    #main-banner {
        min-height: 64vh;
    }

    .banner-main {
        max-width: 65vw;
    }

    /* --- About Section --- */
    .about-clara .row.sixteen-c.spacing-1200 {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
    }

   .c-start-2.c-span-5, .clara-espacio .c-start-2.c-span-8, .clara-espacio .c-start-11.c-span-5,    .product-slider .slider-header p  {
        max-width: 670px;
    }

    .about-clara .c-start-2.c-span-5 {
        grid-column: 1 / -1;
    }

    .about-clara .c-span-8.c-start-8 {
        grid-column: 1 / -1;
        order: -1;
    }

    .about-image-main {
        margin-top: 0;
    }

    .about-clara .row.sixteen-c.spacing-600 {
        grid-template-columns: repeat(8, 1fr);
        gap: 2rem;
    }

    .about-clara .c-span-4.c-start-3 {
        grid-column: 1 / span 4;
    }

    .about-clara .c-span-7.c-start-8 {
        grid-column: 5 / span 4;
    }

    /* --- Video Section ---*/

    .scaling-video-section {
        padding-top:0;
    }

    /* --- Nuestro Espacio Section --- */
    .clara-espacio header.sixteen-c {
        display: block;
    }

    .clara-espacio .sixteen-c.spacing-900 {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
    }

    .clara-espacio .c-span-8.image-n-150 {
        width: 80%;
        margin-bottom: 0;
    }

    .clara-espacio .second-image {
    right: -190px;
    }

    .image-n-150 {
        margin-bottom: 0;
    }

    .image-n-550 {
        margin-bottom: -200px;
        margin-top:0;
    }

    /* --- Product Slider --- */
   main .gsap-slider {
        align-items: flex-start;
        padding-left:1.2rem;
    }
    
    .product-slider .slider-header {
        display: block;
        width: 100%;
        padding-left:0;
        padding-right:0;
    }

    .product-slider .slider-header .c-span-8.c-start-2 {
        max-width: 600px;
    }
    
    .product-slider .slider-header .gsap-slider__controls {
        justify-content: flex-start;
        margin-top: 1.5rem;
    }

    /* --- Video Section --- */
    .scaling-video__text {
        width: 570px;
    }

    .scaling-video__small-box {
        width: 85%;
    }

        .scaling-video__text img {
        margin-bottom:0;
    }

    /* --- Footer --- */
    .footer-logo {
        max-width: 350px;
    }

    #page-footer .row.sixteen-c.spacing-900 {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    #page-footer .c-span-5 {
        grid-column: span 1;
    }

    #page-footer .c-span-4.c-start-6 {
        grid-column: span 1;
    }

    #page-footer .c-span-4.c-start-10 {
        grid-column: span 1;
    }

    .footer-bottom .c-span-8 {
        grid-column: 1 / span 2;
    }

    .footer-bottom .c-span-4.c-start-13 {
        grid-column: 3 / span 1;
    }
}

/* -------------------------------- Mobile Landscape / Small Tablet (max-width: 768px) -------------------------------- */

@media screen and (max-width: 768px) {

        /* --- Row padding --- */
    main .row,
    main .row-narrow {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }

    .about-image-main .second-image  {
       
    }

    /* The 70% these take from 1024 down is an offset that reads as
       deliberate on a tablet. On a phone the column is already narrow, so
       it only leaves a strip of empty page beside the picture. This has to
       sit after that rule, not before: same specificity, later wins. */
    .about-image-small img,
    .about-image-main img {
        width: 100%;
    }

    /* --- Grid System --- */
    /* .twelve-c belongs here too: left at twelve tracks its 3.5rem gaps
       alone come to more than a phone is wide, so every track resolved to
       zero and whatever sat in one spilled off the page. */
    .sixteen-c,
    .twelve-c {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .two-c,
    .two-uc,
    .two-cu,
    .three-uc,
    .four-c,
    .five-c {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .three-c {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    #intro .three-c {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0.5rem;
    }

    .row,
    .row-narrow {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }

    /* All column spans become full width */
    .c-span-4,
    .c-span-5,
    .c-span-6,
    .c-span-7,
    .c-span-8,
    .c-span-9,
    .c-span-10 {
        grid-column: 1 / -1;
    }

    .c-start-2,
    .c-start-3,
    .c-start-4,
    .c-start-5,
    .c-start-6,
    .c-start-7,
    .c-start-8,
    .c-start-9,
    .c-start-10,
    .c-start-11,
    .c-start-12,
    .c-start-13,
    .c-start-14,
    .c-start-15,
    .c-start-16 {
        grid-column-start: 1;
    }

    /* --- Typography --- */
    h1 {
        font-size: 2.8rem;
        line-height: 1.15;
        margin-bottom: 1.5rem;
    }

    h2 {
        font-size: 2.2rem;
        line-height: 2.6rem;
    }

    h3 {
        font-size: 1.7rem;
        line-height: 2.1rem;
    }

    body, input, textarea, select, button {
        font-size: 1.15rem;
        line-height: 1.7rem;
    }

    .text-big {
        font-size: 1.4rem;
        line-height: 2.2rem;
    }

    .text-m-big {
        font-size: 1.3rem;
        line-height: 1.8rem;
    }

    .small-title {
        font-size: 0.85rem;
        letter-spacing: 2px;
        margin-bottom: 0;
    }

    /* --- Spacing --- */
    .spacing-1200 {
        padding: 5rem 0;
    }

    .spacing-900 {
        padding: 4rem 0;
    }

    .spacing-700 {
        padding: 3.5rem 0;
    }

    .spacing-600 {
        padding: 3rem 0;
    }

    .spacing-500 {
        padding: 2.5rem 0;
    }

    .spacing-400 {
        padding: 2rem 0;
    }

    /* --- Header --- */
    #header {
        padding: 1.5rem;
    }

    #main-header img {
        max-width: 170px;
    }

    #language {
        margin-left: 0;
    }

    /* --- Banner --- */

#main-banner {
    min-height: 68vh;
}

    .banner-main {
        max-width: 85vw;
        left: 1.5rem;
        top: auto;
        bottom: 12vh;
    }

    .banner-main h1 {
        font-size: 2.8rem;
        line-height: 1.15;
    }

    .banner-main p {
        font-size: 1.1rem;
        line-height: 1.6;
    }

    .scroll-arrow-circle {
        width: 50px;
        height: 50px;
    }

    /* --- Intro Section --- */
    .intro .row-narrow {
        max-width: 100%;
    }

    .signature {
        max-width: 150px;
        margin: 2.5rem auto;
    }

    /* --- About Section --- */
    .about-image-main {
        margin-top: 0;
    }

    .about-image-small {
        margin-top: 0;
    }

    .about-clara .spacing-600 {
        padding: 2rem 0;
    }

    .about-clara .row.sixteen-c.spacing-1200 {
        display: flex;
        flex-direction: column;
    }

    .about-clara .row.sixteen-c.spacing-1200 .c-span-8 {
        order: -1;
    }


    /*---Espacio Section ---*/

    .clara-espacio .second-image {
        right: -76px;
            top: 60px;
    }

    /* --- Events Section --- */
    .second-image {
        position: relative;
        right: auto;
        top: auto;
        max-width: 50%;
        margin-top: 1.5rem;
    }

    .image-n-150 {
        margin-bottom: 0;
    }

    .image-n-550 {
        margin-bottom: -150px;
    }

    /* --- Video Section - Static on mobile --- */
    .scaling-video-section {
        min-height: auto;
        padding: 0;
    }

    .scaling-video__small-box {
        width: 100%;
        max-width: 100%;
    }

    .scaling-video__before {
        padding-top: 75%;
    }

    .scaling-video__wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .scaling-video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .scaling-video__dark {
        opacity: 0.5 !important;
    }

    .scaling-video__text {
        opacity: 1 !important;
        transform: translate(-50%, -50%) !important;
        width: 85%;
        max-width: 500px;
    }

    .scaling-video-fullscreen {
        display: none;
    }

        .scaling-video__text img {
        margin-bottom:0;
    }

    /* --- Product Slider --- */
    .slider-header {
        align-items: start;
    }

    .product-slider .slider-header .c-span-8 {
        grid-column: 1 / -1;
    }

    /* --- Footer --- */
    #page-footer {
        padding-top: 3rem;
    }

    .footer-logo {
        max-width: 300px;
    }

    #page-footer .sixteen-c {
        gap: 2.5rem;
    }

    /* Footer columns stack */
    #page-footer .c-span-5,
    #page-footer .c-span-4 {
        grid-column: 1 / -1;
    }

    .footer-bottom {
        padding: 1.5rem 0;
        display: flex !important;
        grid-template-columns: unset;
        justify-content: space-between;
        align-items: center;
    }

    .footer-bottom .c-span-8,
    .footer-bottom .c-span-4 {
        grid-column: unset;
    }

    .footer-bottom .text-right {
        text-align: right;
        margin-top: 0;
    }
}

/* -------------------------------- Mobile (max-width: 480px) -------------------------------- */

@media screen and (max-width: 480px) {

            .about-clara .second-image.second-image.c-span-7.c-start-8, .product-slider .c-span-2.c-start-15, .about-image-main .second-image {
        display:none;
    }

    /* --- Typography --- */
    h1 {
        font-size: 2.2rem;
    }

    h2 {
        font-size: 1.8rem;
        line-height: 2.2rem;
    }

    h3 {
        font-size: 1.5rem;
        line-height: 1.9rem;
    }

    body, input, textarea, select, button {
        font-size: 1.1rem;
        line-height: 1.7rem;
    }

    .text-big {
        font-size: 1.2rem;
        line-height: 1.9rem;
    }

    .text-m-big {
        font-size: 1.15rem;
        line-height: 1.6rem;
    }

    /* --- Spacing --- */

 .spacing-1200.no-spacing-bottom {
    padding-bottom:0;
 }

    .spacing-1200 {
        padding: 3.5rem 0;
    }

    .spacing-900 {
        padding: 3rem 0;
    }

    .spacing-700 {
        padding: 2.5rem 0;
    }

    .spacing-600 {
        padding: 2rem 0;
    }

    /* --- Row padding --- */
    .row,
    .row-narrow {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }

    /* --- Content padding --- */   
    
    .content-text {
        padding:0;
    }

    /* --- Header --- */
    #header {
        padding: 1.2rem;
    }

    #main-header img {
        max-width: 140px;
    }

    #header li {
        padding: 0 8px;
    }

    #header a {
        font-size: 0.85rem;
    }

    /* --- Banner --- */
    #main-banner {
        min-height: 65vh;
    }

    .banner-main {
        max-width: 90vw;
        left: 1.2rem;
        bottom: 10vh;
    }

    .banner-main h1 {
        font-size: 2.2rem;
        margin-bottom: 1rem;
    }

    .banner-main p {
        font-size: 1rem;
        line-height: 1.5;
    }

    .scroll-arrow-circle {
        width: 44px;
        height: 44px;
    }

    .scroll-arrow-circle::after {
        width: 8px;
        height: 8px;
    }

    /* --- Intro Section --- */
    .signature {
        max-width: 120px;
        margin: 2rem auto;
    }

    /* --- About --- */

    .about-clara .row.sixteen-c.spacing-1200 .c-span-7 {
        order: -1;
    }

    .about-clara .first-image.c-span-4.c-start-3 {
        grid-column: 1 / span 10;
    }

    .spacing-600.no-spacing-bottom {
        padding-bottom:0;
    }

    /* --- Space --- */

    .clara-espacio.bg-white .c-start-11.c-span-5 {
        grid-column: 1 / span 5;
    }

    .image-n-550 {
        margin-bottom: -35px;
        margin-top:1.1rem;
    }

   .clara-espacio .second-image {
        display:none;
    }

    .clara-espacio .sixteen-c.spacing-900 {
        gap: 0.5rem;
    }

        .clara-espacio .c-span-8.image-n-150 {
        width: 100%;
    }

    /* --- Video Section --- */
    .scaling-video__text img {
        max-width: 90px;
        margin-bottom:0;
    }

    .scaling-video__text .text-m-big {
        font-size: 1.2rem;
        line-height: 1.5rem;
    }

    .scaling-video__text {
        width: 90%;
    }

    .scaling-video__before {
        padding-top: 90%;
    }

    /* Collection */

 .product-slider .slider-header {
        margin-top:1rem;
        margin-bottom:-2rem;
        padding-left:2rem;
        padding-right:2rem;
    }

    .gsap-slider__collection {
        padding-left:25px;
    }

    .spacing-1200 .spacing-1200 {
        padding-top:0;
    }

    h4 {
        font-size:1.4rem;
    }

    .gsap-slider__control {
            width: 40px;
            height: 40px;
    }

    .gsap-slider__controls {
        justify-content:left;
    }

    .gsap-slider__item {
    width: calc(((65% - 1px) - (var(--slider-spv) - 1) * var(--slider-gap)) / var(--slider-spv));
}

.gsap-slider__control img {
        top: 4px;
    max-width: 15px;
}

    /* --- Footer --- */

    #page-footer {
        padding-left:0;
        padding-right:0;
    }

    #page-footer .sixteen-c {
        display:block;
    }

    .footer-logo {
        max-width: 220px;
    }

    .footer-bottom p {
        font-size: 0.75rem;
    }

    .back-to-top {
        font-size: 0.75rem;
    }


    /* --- Mobile Navigation tweaks for tiny screens --- */

    #mobile-menu-toggle {
        width: 50px;
        height: 50px;
        top: 1.2rem;
        right: 1.2rem;
    }

    .mobile-logo {
        top: 2rem;
        left: 1.5rem;
        font-size: 1.2rem;
        letter-spacing: 4px;
    }

    .mobile-menu-panel {
        padding: 2rem;
        gap: 2.5rem;
    }

    .mobile-menu-logo .logo {
        font-size: 1.3rem;
        letter-spacing: 4px;
    }

    .mobile-menu-nav a {
        font-size: 1.5rem;
    }

}

/* Paired CTA buttons (project detail + about CTA) */
.double-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin: 1.5rem 0;
}

/* ============================================================
   Full-bleed image band

   The full-width figure used between sections on the project,
   collection and espacio pages.
   ============================================================ */


.editorial-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================================
   Aviso legal — a single column of running text. Narrow measure,
   because legal prose is read in lines, not scanned in blocks.
   ============================================================ */
.legal-copy {
    max-width: 46rem;
    margin: 0 auto;
}

.legal-copy h1 { margin-bottom: 1.5rem; }

.legal-lead {
    font-size: 1.35rem;
    margin-bottom: 0.75rem;
}

.legal-updated {
    font-size: 1rem;
    margin-bottom: 3.5rem;
}

.legal-copy h2 {
    margin-top: 3rem;
    margin-bottom: 1rem;
}

.legal-copy p { margin-bottom: 1.1rem; }

.legal-list {
    margin: 0 0 1.1rem 1.2rem;
    padding: 0;
}

.legal-list li { margin-bottom: 0.6rem; }

/* The identity block is a table of facts, so it is laid out as one. */
.legal-identity {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: 0.6rem 1.5rem;
    margin-bottom: 1rem;
}

/* Plain text. The grid already separates label from value, so the label
   needs no styling of its own, and the faded uppercase it had came out at
   3.1:1 against the background, under the 4.5:1 normal text wants. */
.legal-identity dt {
    color: inherit;
}

.legal-identity dd { margin: 0; }

@media screen and (max-width: 767px) {
    .legal-identity {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }
    .legal-identity dd { margin-bottom: 1rem; }
    .legal-copy h2 { margin-top: 2.25rem; }
}

/* The closing photograph on Nosotros spans the page. Without a width it drew
   at whatever the file happened to measure, so the page showed grey beside it
   on any screen wider than the image. */
.closing-image {
    display: block;
    width: 100%;
    height: auto;
}

.editorial-full .editorial-figure {
    aspect-ratio: 2 / 1;
}

@media screen and (max-width: 768px) {
    /* Gentler crop on narrow screens */
    .editorial-full .editorial-figure {
        aspect-ratio: 4 / 3;
    }
}

/* The collection closes on a single piece photographed end to end. The 4/3
   frame above would take 37% off its width on a phone and cut both arms off
   the sofa, so this one keeps the wide frame everywhere. Scoped to the one
   slot; the project pages keep the gentler crop. */
@media screen and (max-width: 768px) {
    .editorial-full--wide .editorial-figure {
        aspect-ratio: 2 / 1;
    }
}

/* ============================================================
   Collection — Masonry Grid
   Grid CSS below is the Osmo Supply "Masonry Grid" resource,
   used as-is. Site-specific overrides are grouped after it.
   ============================================================ */

.masonry-wrap {
  padding-bottom: 4em;
  padding-left: 2em;
  padding-right: 2em;
}

.masonry-list {
  grid-column-gap: var(--masonry-gap);
  grid-row-gap: var(--masonry-gap);
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: relative;
}

.masonry-item {
  width: calc(((100% - 1px)  - (var(--masonry-col)  - 1) * var(--masonry-gap)) / var(--masonry-col));
}

.masonry-item__visual {
  border-radius: 1.25em;
  width: 100%;
  overflow: hidden;
}

.masonry-item__visual.is--square {
  aspect-ratio: 1;
}

.masonry-item__visual.is--wide {
  aspect-ratio: 3 / 2;
}

.masonry-item__visual.is--tall {
  aspect-ratio: 2 / 3;
}

.masonry-item__visual-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

[data-masonry-list] {
  --masonry-col: 4;
  --masonry-gap: 1em;
}

@media screen and (max-width: 991px) {
  [data-masonry-list] {
    --masonry-col: 3;
    --masonry-gap: 1em;
  }
}

@media screen and (max-width: 767px) {
  /* The grid's side padding is 2em, and the em resolves against the wrap's
     own font-size, so on a phone it lands at 35px while the heading and the
     text above sit at 19px — the 1.2rem that .row.sixteen-c uses. Matching
     that value lines the grid up with the words, and keeps it lined up if
     the gutter ever changes. */
  .masonry-wrap {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }

  [data-masonry-list] {
    --masonry-col: 2;
    --masonry-gap: 0.5em;
  }
}

/* --- Site overrides / integration --- */

/* The site uses square corners throughout */
.masonry-item__visual {
  border-radius: 0;
}

/* Masonry items open the collection lightbox */
.masonry-item__visual[data-collection-trigger] {
  cursor: pointer;
}

.masonry-item__visual[data-collection-trigger] .masonry-item__visual-img {
  transition: transform 0.8s ease;
}

.masonry-item__visual[data-collection-trigger]:hover .masonry-item__visual-img {
  transform: scale(1.05);
}

.masonry-item__visual[data-collection-trigger]:focus-visible {
  outline: 1px solid var(--color-dark-gray);
  outline-offset: 3px;
}

/* Hidden source of the lightbox copy for each item */
.masonry-item__info {
  display: none;
}

/* Collection lightbox — the panel holds its size while you browse.

   The photographs in one product's gallery are not all the same shape, so
   sizing the image column from whatever picture happens to be loaded made
   the whole panel jump on every thumbnail click. Instead the column owns
   the proportion and the image is lifted out of the flow to fill it, which
   leaves the panel's size decided before any photograph arrives.

   Scoped to the collection lightbox: the team lightbox on nosotros.php
   shares this component but has photographs of one size, so it is left
   alone. */

[data-collection-lightbox] .profile-lightbox__image {
    aspect-ratio: 4 / 5;
}

/* The thumbnail strip sits inside this column too, so this addresses the
   main image by its own attribute rather than by tag. */
[data-collection-lightbox-image] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Both columns must be free to shrink inside the panel's max-height,
   or a long description would push the panel past it instead of
   scrolling within its own column. */
[data-collection-lightbox] .profile-lightbox__image,
[data-collection-lightbox] .profile-lightbox__content {
    min-height: 0;
}


/* Collection lightbox — thumbnail strip over the main image */

.collection-lightbox__thumbs {
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;          /* bounded, so a long strip shrinks instead of running out of the panel */
    bottom: 1.25rem;
    display: flex;
    gap: 0.5rem;
    z-index: 2;
}

.collection-lightbox__thumb {
    flex: 0 1 72px;          /* 72px where there is room, narrower where there is not */
    aspect-ratio: 1;
    min-width: 0;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    overflow: hidden;
    opacity: 0.6;
    outline: 1px solid transparent;
    outline-offset: -1px;
    transition: opacity 0.3s ease, outline-color 0.3s ease;
}

.collection-lightbox__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.collection-lightbox__thumb:hover {
    opacity: 1;
}

.collection-lightbox__thumb.is-active {
    opacity: 1;
    outline-color: var(--color-white);
}

@media screen and (max-width: 767px) {
    .collection-lightbox__thumbs {
        left: 0.75rem;
        bottom: 0.75rem;
        gap: 0.35rem;
    }

    .collection-lightbox__thumb {
        flex-basis: 52px;
    }
}

/* Banner CTA aligns with the headline instead of centring */
.coleccion .banner-main .double-cta {
    justify-content: flex-start;
}

/* ============================================================
   Espacio — Tab System
   Tab CSS below is the Osmo Supply "Tab System with Autoplay"
   resource, used as-is. Site-specific overrides follow after it.
   ============================================================ */

.tab-layout__wrap {
  z-index: 1;
  grid-row-gap: 3em;
  flex-flow: wrap;
  padding-left: 1em;
  padding-right: 1em;
  display: flex;
  position: relative;
}

.tab-layout__col {
  width: 50%;
  padding-left: .5em;
  padding-right: .5em;
}

.tab-content__inner {
  grid-column-gap: 3em;
  grid-row-gap: 3em;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  min-height: 100%;
  padding-top: 1em;
  padding-bottom: 0;
  padding-right: 2.5em;
  display: flex;
}

.tab-content__top {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.tab-heading {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3.5em;
  font-weight: 500;
  line-height: 1;
}

.tab-visual__wrap {
  aspect-ratio: 1.6;
  height: 50em;
  position: relative;
}

.tab-visual__item {
  visibility: hidden;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

.tab-visual__item.active {
  visibility: visible;
}

.tab-visual__inner {
  border: 1px solid #0003;
  border-radius: .5em;
  width: 100%;
  height: 100%;
  padding: .5em;
  overflow: hidden;
}

.tab-image {
  object-fit: cover;
  object-position: 0% 50%;
  border-radius: .25em;
  width: 100%;
  height: 100%;
  position: relative;
}

.tab-content__wrap {
  width: 100%;
  max-width: 36em;
  height: 100%;
  margin-left: auto;
  margin-right: 0;
}

.tab-content__bottom {
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  max-width: 30em;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  display: flex;
}

.tab-content__item {
  color: #131313;
  width: 100%;
  padding-top: 2em;
  padding-bottom: 2em;
  text-decoration: none;
  transition: opacity .25s;
  position: relative;
}

.tab-content__item-main {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.content-item__nr {
  color: #fff;
  background-color: #131313;
  border: 1px solid #131313;
  border-radius: 100em;
  justify-content: center;
  align-items: center;
  width: 2.5em;
  height: 2.5em;
  margin-top: .2em;
  font-family: RM Mono, Arial, sans-serif;
  font-size: .75em;
  font-weight: 400;
  transition: transform .4s cubic-bezier(.625, .05, 0, 1);
  display: flex;
}

.content-item__heading {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2em;
  font-weight: 500;
  line-height: 1;
}

.tab-content__item-detail {
  width: 100%;
  height: 0;
  padding-left: 4em;
  overflow: hidden;
}

.tab-description {
  margin-bottom: 0;
  font-size: 1em;
}

.tab-description__spacer {
  padding-top: 1em;
}

.tab-content__item-bottom {
  background-color: #0003;
  width: 100%;
  height: 1px;
  transition: background-color .2s;
  position: absolute;
  inset: auto 0% 0%;
}

.tab-progress {
  transform-origin: 0%;
  transform-style: preserve-3d;
  background-color: #ff4c24;
  width: 100%;
  height: 1px;
  transform: scale3d(0, 1, 1);
}

@media screen and (max-width: 991px) {
  .tab-layout__col {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .tab-content__inner {
    justify-content: space-between;
    align-items: stretch;
    padding: 0;
  }

  .tab-content__top {
    grid-column-gap: 1.5em;
    grid-row-gap: 1.5em;
  }

  .tab-visual__wrap {
    height: auto;
    padding-left: 0;
    padding-right: 0;
  }

  .tab-visual__item {
    overflow: hidden;
  }

  .tab-content__wrap {
    max-width: none;
    margin-left: 0;
  }
}

@media screen and (max-width: 767px) {
  .tab-layout__wrap {
    grid-row-gap: 2em;
  }

  .tab-heading {
    font-size: 2.8em;
  }

  .tab-visual__item {
    border-radius: .25em;
  }

  .tab-content__bottom {
    max-width: none;
  }

  .tab-content__item-main {
    grid-column-gap: 1.5em;
    grid-row-gap: 1.5em;
  }

  .content-item__nr {
    margin-top: -.2em;
  }

  .content-item__heading {
    font-size: 1.5em;
  }
}

@media screen and (max-width: 479px) {
  .tab-heading {
    font-size: 3em;
  }

  .tab-visual__inner {
    border-style: none;
    border-radius: .25em;
    padding: 0;
  }

  .tab-image {
    aspect-ratio: auto;
  }

  .tab-content__item {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
  }

  .tab-content__item-main {
    grid-column-gap: 1em;
    grid-row-gap: 1em;
  }

  .content-item__nr {
    flex: none;
  }

  .content-item__heading {
    font-size: 1.5em;
  }
}

/* --- Site overrides / integration --- */

/* No row gap between the intro copy and the tab list */
.tab-content__inner {
  grid-row-gap: 0em;
}

/* The tab-description spacers were removed from the markup, so the
   description sits flush inside the expanding detail area. */
.tab-description {
  margin-top: 0;
}

/* Site palette and square corners */
.tab-content__item {
  color: var(--color-dark-gray);
}

.tab-progress {
  background-color: var(--color-sage);
}

.tab-visual__inner {
  border: none;
  border-radius: 0;
  padding: 0;
}

.tab-image {
  border-radius: 0;
}

/* The resource derives the visual's width from a fixed height
   (50em x 1.6 = 1280px), which is wider than the 50% column here and
   overflows the page. Size it from the column instead. */
.tab-visual__wrap {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}

/* The visual sits in the left column on this layout, so the content
   column is flush left rather than pushed right */
.tab-content__wrap {
  margin-left: 0;
}

.tab-content__inner {
  padding-right: 0;
  padding-left: 2.5em;
}

/* Tab rows are buttons (no href, so no jump to top and no "#" left in
   the URL); reset the default button chrome. */
.tab-content__item {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  background: none;
  border: none;
  padding-left: 0;
  padding-right: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Tab rows use a thumbnail instead of the numbered circle */
.content-item__thumb {
  width: 88px;
  height: 60px;
  flex: none;
  overflow: hidden;
}

.content-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.tab-content__item.active .content-item__thumb img,
.tab-content__item:hover .content-item__thumb img {
  transform: scale(1.06);
}

/* Labels read as small caps, matching the rest of the site */
.content-item__heading {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  align-self: center;
}

.tab-content__item {
  opacity: 0.55;
}

.tab-content__item.active {
  opacity: 1;
}

/* The line under each tab separates it from the next, so the last tab
   doesn't need one. Kept transparent rather than removed so the progress
   bar still has its track if autoplay is ever switched back on. */
.tab-content__item:last-child .tab-content__item-bottom {
  background-color: transparent;
}

/* Indent the expanding copy to line up with the label */
.tab-content__item-detail {
  padding-left: calc(88px + 2em);
}

@media screen and (max-width: 991px) {
  .tab-content__inner {
    padding-left: 0;
  }

  .tab-visual__wrap {
    aspect-ratio: 3 / 2;
  }
}

@media screen and (max-width: 479px) {
  .content-item__thumb {
    width: 64px;
    height: 44px;
  }

  .tab-content__item-detail {
    padding-left: calc(64px + 1em);
  }
}

/* ============================================================
   Espacio — key facts grid
   ============================================================ */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.5rem;
}

.stat {
  border-top: 1px solid #d5d4d0;
  padding-top: 1.5rem;
}

.stat__value {
  display: block;
  font-family: var(--font-heading);
  font-size: 3.6rem;
  line-height: 1.1;
}

.stat__unit {
  font-size: 0.35em;
  letter-spacing: 1px;
  margin-left: 0.35rem;
}

.stat__label {
  display: block;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 3px;
}

@media screen and (max-width: 991px) {
  .stats-grid {
    gap: 2.5rem;
  }

  .stat__value {
    font-size: 3rem;
  }
}

@media screen and (max-width: 767px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    padding-left: 0;
    padding-right: 0;
  }

  .stat__value {
    font-size: 2.6rem;
  }
}


/* Page header grid — responsive.

   Scoped with .row.header-grid so these outrank the generic
   `header .c-span-8` rule in the 1366px block, which is meant for other
   section headers (index.php) and would otherwise re-span the intro
   paragraph now that <header> is itself the grid. */

/* Keep the intro aligned with the headline on tablet-horizontal. */
@media screen and (max-width: 1366px) {
    .row.header-grid > .c-span-8 {
        grid-column: span 8 / span 8;
    }
}

/* Below that the page grid collapses (16 -> 8 -> 1) and the c-start /
   c-span utilities have no override for every value, which would spill
   the header into implicit columns. Run everything full width instead. */
@media screen and (max-width: 1024px) {
    .row.header-grid > *,
    .row.header-grid > .c-span-8 {
        grid-column: 1 / -1;
    }
}

/* ============================================================
   Loader — Logo Reveal (index only)
   CSS below is the Osmo Supply "Logo Reveal Loader" resource,
   used as-is. Site-specific overrides follow after it.
   ============================================================ */

.loader {
  z-index: 100;
  color: #fff;
  width: 100%;
  height: 100dvh;
  position: fixed;
  inset: 0% 0% auto;
}

.loader__bg {
  background-color: #0a0a0a;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.loader__container {
  z-index: 2;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.loader__bg-bar {
  z-index: 1;
  transform-origin: 0%;
  transform-style: preserve-3d;
  background-color: #fff;
  width: 100%;
  height: .5em;
  position: absolute;
  inset: auto 0% 0%;
  transform: scale3d(0, 1, 1);
}

.loader__logo-wrap {
  justify-content: center;
  align-items: center;
  width: 12em;
  height: 3em;
  display: flex;
  position: relative;
}

.loader__logo-item {
  width: 100%;
  position: absolute;
}

.loader__logo-item.is--base {
  opacity: .2;
}

.loader__logo-item.is--top {
  -webkit-clip-path: inset(0% 100% 0% 0%);
  clip-path: inset(0% 100% 0% 0%);
}

.loader__logo-img {
  width: 100%;
  display: block;
}

.loader__text-wrap {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  bottom: 3.5em;
}

.loader__text-el {
  text-transform: uppercase;
  white-space: nowrap;
  margin-bottom: -.25em;
  padding-bottom: .25em;
  font-family: Haffer Mono, Arial, sans-serif;
  position: absolute;
}

[data-load-reset] { opacity: 0; }

/* --- Site overrides / integration --- */

/* Site palette: the footer's pairing — dark ground, cream mark.
   The resource's z-index of 100 sits under #main-header (999), so the
   nav showed through the loader; lift it above everything instead. */
.loader {
  color: var(--color-cream);
  z-index: 9999;
}

.loader__bg {
  background-color: var(--color-dark-gray);
}

.loader__bg-bar {
  background-color: var(--color-cream);
  height: 2px;
}

/* The mark is the header's text logo rather than an SVG, so the wrap is
   sized by the type: the base copy sets the box, the revealed copy sits
   exactly on top of it. */
.loader__logo-wrap {
  width: auto;
  height: auto;
}

.loader__logo-item.is--base {
  position: relative;
}

.loader__logo-item.is--top {
  position: absolute;
  inset: 0;
}

.loader__logo-text {
  /* inline-block so the box hugs the type and the © superscript,
     positioned off .logo, sits against the word rather than the edge */
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: clamp(1.6rem, 4.5vw, 3rem);
  line-height: 1.2;
  white-space: nowrap;
}