/* =========================================================
   FROST STUDIO — Marketing & Photography
   warm limestone, ink, cinnabar
   ========================================================= */

:root {
    /* Surface */
    --limestone: oklch(0.964 0.012 72);
    --limestone-2: oklch(0.935 0.017 70);
    --limestone-3: oklch(0.89 0.02 68);

    /* Ink */
    --ink: oklch(0.205 0.015 50);
    --ink-soft: oklch(0.42 0.012 50);
    --ink-quiet: oklch(0.585 0.01 55);

    /* Marks */
    --line: oklch(0.86 0.012 65);
    --line-soft: oklch(0.91 0.01 70);

    /* Accent — deeper cinnabar, push more saturation than original terracotta */
    --terracotta: oklch(0.585 0.165 32);
    --terracotta-2: oklch(0.46 0.15 32);
    --ochre: oklch(0.76 0.13 80);

    /* Type */
    --serif: "Fraunces", "Cormorant Garamond", Georgia, serif;
    --sans:
        "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* Rhythm */
    --pad: clamp(1.25rem, 4vw, 4rem);
    --max: 1480px;
    --gap: clamp(1.5rem, 3vw, 3rem);

    /* Motion */
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
*::selection {
    background: var(--terracotta);
    color: var(--limestone);
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--limestone);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.55;
    font-feature-settings: "ss01", "cv11", "kern";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img,
video,
iframe {
    max-width: 100%;
    display: block;
}
a {
    color: inherit;
    text-decoration: none;
}
button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}
input,
textarea,
select {
    font: inherit;
    color: inherit;
}

/* =========================================================
   Type system
   ========================================================= */

.eyebrow {
    font-family: var(--mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-quiet);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.eyebrow .num {
    color: var(--terracotta);
}
.eyebrow::before {
    content: "";
    width: 18px;
    height: 1px;
    background: currentColor;
    opacity: 0.4;
}

.display {
    font-family: var(--serif);
    font-weight: 350;
    font-style: normal;
    font-variation-settings:
        "opsz" 144,
        "SOFT" 50;
    font-size: clamp(2.75rem, 8vw, 7.25rem);
    line-height: 0.94;
    letter-spacing: -0.028em;
    color: var(--ink);
    text-wrap: balance;
}
.display .it {
    font-style: italic;
    font-weight: 300;
}
.display .ink {
    color: var(--terracotta);
    font-style: italic;
    font-weight: 300;
}

.display-mid {
    font-family: var(--serif);
    font-weight: 350;
    font-variation-settings: "opsz" 96;
    font-size: clamp(2rem, 4.6vw, 3.75rem);
    line-height: 1.12;
    letter-spacing: -0.022em;
    text-wrap: balance;
}
.display-mid .it {
    font-style: italic;
    font-weight: 300;
}

.heading {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
}

.lede {
    font-family: var(--serif);
    font-weight: 350;
    font-style: italic;
    font-size: clamp(1.25rem, 1.8vw, 1.625rem);
    line-height: 1.4;
    color: var(--ink-soft);
    max-width: 38ch;
    text-wrap: pretty;
}

p {
    max-width: 68ch;
}
p + p {
    margin-top: 1em;
}

/* =========================================================
   Layout primitives
   ========================================================= */

.shell {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--pad);
}

.section {
    padding: clamp(4rem, 9vw, 8rem) 0;
}
.section--tight {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gap);
}

.span-12 {
    grid-column: span 12;
}
.span-8 {
    grid-column: span 12;
}
.span-7 {
    grid-column: span 12;
}
.span-6 {
    grid-column: span 12;
}
.span-5 {
    grid-column: span 12;
}
.span-4 {
    grid-column: span 12;
}
.span-3 {
    grid-column: span 12;
}

@media (min-width: 768px) {
    .span-8 {
        grid-column: span 8;
    }
    .span-7 {
        grid-column: span 7;
    }
    .span-6 {
        grid-column: span 6;
    }
    .span-5 {
        grid-column: span 5;
    }
    .span-4 {
        grid-column: span 6;
    }
    .span-3 {
        grid-column: span 6;
    }
}
@media (min-width: 1024px) {
    .span-4 {
        grid-column: span 4;
    }
    .span-3 {
        grid-column: span 3;
    }
}

.divider {
    height: 1px;
    background: var(--line);
    border: 0;
    margin: 0;
}

/* =========================================================
   Header / nav
   ========================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in oklch, var(--limestone) 88%, transparent);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid transparent;
    transition:
        border-color 350ms var(--ease-out-quart),
        transform 500ms var(--ease-out-quart),
        background 300ms var(--ease-out-quart);
    will-change: transform;
}
.site-header[data-scrolled="true"] {
    border-bottom-color: var(--line);
}
.site-header[data-hidden="true"] {
    transform: translateY(-110%);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.125rem var(--pad);
    max-width: var(--max);
    margin: 0 auto;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--mono);
    font-size: 0.8125rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
}
.brand .mark {
    width: 11px;
    height: 11px;
    background: var(--terracotta);
    display: inline-block;
    border-radius: 50%;
    position: relative;
}
.brand .mark::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 1px solid var(--terracotta);
    border-radius: 50%;
    opacity: 0.35;
}
.brand small {
    font-size: 0.6875rem;
    color: var(--ink-quiet);
    letter-spacing: 0.16em;
}

.nav-list {
    display: none;
    gap: 1.875rem;
    list-style: none;
    align-items: center;
}
@media (min-width: 980px) {
    .nav-list {
        display: flex;
    }
}

.nav-list a {
    font-size: 0.875rem;
    position: relative;
    padding: 0.25rem 0;
    color: var(--ink-soft);
    transition: color 300ms var(--ease-out-quart);
}
.nav-list a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 1px;
    width: 100%;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 500ms var(--ease-out-quart);
}
.nav-list a:hover {
    color: var(--ink);
}
.nav-list a:hover::after {
    transform: scaleX(1);
}
.nav-list a[aria-current="page"] {
    color: var(--terracotta);
}
.nav-list a[aria-current="page"]::after {
    transform: scaleX(1);
    background: var(--terracotta);
}

.nav-cta {
    display: none;
    margin-left: 0.5rem;
}
@media (min-width: 980px) {
    .nav-cta {
        display: inline-flex;
    }
}

.menu-toggle {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    padding: 0.5rem;
    margin-right: -0.5rem;
}
.menu-toggle span {
    display: block;
    width: 22px;
    height: 1px;
    background: var(--ink);
    transition:
        transform 350ms var(--ease-out-quart),
        opacity 200ms ease;
}
@media (min-width: 980px) {
    .menu-toggle {
        display: none;
    }
}

body[data-menu="open"] .menu-toggle span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
body[data-menu="open"] .menu-toggle span:nth-child(2) {
    opacity: 0;
}
body[data-menu="open"] .menu-toggle span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: var(--limestone);
    padding: 6rem var(--pad) 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-1rem);
    transition:
        opacity 400ms var(--ease-out-quart),
        transform 500ms var(--ease-out-quart);
}
body[data-menu="open"] .menu-overlay {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.menu-overlay ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.menu-overlay a {
    font-family: var(--serif);
    font-size: clamp(2rem, 8vw, 3rem);
    font-weight: 350;
    letter-spacing: -0.02em;
    display: inline-block;
    padding: 0.25rem 0;
}
.menu-overlay a[aria-current="page"] {
    color: var(--terracotta);
    font-style: italic;
}
.menu-overlay .meta {
    color: var(--ink-quiet);
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* =========================================================
   Hero — photography-forward editorial
   ========================================================= */

.hero {
    position: relative;
    padding: clamp(2rem, 5vw, 4rem) var(--pad) clamp(2rem, 5vw, 4rem);
    max-width: var(--max);
    margin: 0 auto;
    isolation: isolate;
}

.hero-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(1rem, 2vw, 2rem);
    align-items: end;
    min-height: calc(100vh - 180px);
}

.hero-title {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2.5vw, 2rem);
    padding: clamp(2rem, 5vw, 4rem) 0 0;
    position: relative;
}
@media (min-width: 980px) {
    .hero-title {
        grid-column: 1 / span 7;
        padding-bottom: 1rem;
    }
}

.hero-title .display {
    font-size: clamp(3rem, 9.5vw, 8rem);
    margin-top: 0.5rem;
}

.hero-frame {
    grid-column: 1 / -1;
    position: relative;
    aspect-ratio: 4/5;
    overflow: hidden;
    background: var(--limestone-3);
    border: 1px solid var(--line);
}
@media (min-width: 980px) {
    .hero-frame {
        grid-column: 8 / span 5;
        aspect-ratio: 3/4.2;
    }
}
.hero-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(92%) contrast(102%);
    transition:
        transform 1200ms var(--ease-out-expo),
        filter 800ms var(--ease-out-quart);
}
.hero-frame:hover img {
    filter: saturate(108%) contrast(105%);
}
.hero-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 26% 32% at var(--mx, 50%) var(--my, 50%),
        rgba(255, 230, 200, 0.22),
        rgba(255, 230, 200, 0) 60%
    );
    mix-blend-mode: screen;
    pointer-events: none;
    opacity: 0;
    transition: opacity 700ms var(--ease-out-quart);
    z-index: 1;
}
.hero-frame:hover::after {
    opacity: 1;
}

.hero-frame .frame-tag {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--limestone);
    background: color-mix(in oklch, var(--ink) 75%, transparent);
    padding: 0.4rem 0.625rem;
    z-index: 2;
}

.hero-meta {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gap);
    align-items: end;
    margin-top: clamp(1.5rem, 3vw, 2rem);
    padding-top: clamp(1.25rem, 2vw, 1.5rem);
    border-top: 1px solid var(--line);
}
.hero-meta .col-a {
    grid-column: 1 / -1;
}
.hero-meta .col-b {
    grid-column: 1 / -1;
}
.hero-meta .col-c {
    grid-column: 1 / -1;
}
@media (min-width: 768px) {
    .hero-meta .col-a {
        grid-column: 1 / span 4;
    }
    .hero-meta .col-b {
        grid-column: 5 / span 5;
    }
    .hero-meta .col-c {
        grid-column: 10 / span 3;
        text-align: right;
    }
}

/* =========================================================
   Marquee — service ribbon
   ========================================================= */

.marquee {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--limestone-2);
    overflow: hidden;
    --marquee-duration: 20s;
}
.marquee-track {
    display: flex;
    width: max-content;
    padding: 1rem 0;
    white-space: nowrap;
    animation: marquee-scroll var(--marquee-duration) linear infinite;
    will-change: transform;
}
.marquee:hover .marquee-track {
    animation-play-state: paused;
}
.marquee-item {
    font-family: var(--serif);
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    font-style: italic;
    font-weight: 300;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 3rem;
    padding-right: 3rem;
    letter-spacing: -0.02em;
}
.marquee-item .dot {
    width: 8px;
    height: 8px;
    background: var(--terracotta);
    border-radius: 50%;
    display: inline-block;
}
@keyframes marquee-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}
@media (prefers-reduced-motion: reduce) {
    .marquee-track {
        animation: none;
    }
}

/* =========================================================
   Section headers + numbered eyebrow
   ========================================================= */

.section-head {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gap);
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
    align-items: end;
}
.section-head .lhs {
    grid-column: 1 / -1;
}
.section-head .rhs {
    grid-column: 1 / -1;
}
@media (min-width: 768px) {
    .section-head .lhs {
        grid-column: 1 / span 7;
    }
    .section-head .rhs {
        grid-column: 8 / span 5;
        text-align: right;
    }
}

/* =========================================================
   Services grid (Marketing & Photography)
   ========================================================= */

.services {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid var(--line);
}
@media (min-width: 768px) {
    .services {
        grid-template-columns: 1fr 1fr;
    }
}
@media (min-width: 1100px) {
    .services {
        grid-template-columns: repeat(4, 1fr);
    }
}

.service {
    padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2vw, 2rem);
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    transition: background 400ms var(--ease-out-quart);
    min-height: 22rem;
}
@media (min-width: 768px) {
    .service:nth-child(odd) {
        border-right: 1px solid var(--line);
    }
}
@media (min-width: 1100px) {
    .service {
        border-right: 1px solid var(--line);
        border-bottom: 0;
    }
    .service:last-child {
        border-right: 0;
    }
    .service:nth-child(odd) {
        border-right: 1px solid var(--line);
    }
}
.service:hover {
    background: color-mix(in oklch, var(--limestone-2) 80%, transparent);
}
.service .num {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--ink-quiet);
    letter-spacing: 0.18em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.service .num b {
    color: var(--terracotta);
    font-weight: 500;
}
.service .name {
    font-family: var(--serif);
    font-size: clamp(1.5rem, 2.2vw, 1.875rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.05;
}
.service .name em {
    font-weight: 300;
}
.service ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--line-soft);
}
.service li {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-quiet);
    display: flex;
    gap: 0.5rem;
}
.service li::before {
    content: "+";
    color: var(--terracotta);
}
.service .summary {
    color: var(--ink-soft);
    font-size: 0.9375rem;
}

/* =========================================================
   Featured projects strip (work)
   ========================================================= */

.project {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gap);
    padding: clamp(2rem, 4vw, 3rem) 0;
    border-top: 1px solid var(--line);
}
.project:last-child {
    border-bottom: 1px solid var(--line);
}

.project-img {
    grid-column: span 12;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--limestone-3);
    position: relative;
}
.project-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 800ms var(--ease-out-expo),
        filter 600ms var(--ease-out-quart);
    filter: saturate(88%);
}
.project:hover .project-img img {
    transform: scale(1.04);
    filter: saturate(108%);
}

.project-img .tag {
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--limestone);
    background: color-mix(in oklch, var(--ink) 78%, transparent);
    padding: 0.375rem 0.625rem;
}

.project-meta {
    grid-column: span 12;
}
.project-meta .heading {
    margin-top: 0.75rem;
}
.project-meta .lede {
    margin-top: 0.75rem;
}
.project-meta .where {
    margin-top: 1.5rem;
    color: var(--ink-quiet);
    font-size: 0.8125rem;
    font-family: var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

@media (min-width: 768px) {
    .project {
        grid-template-columns: repeat(12, 1fr);
        align-items: end;
        gap: clamp(2rem, 4vw, 4rem);
    }
    .project-img {
        grid-column: span 7;
    }
    .project-meta {
        grid-column: span 5;
        padding-bottom: 0.5rem;
    }
    .project:nth-child(even) .project-img {
        grid-column: 6 / span 7;
        order: 2;
    }
    .project:nth-child(even) .project-meta {
        grid-column: 1 / span 5;
        order: 1;
    }
}

/* =========================================================
   Stats strip
   ========================================================= */

.stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
@media (min-width: 768px) {
    .stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

.stat {
    padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.5rem);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.stat:last-child {
    border-right: 0;
}
@media (max-width: 767px) {
    .stat:nth-child(2n) {
        border-right: 0;
    }
    .stat:nth-child(-n + 2) {
        border-bottom: 1px solid var(--line);
    }
}
.stat .figure {
    font-family: var(--serif);
    font-weight: 350;
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1;
    letter-spacing: -0.025em;
}
.stat .figure .it {
    font-style: italic;
    font-weight: 300;
    color: var(--terracotta);
}
.stat .label {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-quiet);
}

/* =========================================================
   Image collage / gallery
   ========================================================= */

.collage {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gap);
}
.collage > figure {
    background: var(--limestone-3);
    border: 1px solid var(--line);
    overflow: hidden;
    position: relative;
    grid-column: span 12;
    aspect-ratio: 4/3;
}
.collage figcaption {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--limestone);
    background: color-mix(in oklch, var(--ink) 78%, transparent);
    padding: 0.375rem 0.625rem;
}
.collage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 1000ms var(--ease-out-expo),
        filter 600ms var(--ease-out-quart);
    filter: saturate(88%);
}
.collage > figure:hover img {
    transform: scale(1.03);
    filter: saturate(108%);
}

@media (min-width: 768px) {
    .collage > figure.size-tall {
        grid-column: span 4;
        aspect-ratio: 3/4.2;
    }
    .collage > figure.size-wide {
        grid-column: span 8;
        aspect-ratio: 16/10;
    }
    .collage > figure.size-square {
        grid-column: span 6;
        aspect-ratio: 1/1;
    }
    .collage > figure.size-half {
        grid-column: span 6;
        aspect-ratio: 4/3;
    }
    .collage > figure.size-third {
        grid-column: span 4;
        aspect-ratio: 4/5;
    }
    .collage > figure.size-hero {
        grid-column: span 12;
        aspect-ratio: 21/9;
    }
}

/* =========================================================
   Testimonial / pull quote
   ========================================================= */

.pullquote {
    font-family: var(--serif);
    font-weight: 350;
    font-size: clamp(1.75rem, 3.5vw, 2.875rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-wrap: balance;
}
.pullquote .it {
    font-style: italic;
    font-weight: 300;
}
.pullquote::before {
    content: "“";
    font-family: var(--serif);
    font-size: 3em;
    line-height: 0.4;
    color: var(--terracotta);
    display: block;
    margin-bottom: 0.4em;
    font-style: italic;
}
.pullquote-attr {
    margin-top: 1.5rem;
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-quiet);
}
.pullquote-attr b {
    color: var(--ink);
    font-weight: 500;
}

/* =========================================================
   Logo strip — clients
   ========================================================= */

.logos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
@media (min-width: 768px) {
    .logos {
        grid-template-columns: repeat(6, 1fr);
    }
}
.logos .logo {
    padding: 1.5rem 1rem;
    border-right: 1px solid var(--line);
    display: grid;
    place-items: center;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.125rem, 1.6vw, 1.375rem);
    color: var(--ink-soft);
    letter-spacing: -0.01em;
    transition:
        color 350ms var(--ease-out-quart),
        background 400ms var(--ease-out-quart);
}
.logos .logo:last-child {
    border-right: 0;
}
@media (max-width: 767px) {
    .logos .logo:nth-child(2n) {
        border-right: 0;
    }
    .logos .logo:nth-child(-n + 4) {
        border-bottom: 1px solid var(--line);
    }
}
.logos .logo:hover {
    color: var(--ink);
    background: color-mix(in oklch, var(--limestone-2) 80%, transparent);
}

/* =========================================================
   Process steps
   ========================================================= */

.process {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line);
}
.process .step {
    display: grid;
    grid-template-columns: 4rem 1fr;
    gap: 1.5rem;
    padding: clamp(1.5rem, 3vw, 2.25rem) 0;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
    transition:
        background 400ms var(--ease-out-quart),
        padding-left 500ms var(--ease-out-quart);
    padding-left: 0;
}
.process .step:hover {
    padding-left: 1rem;
    background: color-mix(in oklch, var(--limestone-2) 60%, transparent);
}
.process .step .num {
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    color: var(--terracotta);
}
.process .step .body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 768px) {
    .process .step .body {
        grid-template-columns: 14rem 1fr;
        gap: 2rem;
        align-items: baseline;
    }
}
.process .step h3 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
}
.process .step p {
    color: var(--ink-soft);
}

/* =========================================================
   Packages / tiers
   ========================================================= */

.tiers {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--line);
}
@media (min-width: 980px) {
    .tiers {
        grid-template-columns: repeat(3, 1fr);
    }
}

.tier {
    padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: relative;
    transition:
        background 400ms var(--ease-out-quart),
        transform 600ms var(--ease-out-quart),
        box-shadow 600ms var(--ease-out-quart);
    will-change: transform;
}
@media (min-width: 980px) {
    .tier {
        border-bottom: 0;
        border-right: 1px solid var(--line);
    }
    .tier:last-child {
        border-right: 0;
    }
    .tier:hover {
        transform: translateY(-6px);
        box-shadow: 0 24px 60px -28px
            color-mix(in oklch, var(--ink) 55%, transparent);
        z-index: 1;
    }
}
.tier:hover {
    background: color-mix(in oklch, var(--limestone-2) 70%, transparent);
}

.tier .num {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--ink-quiet);
    letter-spacing: 0.18em;
}
.tier .name {
    font-family: var(--serif);
    font-size: clamp(1.75rem, 2.5vw, 2.25rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.05;
}
.tier .name em {
    font-weight: 300;
}
.tier .price {
    font-family: var(--mono);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
}
.tier .price b {
    color: var(--ink);
    font-weight: 500;
}
.tier .summary {
    color: var(--ink-soft);
}
.tier ul {
    list-style: none;
    border-top: 1px solid var(--line-soft);
    padding-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.tier li {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: var(--ink-soft);
    align-items: baseline;
}
.tier li::before {
    content: "—";
    color: var(--terracotta);
    font-family: var(--mono);
}

.tier--featured {
    background: var(--ink);
    color: var(--limestone);
}
.tier--featured .num {
    color: color-mix(in oklch, var(--limestone) 60%, transparent);
}
.tier--featured .name,
.tier--featured .price b {
    color: var(--limestone);
}
.tier--featured .summary,
.tier--featured li {
    color: color-mix(in oklch, var(--limestone) 78%, transparent);
}
.tier--featured ul {
    border-top-color: color-mix(in oklch, var(--limestone) 18%, transparent);
}
.tier--featured:hover {
    background: oklch(0.18 0.014 50);
    box-shadow: 0 24px 70px -22px
        color-mix(in oklch, var(--ink) 80%, transparent);
}
.tier--featured .badge {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--terracotta);
    border: 1px solid var(--terracotta);
    padding: 0.25rem 0.5rem;
}

/* =========================================================
   Buttons / links
   ========================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.25rem;
    border: 1px solid var(--ink);
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    transition:
        color 300ms var(--ease-out-quart),
        transform 700ms var(--ease-out-expo),
        border-color 400ms var(--ease-out-quart);
    isolation: isolate;
    will-change: transform;
    background: transparent;
}
.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ink);
    transform: translateY(101%);
    transition: transform 500ms var(--ease-out-quart);
    z-index: -1;
}
.btn:hover {
    color: var(--limestone);
}
.btn:hover::before {
    transform: translateY(0);
}
.btn .arrow {
    transition: transform 400ms var(--ease-out-quart);
}
.btn:hover .arrow {
    transform: translateX(4px);
}

.btn--accent {
    border-color: var(--terracotta);
    color: var(--terracotta);
}
.btn--accent::before {
    background: var(--terracotta);
}
.btn--accent:hover {
    color: var(--limestone);
}

.btn--solid {
    background: var(--ink);
    color: var(--limestone);
}
.btn--solid::before {
    background: var(--terracotta);
}
.btn--solid:hover {
    color: var(--limestone);
    border-color: var(--terracotta);
}

.text-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--line);
    transition: border-color 350ms var(--ease-out-quart);
}
.text-link:hover {
    border-color: var(--ink);
}
.text-link .arrow {
    transition: transform 400ms var(--ease-out-quart);
}
.text-link:hover .arrow {
    transform: translateX(3px);
}

/* =========================================================
   Form
   ========================================================= */

.form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 38rem;
}
.field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.75rem;
    transition: border-color 350ms var(--ease-out-quart);
}
.field:focus-within {
    border-color: var(--ink);
}
.field label {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-quiet);
}
.field input,
.field textarea,
.field select {
    background: transparent;
    border: 0;
    outline: 0;
    padding: 0.25rem 0;
    font-size: 1.0625rem;
    font-family: var(--serif);
    color: var(--ink);
}
.field textarea {
    min-height: 7rem;
    resize: vertical;
}
.field input::placeholder,
.field textarea::placeholder {
    color: var(--ink-quiet);
    font-style: italic;
}

/* =========================================================
   Footer
   ========================================================= */

.site-footer {
    border-top: 1px solid var(--line);
    margin-top: clamp(5rem, 10vw, 9rem);
    padding: clamp(3rem, 6vw, 5rem) var(--pad) 1.75rem;
    background: var(--limestone-2);
}
.site-footer .inner {
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap);
}
@media (min-width: 768px) {
    .site-footer .inner {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}
.site-footer h4 {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-quiet);
    margin-bottom: 1.25rem;
    font-weight: 500;
}
.site-footer ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.site-footer a {
    color: var(--ink-soft);
    transition: color 300ms var(--ease-out-quart);
}
.site-footer a:hover {
    color: var(--ink);
}
.site-footer .colophon {
    margin-top: 3rem;
    border-top: 1px solid var(--line);
    padding-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--ink-quiet);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    max-width: var(--max);
    margin-left: auto;
    margin-right: auto;
}

/* =========================================================
   Reveal on scroll
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {
    [data-reveal] {
        opacity: 0;
        transform: translateY(20px);
        transition:
            opacity 900ms var(--ease-out-quart),
            transform 900ms var(--ease-out-quart);
        transition-delay: var(--reveal-delay, 0ms);
    }
    [data-reveal].is-visible {
        opacity: 1;
        transform: translateY(0);
    }
    [data-reveal] {
        transition-delay: calc(var(--stagger-step, 70ms) * var(--i, 0));
    }
}

/* =========================================================
   Utilities
   ========================================================= */

.muted {
    color: var(--ink-quiet);
}
.center {
    text-align: center;
}
.cap-mono {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.flow > * + * {
    margin-top: 1rem;
}
.flow-tight > * + * {
    margin-top: 0.5rem;
}
.cluster {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

/* Page intro for interior pages */
.page-intro {
    padding: clamp(3rem, 7vw, 6rem) 0 clamp(2rem, 5vw, 4rem);
}
.page-intro .display-mid {
    margin-top: 1.25rem;
    max-width: 18ch;
}
.page-intro .lede {
    margin-top: 1.5rem;
}

/* =========================================================
   Iframe slots — for 360°, 3D Models, References
   ========================================================= */

.iframe-slot {
    position: relative;
    background: var(--limestone-2);
    border: 1px solid var(--line);
    overflow: hidden;
    aspect-ratio: 16/9;
    transition: transform 1100ms var(--ease-out-expo);
}
.iframe-slot iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.iframe-slot[data-aspect="1/1"] {
    aspect-ratio: 1/1;
}
.iframe-slot[data-aspect="4/3"] {
    aspect-ratio: 4/3;
}
.iframe-slot[data-aspect="3/4"] {
    aspect-ratio: 3/4;
}
.iframe-slot[data-aspect="9/16"] {
    aspect-ratio: 9/16;
}
.iframe-slot[data-aspect="21/9"] {
    aspect-ratio: 21/9;
}

.social-embed-slot {
    display: grid;
    place-items: start center;
    overflow: auto;
    background: var(--limestone);
}
.social-embed-slot .tiktok-embed {
    width: 100%;
    min-width: 0;
    margin: 0 !important;
    border: 0;
}

.iframe-slot.is-empty::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        135deg,
        transparent 0 14px,
        color-mix(in oklch, var(--ink) 4%, transparent) 14px 15px
    );
    pointer-events: none;
}
.iframe-slot.is-empty::after {
    content: attr(data-label);
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-quiet);
    pointer-events: none;
    text-align: center;
    padding: 1rem;
}

[data-reveal] .iframe-slot {
    transform: scale(0.985);
}
[data-reveal].is-visible .iframe-slot {
    transform: scale(1);
}

.iframe-card {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}
.iframe-card-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.iframe-card-meta .heading {
    font-size: clamp(1.125rem, 1.5vw, 1.375rem);
}
.iframe-card-meta .source {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-quiet);
    white-space: nowrap;
}
.iframe-card .desc {
    font-size: 0.9375rem;
    color: var(--ink-soft);
}

/* =========================================================
   Language toggle (DE / EN)
   ========================================================= */

/* Hide EN by default to prevent flash of two languages on first paint */
body:not([data-lang]) .lang-en {
    display: none;
}
body[data-lang="de"] .lang-en {
    display: none !important;
}
body[data-lang="en"] .lang-de {
    display: none !important;
}

.lang-toggle {
    display: none;
    align-items: center;
    gap: 0.125rem;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-left: 1rem;
    color: var(--ink-quiet);
}
@media (min-width: 980px) {
    .lang-toggle {
        display: inline-flex;
    }
}

.lang-toggle button {
    padding: 0.3rem 0.45rem;
    color: var(--ink-quiet);
    transition: color 250ms var(--ease-out-quart);
    letter-spacing: inherit;
    font-size: inherit;
    text-transform: inherit;
    font-family: inherit;
    line-height: 1;
}
.lang-toggle button:hover {
    color: var(--ink);
}
.lang-toggle button[aria-pressed="true"] {
    color: var(--terracotta);
}
.lang-toggle .sep {
    opacity: 0.4;
    padding: 0 0.1rem;
    user-select: none;
}

/* Mobile lang toggle inside menu overlay */
.lang-toggle--mobile {
    display: inline-flex;
    margin-left: 0;
    margin-top: 1rem;
    font-size: 0.75rem;
}
@media (min-width: 980px) {
    .lang-toggle--mobile {
        display: none;
    }
}

/* Scroll progress strip */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background: var(--terracotta);
    z-index: 60;
    pointer-events: none;
    transition: width 120ms linear;
    will-change: width;
}

/* Page-load body fade */
html.js body {
    opacity: 0;
    transition: opacity 700ms var(--ease-out-quart);
}
html.js.is-loaded body {
    opacity: 1;
}

/* Hero entrance choreography */
@keyframes hero-img-in {
    from {
        clip-path: inset(0 0 100% 0);
        -webkit-clip-path: inset(0 0 100% 0);
    }
    to {
        clip-path: inset(0 0 0 0);
        -webkit-clip-path: inset(0 0 0 0);
    }
}
@keyframes hero-kenburns {
    from {
        transform: scale(1) translate3d(0, 0, 0);
    }
    to {
        transform: scale(1.06) translate3d(0, -1.5%, 0);
    }
}
html.js .hero-frame img {
    animation:
        hero-img-in 1500ms var(--ease-out-expo) 200ms both,
        hero-kenburns 50s linear 1700ms infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
    html.js .hero-frame img {
        animation: none;
    }
}

/* Split-text words (hero) */
[data-split-ready] .word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    line-height: inherit;
}
[data-split-ready] .word-inner {
    display: inline-block;
    transform: translateY(110%);
    transition: transform 1200ms var(--ease-out-expo);
    transition-delay: var(--w-delay, 0ms);
    will-change: transform;
}
[data-split-ready].is-revealed .word-inner {
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    [data-split-ready] .word-inner {
        transform: none !important;
    }
}

/* Image clip-reveal */
.clip-reveal {
    clip-path: inset(0 0 100% 0);
    -webkit-clip-path: inset(0 0 100% 0);
    transition:
        clip-path 1500ms var(--ease-out-expo),
        -webkit-clip-path 1500ms var(--ease-out-expo);
    will-change: clip-path;
}
.clip-reveal.is-visible {
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
}

/* Footer link drawn underline */
.site-footer a {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition:
        background-size 500ms var(--ease-out-quart),
        color 300ms var(--ease-out-quart);
}
.site-footer a:hover {
    background-size: 100% 1px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
    html {
        scroll-behavior: auto;
    }
    .clip-reveal {
        clip-path: none !important;
        -webkit-clip-path: none !important;
    }
}