/* ==========================================================================
   Davios — palette and type pulled from the pitch deck
   ========================================================================== */

:root {
    --navy: #13213d;        /* Riviera Navy · night sea */
    --navy-deep: #0d172c;
    --aegean: #2f6fa3;      /* Aegean Blue · island doors */
    --terracotta: #b5532f;  /* Terracotta · rooftops */
    --sand: #d8c39b;        /* Sand Linen · beach and stone */
    --gold: #a8862b;        /* Riviera Gold · golden hour */
    --gold-light: #d9b864;
    --cream: #f2ede4;
    --ivory: #faf7f1;
    --ink: #1b2233;
    --muted: #6b6a66;

    --font-logo: 'Italiana', 'Bodoni Moda', serif;
    --font-display: 'Bodoni Moda', 'Didot', serif;
    --font-body: 'Jost', 'Futura', system-ui, sans-serif;

    --gutter: clamp(20px, 5vw, 72px);
    --ease: cubic-bezier(.2, .7, .2, 1);
}

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

/* --- Shared type ---------------------------------------------------------- */

.eyebrow {
    margin: 0 0 18px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--terracotta);
}

.display {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(36px, 6vw, 76px);
    line-height: 1.05;
    letter-spacing: -.01em;
}

.lede {
    margin: 22px 0 0;
    max-width: 30ch;
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(19px, 2vw, 24px);
    line-height: 1.45;
}

.section {
    padding: clamp(96px, 16vh, 180px) var(--gutter);
}

.section--navy { background: var(--navy); color: var(--ivory); }
.section--navy .eyebrow { color: var(--gold-light); }
.section--ivory { background: var(--ivory); }

.wrap { max-width: 1180px; margin: 0 auto; }

/* --- Nav ------------------------------------------------------------------ */

.nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px var(--gutter);
    color: var(--ivory);
    transition: background .5s var(--ease), color .5s var(--ease), padding .5s var(--ease);
}

.nav__mark {
    font-family: var(--font-logo);
    font-size: 22px;
    letter-spacing: .3em;
    text-decoration: none;
    opacity: 0;
    transition: opacity .5s var(--ease);
}

.nav__link {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px 0;
    border-bottom: 1px solid currentColor;
}

.nav.is-solid,
.nav--page {
    background: rgba(242, 237, 228, .92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--navy);
    padding-top: 14px;
    padding-bottom: 14px;
}

.nav.is-solid .nav__mark,
.nav--page .nav__mark { opacity: 1; }

/* --- Hero ----------------------------------------------------------------- */

.hero {
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 560px;
    overflow: hidden;
    background: #b98a55;
    color: var(--ivory);
}

.hero__bg,
.hero__fg {
    position: absolute;
    top: 0;
    height: 100%;
    object-fit: cover;
}

/* Wide screens: the portrait clip sits sharp in the middle, a blurred copy
   of the same footage fills the sides, and soft masks blend the two. */
.hero__bg {
    left: 0;
    width: 100%;
    filter: blur(28px) saturate(1.1);
    transform: scale(1.15);
}

.hero__fg {
    left: 50%;
    width: calc(100svh * 478 / 850);
    min-width: calc(560px * 478 / 850);
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

/* Portrait screens: the clip already fits, so it simply fills the frame. */
@media (max-aspect-ratio: 4/5) {
    .hero__bg { display: none; }
    .hero__fg {
        left: 0;
        width: 100%;
        min-width: 0;
        transform: none;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

.hero__shade {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, rgba(19, 33, 61, .18), rgba(19, 33, 61, 0) 60%),
        linear-gradient(180deg, rgba(19, 33, 61, .25) 0%, rgba(19, 33, 61, 0) 30%, rgba(19, 33, 61, 0) 65%, rgba(19, 33, 61, .45) 100%);
}

.hero__content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
}

.hero__content .eyebrow { color: var(--ivory); opacity: .9; }

.logo {
    margin: 0;
    font-family: var(--font-logo);
    font-weight: 400;
    font-size: clamp(64px, 15vw, 210px);
    line-height: .9;
    letter-spacing: .14em;
    margin-right: -.14em; /* balance trailing letter-spacing */
    text-transform: uppercase;
    text-shadow: 0 2px 40px rgba(60, 30, 10, .25);
}

.hero__tagline {
    margin: 26px 0 0;
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(17px, 2vw, 22px);
    max-width: 28ch;
}

.hero__cue {
    position: absolute;
    left: 50%;
    bottom: 28px;
    z-index: 1;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    letter-spacing: .3em;
    text-transform: uppercase;
    text-decoration: none;
}

.hero__cue::after {
    content: '';
    width: 1px;
    height: 44px;
    background: currentColor;
    animation: cue 2.4s var(--ease) infinite;
    transform-origin: top;
}

@keyframes cue {
    0% { transform: scaleY(0); opacity: 1; }
    60% { transform: scaleY(1); opacity: 1; }
    100% { transform: scaleY(1); opacity: 0; }
}

/* Hero entrance */
.hero .eyebrow, .logo, .hero__tagline {
    animation: rise 1.6s var(--ease) both;
}
.logo { animation-delay: .15s; }
.hero__tagline { animation-delay: .45s; }

@keyframes rise {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: none; }
}

/* --- Mosaic strip (deck tile border) -------------------------------------- */

.mosaic {
    height: 14px;
    background: repeating-linear-gradient(90deg,
        var(--ivory) 0 28px, var(--terracotta) 28px 56px, var(--sand) 56px 84px,
        var(--aegean) 84px 112px, var(--ivory) 112px 140px, var(--gold) 140px 168px,
        var(--sand) 168px 196px);
}

/* --- The name ------------------------------------------------------------- */

.name { text-align: center; }

.name__morph {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 4vw, 48px);
    font-family: var(--font-display);
    font-size: clamp(48px, 10vw, 128px);
    line-height: 1;
    /* Pin the optical size: browsers map font-size to opsz differently,
       which shifted the letter spacing between platforms. */
    font-optical-sizing: none;
    font-variation-settings: 'opsz' 96;
}

.name__from { color: #8892a6; }
.name__to { color: var(--navy); }

.name__arrow {
    flex: none;
    fill: none;
    stroke: var(--gold);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
}

.name__arrow path { vector-effect: non-scaling-stroke; }

.name__arrow--across { width: clamp(48px, 8vw, 110px); height: auto; aspect-ratio: 120 / 20; }
.name__arrow--down { display: none; width: 18px; height: 56px; }

.name__from,
.name__to { white-space: nowrap; }

.name .lede {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance;
}

/* --- Feeling (full-bleed photo) ------------------------------------------- */

.feeling {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    padding: clamp(80px, 14vh, 140px) var(--gutter);
    color: var(--ivory);
    overflow: hidden;
}

.feeling__img {
    position: absolute;
    inset: -10% 0;
    width: 100%;
    height: 120%;
    object-fit: cover;
    will-change: transform;
}

.feeling::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(13, 23, 44, 0) 30%, rgba(13, 23, 44, .75) 100%);
}

.feeling__text { position: relative; z-index: 2; }
.feeling .eyebrow { color: var(--gold-light); }

.feeling .display { font-size: clamp(48px, 9vw, 120px); line-height: .98; }

/* --- Inspiration ---------------------------------------------------------- */

.trio {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(20px, 2.6vw, 36px);
    margin-top: clamp(48px, 8vh, 80px);
}

.trio__item { display: flex; flex-direction: column; }

.trio__item h3 {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(24px, 2.4vw, 30px);
}

.trio__item p { margin: 0; color: var(--muted); }

.trio__item .eyebrow { margin-bottom: 12px; }

.trio__img {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    margin-bottom: 22px;
    border-bottom: 2px solid var(--gold);
}

.trio__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.6s var(--ease);
}

.trio__item:hover .trio__img img { transform: scale(1.04); }

.trio__link {
    display: inline-block;
    margin-top: 14px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--aegean);
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    align-self: flex-start;
}

/* --- Product crops ------------------------------------------------------ */

/* Three prints stacked down the page, alternating sides, with corners just
   touching. Each fades in on its own as it scrolls into view. */
.crops {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    margin-top: clamp(48px, 8vh, 80px);
}

.shot { position: relative; margin: 0; }

.shot:nth-child(1) { grid-column: 1 / span 8; grid-row: 1; z-index: 3; }
.shot:nth-child(2) { grid-column: 5 / span 8; grid-row: 2; z-index: 2; margin-top: -3%; }
.shot:nth-child(3) { grid-column: 2 / span 8; grid-row: 3; z-index: 1; margin-top: -3%; }

.shot.reveal {
    transform: translateY(60px) scale(.97);
    transition: opacity 2s var(--ease), transform 2.2s var(--ease);
    transition-delay: 0s;
}

.shot.reveal.is-in { transform: none; }

.shot__frame {
    overflow: hidden;
    aspect-ratio: 1623 / 1140;
    box-shadow: 0 24px 60px rgba(5, 10, 22, .45), 0 4px 14px rgba(5, 10, 22, .3);
}

.shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.6s var(--ease);
}

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

/* --- Craft pillars -------------------------------------------------------- */

.craft { padding-top: clamp(72px, 12vh, 120px); padding-bottom: clamp(72px, 12vh, 120px); }

.pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.pillars li { padding: 8px clamp(16px, 3vw, 40px); }
.pillars li + li { border-left: 1px solid rgba(168, 134, 43, .45); }

.pillars__num {
    display: block;
    margin-bottom: 14px;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 18px;
    color: var(--gold);
}

.pillars h3 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.15;
    color: var(--navy);
}

/* --- Closing -------------------------------------------------------------- */

.closing {
    position: relative;
    min-height: 90vh;
    display: grid;
    place-items: center;
    text-align: center;
    padding: clamp(96px, 16vh, 160px) var(--gutter);
    color: var(--ivory);
    overflow: hidden;
}

.closing__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.closing::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(13, 23, 44, .55), rgba(13, 23, 44, .72));
}

.closing__text { position: relative; z-index: 2; }

.closing .display {
    font-style: italic;
    text-shadow: 0 2px 30px rgba(13, 23, 44, .5);
    color: var(--gold-light);
}

.closing p { margin: 18px auto 0; max-width: 34ch; }

.button {
    display: inline-block;
    margin-top: 40px;
    padding: 18px 40px;
    border: 1px solid currentColor;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .3em;
    text-transform: uppercase;
    text-decoration: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}

.button:hover,
.button:focus-visible {
    background: var(--ivory);
    color: var(--navy);
    border-color: var(--ivory);
}

.button--solid {
    background: var(--navy);
    color: var(--ivory);
    border-color: var(--navy);
}

.button--solid:hover,
.button--solid:focus-visible {
    background: var(--terracotta);
    border-color: var(--terracotta);
    color: var(--ivory);
}

/* --- Footer --------------------------------------------------------------- */

.footer {
    background: var(--navy-deep);
    color: var(--ivory);
    padding: clamp(56px, 10vh, 96px) var(--gutter) 32px;
    text-align: center;
}

.footer__mark {
    font-family: var(--font-logo);
    font-size: clamp(36px, 6vw, 56px);
    letter-spacing: .3em;
    margin-right: -.3em;
    text-transform: uppercase;
}

.social {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin: 36px 0 0;
    padding: 0;
    list-style: none;
}

.social a {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(250, 247, 241, .3);
    border-radius: 50%;
    transition: background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}

.social a:hover,
.social a:focus-visible {
    background: var(--gold);
    border-color: var(--gold);
}

.social svg { width: 22px; height: 22px; }

.footer__meta {
    margin-top: 56px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 24px;
    font-size: 12px;
    letter-spacing: .08em;
    color: rgba(250, 247, 241, .5);
}

.footer__meta a { text-decoration: none; border-bottom: 1px solid rgba(250, 247, 241, .25); }

.credits {
    max-width: 760px;
    margin: 18px auto 0;
    font-size: 11px;
    line-height: 1.7;
    color: rgba(250, 247, 241, .45);
}

.credits summary { cursor: pointer; letter-spacing: .08em; }
.credits p { margin: 10px 0 0; }

/* --- Inquire page --------------------------------------------------------- */

.inquire {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}

.inquire__img {
    position: relative;
    overflow: hidden;
    background: var(--navy);
}

.inquire__img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inquire__panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(120px, 16vh, 160px) var(--gutter) clamp(64px, 10vh, 96px);
    background: var(--ivory);
}

.inquire__panel .display { font-size: clamp(40px, 5vw, 64px); }

.form {
    margin-top: 44px;
    display: grid;
    gap: 30px;
    max-width: 520px;
}

.field label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--muted);
}

.field input,
.field textarea {
    width: 100%;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid rgba(27, 34, 51, .3);
    border-radius: 0;
    background: transparent;
    font: inherit;
    font-size: 18px;
    color: var(--ink);
    transition: border-color .3s var(--ease);
}

.field textarea {
    min-height: 150px;
    resize: vertical;
    padding: 14px;
    border: 1px solid rgba(27, 34, 51, .3);
    margin-top: 4px;
}

.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--gold);
}

.field input:focus { box-shadow: 0 1px 0 0 var(--gold); }
.field textarea:focus { box-shadow: 0 0 0 1px var(--gold); }

.form .button { margin-top: 6px; justify-self: start; }
.form .button[disabled] { opacity: .6; cursor: wait; }

.form__status {
    margin: 0;
    min-height: 1.6em;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 19px;
}

.form__status.is-error { color: var(--terracotta); }

.inquire__aside {
    margin-top: 48px;
    font-size: 14px;
    color: var(--muted);
}

.hp { position: absolute; left: -9999px; }

/* --- Scroll reveal -------------------------------------------------------- */

.reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
    transition-delay: var(--d, 0s);
}

.reveal.is-in { opacity: 1; transform: none; }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
    .trio { grid-template-columns: 1fr 1fr; row-gap: 48px; }
    .inquire { grid-template-columns: 1fr; }

    .inquire__img { min-height: 42vh; }
    .inquire__panel { padding-top: 64px; }
}

@media (max-width: 560px) {
    body { font-size: 16px; }
    .shot:nth-child(1) { grid-column: 1 / span 11; }
    .shot:nth-child(2) { grid-column: 2 / span 11; }
    .shot:nth-child(3) { grid-column: 1 / span 11; }
    .trio { grid-template-columns: 1fr; }
    .pillars { grid-template-columns: 1fr; }
    .pillars li { padding: 28px 0; }
    .pillars li + li { border-left: 0; border-top: 1px solid rgba(168, 134, 43, .45); }
    .name__morph { flex-direction: column; gap: 14px; }
    .name__arrow--across { display: none; }
    .name__arrow--down { display: block; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal, .shot.reveal { opacity: 1; transform: none; transition: none; }
    .hero .eyebrow, .logo, .hero__tagline, .hero__cue::after { animation: none; }
    .feeling__img { transform: none !important; }
}