:root {
    --ink: #171713;
    --paper: #f3efe6;
    --soft: #d9d1c2;
    --rust: #a94726;
    --acid: #d7d65a;
    --line: rgba(23, 23, 19, 0.2);
    --serif: "Cormorant Garamond", Georgia, serif;
    --sans: "Inter", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; overflow-x: hidden; }
body.menu-open { overflow: hidden; }
img { display: block; width: 100%; height: auto; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.skip-link { position: fixed; left: 1rem; top: 1rem; z-index: 100; transform: translateY(-180%); padding: .8rem 1rem; background: #fff; color: #111; }
.skip-link:focus { transform: none; }
.section { padding: 6.5rem 1.25rem; }
.eyebrow, .rail { margin: 0; font-size: .68rem; font-weight: 600; letter-spacing: .16em; line-height: 1.3; text-transform: uppercase; }
em { font-weight: 300; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 30; color: #fff; transition: background .3s, color .3s; }
.site-header.is-scrolled { background: rgba(243, 239, 230, .94); color: var(--ink); backdrop-filter: blur(12px); }
.nav { min-height: 4.5rem; display: flex; align-items: center; justify-content: space-between; padding: .65rem 1.25rem; }
.brand { position: relative; z-index: 2; width: 3.15rem; height: 3.15rem; }
.brand img { height: 100%; object-fit: contain; transition: filter .3s; }
.site-header.is-scrolled .brand img { filter: invert(1); }
.menu-toggle { position: relative; z-index: 2; display: flex; align-items: center; gap: .65rem; min-height: 2.75rem; border: 0; background: transparent; color: inherit; font: 500 .68rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.menu-toggle i, .menu-toggle i::after { display: block; width: 1.5rem; height: 1px; background: currentColor; transition: transform .25s; }
.menu-toggle i::after { content: ""; transform: translateY(6px); }
.menu-toggle[aria-expanded="true"] i { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] i::after { transform: rotate(-90deg); }
.nav-list { position: fixed; inset: 0; z-index: 1; margin: 0; padding: 7rem 1.25rem 3rem; display: flex; flex-direction: column; justify-content: center; gap: .45rem; list-style: none; background: var(--rust); color: #fff; opacity: 0; visibility: hidden; transform: translateY(-1rem); transition: opacity .25s, visibility .25s, transform .25s; }
.nav-list.is-open { opacity: 1; visibility: visible; transform: none; }
.nav-list a, .nav-pending { display: block; padding: .3rem 0; font: 400 clamp(2.1rem, 11vw, 4rem)/1 var(--serif); text-decoration: none; }
.nav-list .is-active { font-style: italic; }
.nav-pending { opacity: .42; }

.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; color: #fff; background: #5b2e20; }
.hero__image, .hero__wash { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__image { object-fit: cover; object-position: 72% center; }
.hero__wash { background: linear-gradient(180deg, rgba(15, 8, 5, .18) 0%, rgba(15, 8, 5, .16) 38%, rgba(15, 8, 5, .84) 100%); }
.hero__brand { position: absolute; top: 5.4rem; left: 1.25rem; margin: 0; font: 400 .8rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.hero__brand span { opacity: .6; }
.hero__content { position: relative; z-index: 1; width: 100%; padding: 8.5rem 1.25rem 4.6rem; }
.hero h1 { max-width: 12ch; margin: .85rem 0 1rem; font: 400 clamp(3.25rem, 15vw, 6rem)/.86 var(--serif); letter-spacing: -.045em; }
.hero h1 em { display: inline-block; }
.hero__lead { max-width: 28rem; margin: 0 0 1.8rem; font-size: .98rem; }
.hero__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.button { min-height: 3.25rem; display: inline-flex; align-items: center; justify-content: center; gap: .8rem; padding: .9rem 1.15rem; font: 600 .7rem/1.2 var(--sans); letter-spacing: .08em; text-align: center; text-decoration: none; text-transform: uppercase; }
.button--light { background: var(--paper); color: var(--ink); }
.button--dark { background: var(--ink); color: #fff; }
.text-link { min-height: 2.75rem; display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; text-underline-offset: .35rem; }
.hero__scroll { position: absolute; right: 1.25rem; bottom: 1.2rem; z-index: 2; display: none; align-items: center; gap: .6rem; font-size: .62rem; letter-spacing: .16em; text-decoration: none; text-transform: uppercase; }
.hero__scroll i { width: 3rem; height: 1px; background: currentColor; }

.problem { position: relative; min-height: 90svh; display: flex; flex-direction: column; justify-content: space-between; background: var(--paper); }
.problem__phrases { padding-top: 4rem; }
.problem h2 { margin: 0; font: 400 clamp(3.15rem, 14vw, 6.5rem)/.88 var(--serif); letter-spacing: -.05em; }
.problem h2 span { display: block; }
.problem__phrases > p { margin: 4rem 0 1rem; font: 300 clamp(2.25rem, 10vw, 4.5rem)/.96 var(--serif); }
.problem strong { color: var(--rust); font: italic 300 clamp(2.35rem, 11vw, 5rem)/1 var(--serif); }

.proposal { background: var(--ink); color: #fff; }
.proposal__image { position: relative; margin: 0; }
.proposal__image img { aspect-ratio: 4 / 5; object-fit: cover; }
.proposal__image figcaption { position: absolute; left: 1rem; bottom: 1rem; font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; }
.proposal__copy { padding: 4.5rem 1.25rem 6rem; }
.proposal__copy h2 { max-width: 15ch; margin: 1.2rem 0 2rem; font: 400 clamp(2.75rem, 12vw, 6rem)/.92 var(--serif); letter-spacing: -.04em; }
.proposal__copy > p:last-child { max-width: 29rem; margin: 0; color: rgba(255,255,255,.66); }

.section-heading h2 { max-width: 14ch; margin: 1rem 0 3.5rem; font: 400 clamp(2.9rem, 12vw, 5.5rem)/.9 var(--serif); letter-spacing: -.04em; }
.process { background: var(--acid); }
.process__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(23,23,19,.4); }
.process__list li { display: grid; grid-template-columns: 2.4rem 1fr; gap: .75rem; padding: 1.6rem 0 2rem; border-bottom: 1px solid rgba(23,23,19,.4); }
.process__list li > span { font-size: .68rem; letter-spacing: .08em; }
.process h3 { margin: 0 0 .35rem; font: 400 2.25rem/1 var(--serif); }
.process__list p { max-width: 29rem; margin: 0; font-size: .84rem; }

.plans { color: #fff; background: var(--rust); }
.plans__heading h2 { margin: .8rem 0 1.5rem; font: 400 clamp(3.2rem, 14vw, 6rem)/.87 var(--serif); letter-spacing: -.05em; }
.plans__heading > p { max-width: 28rem; margin: 0 0 3.5rem; color: rgba(255,255,255,.72); }
.plans__grid { display: grid; gap: 1rem; }
.plan { position: relative; min-height: 31rem; display: flex; flex-direction: column; padding: 1.35rem; border: 1px solid rgba(255,255,255,.35); }
.plan--featured { background: var(--paper); color: var(--ink); }
.plan__index { margin: 0; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; }
.plan__badge { position: absolute; top: 1rem; right: 1rem; margin: 0; padding: .45rem .6rem; background: var(--acid); color: var(--ink); font-size: .56rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.plan h3 { margin: 3.5rem 0 1.1rem; font: italic 300 3.8rem/1 var(--serif); }
.plan__rhythm { margin: 0 0 2rem; font: 400 1.65rem/1 var(--serif); }
.plan__rhythm span { display: block; font: 400 .68rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.plan ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid currentColor; }
.plan li { padding: .6rem 0; border-bottom: 1px solid currentColor; font-size: .76rem; }
.plan__note { margin: auto 0 1.5rem; padding-top: 2rem; font: italic 300 1.45rem/1.05 var(--serif); }
.plan__link { min-height: 2.75rem; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid currentColor; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }

.possibilities { padding-bottom: 2rem; background: var(--paper); }
.possibilities__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .55rem; }
.possibility { position: relative; margin: 0; overflow: hidden; background: #bbb; }
.possibility img { height: 100%; object-fit: cover; filter: saturate(.78); transition: transform .7s, filter .7s; }
.possibility figcaption { position: absolute; inset: auto .7rem .65rem; color: #fff; font: italic 300 clamp(1.5rem, 7vw, 3.5rem)/1 var(--serif); text-shadow: 0 1px 1rem rgba(0,0,0,.6); }
.possibility:nth-child(3n + 1) { grid-row: span 2; aspect-ratio: 4 / 7; }
.possibility:not(:nth-child(3n + 1)) { aspect-ratio: 4 / 5; }

.year-round { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; color: #fff; }
.year-round > img, .year-round__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.year-round > img { object-fit: cover; }
.year-round__shade { background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.82)); }
.year-round__copy { position: relative; z-index: 1; padding: 5rem 1.25rem; }
.year-round__copy > p { margin: 0 0 1rem; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }
.year-round h2 { max-width: 13ch; margin: 0; font: 400 clamp(3rem, 13vw, 7rem)/.9 var(--serif); letter-spacing: -.04em; }

.audience { display: grid; gap: 4rem; }
.audience h2 { max-width: 12ch; margin: 0 0 3rem; font: 400 clamp(3rem, 12vw, 6.5rem)/.9 var(--serif); letter-spacing: -.04em; }
.audience ul { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.audience li { padding: .6rem .85rem; border: 1px solid var(--ink); border-radius: 99px; font-size: .72rem; letter-spacing: .04em; }

.portfolio { padding-top: 2rem; background: #fff; }
.portfolio__heading h2 { margin: 1rem 0 3rem; font: 400 clamp(3rem, 13vw, 6rem)/.88 var(--serif); letter-spacing: -.04em; }
.portfolio__grid { display: grid; gap: 1rem; }
.portfolio figure { margin: 0; overflow: hidden; }
.portfolio img { height: 100%; object-fit: cover; }
.portfolio__one, .portfolio__three, .portfolio__five { aspect-ratio: 3 / 2; }
.portfolio__two, .portfolio__four { width: 78%; aspect-ratio: 4 / 5; }
.portfolio__two { margin-left: auto !important; }

.closing { min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; padding: 2rem 1.25rem 5.5rem; background: var(--acid); }
.closing__index { margin: 0; font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; }
.closing__content { padding: 7rem 0 4rem; }
.closing h2 { max-width: 14ch; margin: 0 0 2rem; font: 400 clamp(3rem, 13vw, 7rem)/.87 var(--serif); letter-spacing: -.05em; }
.closing__content > p { margin: 0 0 2rem; }
.closing footer { display: grid; grid-template-columns: 1fr auto; gap: .15rem 1rem; align-items: end; padding-top: 1rem; border-top: 1px solid var(--ink); font-size: .68rem; }
.closing footer strong { font: italic 400 1.6rem/1 var(--serif); }
.closing footer span { grid-column: 1; }
.closing footer a { grid-column: 2; grid-row: 1 / span 2; text-decoration: none; }

.floating-cta { position: fixed; right: .8rem; bottom: .8rem; z-index: 20; min-height: 3rem; display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; border-radius: 99px; background: var(--ink); color: #fff; box-shadow: 0 .4rem 1.5rem rgba(0,0,0,.22); font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.floating-cta i { font-style: normal; }

.has-reveal .reveal { opacity: 0; transform: translateY(1.8rem); transition: opacity .8s ease, transform .8s ease; }
.has-reveal .reveal.is-visible { opacity: 1; transform: none; }

@media (hover: hover) {
    .possibility:hover img { transform: scale(1.025); filter: saturate(1); }
    .plan__link:hover, .text-link:hover { opacity: .62; }
}

@media (min-width: 700px) {
    .section { padding: 8rem 4vw; }
    .nav, .hero__content, .hero__brand { padding-left: 4vw; padding-right: 4vw; }
    .hero__brand { left: 0; }
    .hero__actions { flex-direction: row; align-items: center; }
    .proposal__copy, .year-round__copy { padding-left: 4vw; padding-right: 4vw; }
    .plan { min-height: 37rem; }
    .possibilities__grid { grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; }
    .possibility:nth-child(3n + 1) { grid-row: span 2; }
    .possibility--c, .possibility--f { grid-column: span 2; }
    .portfolio__grid { grid-template-columns: repeat(2, 1fr); align-items: start; }
    .portfolio__one, .portfolio__five { grid-column: span 2; }
    .portfolio__two, .portfolio__four { width: 82%; }
    .closing { padding-left: 4vw; padding-right: 4vw; }
}

@media (min-width: 1000px) {
    .site-header { padding: 0 1vw; }
    .menu-toggle { display: none; }
    .nav-list { position: static; width: auto; padding: 0; flex-direction: row; justify-content: flex-end; gap: 1.6rem; background: transparent; color: inherit; opacity: 1; visibility: visible; transform: none; }
    .nav-list a, .nav-pending { padding: .8rem 0; font: 500 .62rem/1 var(--sans); letter-spacing: .11em; text-transform: uppercase; }
    .hero__image { object-position: center; }
    .hero__content { padding-bottom: 7vh; }
    .hero h1 { max-width: 13ch; }
    .hero__scroll { display: flex; right: 4vw; bottom: 2.2rem; }
    .problem { min-height: 100svh; display: grid; grid-template-columns: 22% 1fr; padding-top: 10rem; }
    .problem__phrases { padding-top: 0; }
    .problem__phrases > p { margin-left: 18%; }
    .problem strong { display: block; margin-left: 45%; }
    .proposal { display: grid; grid-template-columns: 47% 53%; align-items: center; }
    .proposal__image img { aspect-ratio: 3 / 4; }
    .proposal__copy { padding-top: 8rem; padding-bottom: 8rem; }
    .process { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; }
    .process__list li { grid-template-columns: 3rem 12rem 1fr; align-items: baseline; }
    .process__list li div { display: contents; }
    .process__list h3 { margin: 0; }
    .plans__heading { display: grid; grid-template-columns: 1fr 22rem; align-items: end; gap: 5vw; }
    .plans__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .possibilities { padding-bottom: 7rem; }
    .year-round__copy { padding-bottom: 8rem; }
    .audience { grid-template-columns: 22% 1fr; }
    .audience ul { max-width: 46rem; }
    .portfolio__grid { grid-template-columns: 1.2fr .8fr 1fr; gap: 1.2rem; }
    .portfolio__one { grid-column: 1 / span 2; aspect-ratio: 16 / 9; }
    .portfolio__two { grid-column: 3; grid-row: 1 / span 2; width: 100%; aspect-ratio: 3 / 5; margin-top: 10rem !important; }
    .portfolio__three { grid-column: 1; aspect-ratio: 4 / 3; }
    .portfolio__four { grid-column: 2; width: 82%; margin-top: 4rem !important; aspect-ratio: 3 / 4; }
    .portfolio__five { grid-column: 1 / span 3; width: 78%; margin-left: auto !important; aspect-ratio: 16 / 8; }
    .closing__content { padding-top: 10rem; }
    .closing { padding-bottom: 1.25rem; }
    .floating-cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}