/* fonts.css */
@font-face {
font-family: "Bellefair";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/bellefair-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;
}
@font-face {
font-family: "Bellefair";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/bellefair-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: "Lora";
font-style: normal;
font-weight: 500 600;
font-display: swap;
src: url("/assets/fonts/lora-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;
}
@font-face {
font-family: "Lora";
font-style: normal;
font-weight: 500 600;
font-display: swap;
src: url("/assets/fonts/lora-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: "Mulish";
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url("/assets/fonts/mulish-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;
}
@font-face {
font-family: "Mulish";
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url("/assets/fonts/mulish-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;
}
/* tokens.css */
:root {
--c-olive:        #58582b;
--c-olive-deep:   #3f3f1f;
--c-sage:         #808040;
--c-blue:         #d7dee1;
--c-linen:        #f5f2ea;
--c-white:        #ffffff;
--c-ink:          #1a1a14;
--c-ink-soft:     #4a4a3e;
--c-rule:         rgba(88, 88, 43, 0.22);
--c-rule-light:   rgba(255, 255, 255, 0.3);
--c-header-bg:    rgba(255, 255, 255, 0.92);
--c-overlay-top:    rgba(30, 30, 15, 0.35);
--c-overlay-bottom: rgba(30, 30, 15, 0.55);
--font-heading: "Lora", Georgia, "Times New Roman", serif;
--font-body:    "Mulish", "Segoe UI", system-ui, -apple-system, sans-serif;
--font-accent:  "Bellefair", "Lora", Georgia, serif;
--fs-h1:      clamp(2rem, 4vw, 3rem);
--fs-h2:      clamp(1.75rem, 3vw, 2.25rem);
--fs-h3:      clamp(1.25rem, 1.6vw, 1.5rem);
--fs-h4:      1.125rem;
--fs-body:    1.0625rem;
--fs-lead:    clamp(1.125rem, 1.4vw, 1.25rem);
--fs-small:   0.9375rem;
--fs-kicker:  0.75rem;
--fs-btn:     13px;
--fs-quote:   clamp(1.5rem, 3.4vw, 2.5rem);
--lh-body:    1.6;
--lh-heading: 1.2;
--lh-tight:   1.15;
--ls-kicker:  3px;
--ls-btn:     2px;
--fw-body:      400;
--fw-body-bold: 600;
--fw-heading:   500;
--sp-1:  8px;
--sp-2:  16px;
--sp-3:  24px;
--sp-4:  32px;
--sp-5:  40px;
--sp-6:  48px;
--sp-7:  64px;
--sp-8:  80px;
--sp-9:  96px;
--sp-10: 128px;
--section-y: clamp(64px, 9vw, 128px);
--section-y-tight: clamp(48px, 6vw, 96px);
--container: 1200px;
--container-narrow: 780px;
--gutter: clamp(20px, 4vw, 48px);
--grid-gap: clamp(16px, 2vw, 32px);
--header-h: 128px;
--header-h-compact: 72px;
--radius: 0;
--radius-soft: 2px;
--border-hair: 1px;
--ease-out-soft: cubic-bezier(0.165, 0.84, 0.44, 1);
--dur-fast: 0.3s;
--dur-med: 0.6s;
--dur-reveal: 1000ms;
--dur-image: 1.2s;
--z-header: 100;
--z-menu: 120;
--z-preloader: 200;
}
/* base.css */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--c-white);
color: var(--c-ink);
font-family: var(--font-body);
font-size: var(--fs-body);
font-weight: var(--fw-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd {
margin: 0;
}
ul, ol { padding: 0; list-style: none; }
img, picture, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button {
font: inherit;
color: inherit;
background: none;
border: 0;
padding: 0;
cursor: pointer;
}
:focus-visible {
outline: 2px solid var(--c-olive);
outline-offset: 3px;
}
.section--dark :focus-visible,
.hero :focus-visible { outline-color: var(--c-white); }
h1, h2, h3, h4 {
font-family: var(--font-heading);
font-weight: var(--fw-heading);
line-height: var(--lh-heading);
color: var(--c-olive);
letter-spacing: 0.005em;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p { max-width: 68ch; }
p + p { margin-top: var(--sp-2); }
strong, b { font-weight: var(--fw-body-bold); }
.lead {
font-size: var(--fs-lead);
line-height: 1.55;
color: var(--c-ink);
}
.kicker {
display: block;
font-family: var(--font-body);
font-size: var(--fs-kicker);
font-weight: var(--fw-body-bold);
letter-spacing: var(--ls-kicker);
text-transform: uppercase;
color: var(--c-olive);
margin-bottom: var(--sp-2);
}
.accent { font-family: var(--font-accent); font-weight: 400; }
.u-center { text-align: center; }
.u-mt-3 { margin-top: var(--sp-3); }
.u-mt-4 { margin-top: var(--sp-4); }
.u-mt-6 { margin-top: var(--sp-6); }
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
left: var(--sp-2);
top: -100px;
z-index: 300;
background: var(--c-white);
color: var(--c-olive);
padding: var(--sp-2) var(--sp-3);
border: var(--border-hair) solid var(--c-olive);
transition: top var(--dur-fast) var(--ease-out-soft);
}
.skip-link:focus { top: var(--sp-2); }
.container {
width: 100%;
max-width: calc(var(--container) + var(--gutter) * 2);
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }
.container--flush { padding-inline: 0; max-width: none; }
body.no-hero main { padding-top: var(--header-h); }
.section {
padding-block: var(--section-y);
position: relative;
}
.section--tight { padding-block: var(--section-y-tight); }
.section--flush { padding-block: 0; }
.section--white { background: var(--c-white); }
.section--linen { background: var(--c-linen); }
.section--blue  { background: var(--c-blue); }
.section--dark  { background: var(--c-olive-deep); color: var(--c-white); }
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: var(--c-white); }
.section--dark .kicker { color: rgba(255, 255, 255, 0.75); }
.section__head { margin-bottom: var(--sp-6); }
.section__head p { color: var(--c-ink-soft); }
.section__head--center { text-align: center; margin-inline: auto; max-width: 760px; }
.section__head--center p { margin-inline: auto; }
.btn {
display: inline-block;
padding: 14px 28px;
border: var(--border-hair) solid currentColor;
border-radius: var(--radius);
background: transparent;
color: var(--c-olive);
font-family: var(--font-body);
font-size: var(--fs-btn);
font-weight: var(--fw-body-bold);
line-height: 1.2;
letter-spacing: var(--ls-btn);
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: background var(--dur-fast) ease, color var(--dur-fast) ease,
border-color var(--dur-fast) ease;
}
.btn:hover,
.btn:focus-visible {
background: var(--c-olive);
border-color: var(--c-olive);
color: var(--c-white);
}
.btn--light { color: var(--c-white); }
.btn--light:hover,
.btn--light:focus-visible {
background: var(--c-white);
border-color: var(--c-white);
color: var(--c-olive);
}
.btn--small { padding: 10px 20px; font-size: 12px; }
.link {
display: inline-block;
font-size: var(--fs-small);
font-weight: var(--fw-body-bold);
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--c-olive);
padding-bottom: 4px;
border-bottom: var(--border-hair) solid var(--c-rule);
transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.link:hover, .link:focus-visible { border-color: var(--c-olive); }
.section--dark .link { color: var(--c-white); border-bottom-color: var(--c-rule-light); }
.section--dark .link:hover { border-bottom-color: var(--c-white); }
.media {
position: relative;
overflow: hidden;
background: var(--c-linen);
margin: 0;
}
.media picture {
display: block;
width: 100%;
height: 100%;
}
.media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--dur-image) var(--ease-out-soft);
}
.media--4x3 { aspect-ratio: 4 / 3; }
.media--3x2 { aspect-ratio: 3 / 2; }
.media--2x3 { aspect-ratio: 2 / 3; }
.media--3x4 { aspect-ratio: 3 / 4; }
.media--1x1 { aspect-ratio: 1 / 1; }
.media--fill { height: 100%; }
.media--zoom:hover img,
a:hover .media--zoom img { transform: scale(1.03); }
.media__caption {
font-family: var(--font-heading);
font-style: italic;
font-size: var(--fs-small);
color: var(--c-ink-soft);
margin-top: var(--sp-1);
}
html.js [data-reveal] {
opacity: 0;
transform: translateY(40px);
will-change: opacity, transform;
}
html.js [data-reveal].is-revealed {
opacity: 1;
transform: none;
transition: opacity var(--dur-reveal) var(--ease-out-soft),
transform var(--dur-reveal) var(--ease-out-soft);
}
html.js [data-reveal][data-delay="1"].is-revealed { transition-delay: 0.1s; }
html.js [data-reveal][data-delay="2"].is-revealed { transition-delay: 0.2s; }
html.js [data-reveal][data-delay="3"].is-revealed { transition-delay: 0.3s; }
html.js [data-reveal][data-delay="4"].is-revealed { transition-delay: 0.4s; }
html.js [data-reveal][data-delay="5"].is-revealed { transition-delay: 0.5s; }
html.js [data-reveal][data-delay="6"].is-revealed { transition-delay: 0.6s; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
html.js [data-reveal] { opacity: 1; transform: none; }
.media img { transition: none; }
.media--zoom:hover img, a:hover .media--zoom img { transform: none; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
@media (max-width: 980px) {
:root { --header-h: 116px; }
}
@media (max-width: 767px) {
:root { --header-h: var(--header-h-compact); }
p { max-width: none; }
}
/* components.css */
.preloader { display: none; }
html.js .preloader {
display: flex;
position: fixed;
inset: 0;
z-index: var(--z-preloader);
align-items: center;
justify-content: center;
background: var(--c-olive-deep);
opacity: 1;
visibility: visible;
transition: opacity var(--dur-med) var(--ease-out-soft),
visibility 0s linear var(--dur-med);
}
html.js.is-loaded .preloader {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.preloader__logo {
display: block;
width: min(52vw, 320px);
height: auto;
animation: preloader-breathe 2.4s var(--ease-out-soft) infinite;
}
@keyframes preloader-breathe {
0%, 100% { opacity: 0.55; }
50%      { opacity: 1; }
}
.header {
position: fixed;
inset: 0 0 auto 0;
z-index: var(--z-header);
background: transparent;
color: var(--c-white);
transition: background var(--dur-fast) ease, color var(--dur-fast) ease,
box-shadow var(--dur-fast) ease;
}
.header__inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--sp-3);
min-height: 64px;
padding-block: var(--sp-1);
}
.header__mark { justify-self: start; display: block; }
.header__mark img { display: block; width: 52px; height: 52px; }
.header__wordmark { justify-self: center; display: block; }
.header__wordmark img { display: block; width: 150px; height: auto; }
.header__actions {
justify-self: end;
display: flex;
align-items: center;
gap: var(--sp-3);
}
.logo-swap { position: relative; display: block; }
.logo-swap img { transition: opacity var(--dur-fast) ease; }
.logo-swap img + img { position: absolute; inset: 0; opacity: 0; }
.header.is-scrolled .logo-swap img { opacity: 0; }
.header.is-scrolled .logo-swap img + img { opacity: 1; }
.header__rule {
height: 1px;
background: var(--c-rule-light);
transition: background var(--dur-fast) ease;
}
.header__nav {
display: flex;
justify-content: center;
padding-block: var(--sp-2);
}
.header__nav ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: clamp(16px, 2.4vw, 36px);
}
.header__nav a {
font-size: var(--fs-small);
letter-spacing: 0.06em;
padding-bottom: 2px;
border-bottom: 1px solid transparent;
transition: border-color var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
.header__nav a:hover { border-bottom-color: currentColor; }
.header__nav a[aria-current="page"] { border-bottom-color: currentColor; }
.header.is-scrolled,
.header.is-solid {
background: var(--c-header-bg);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
color: var(--c-olive);
}
.header.is-scrolled .header__rule,
.header.is-solid .header__rule { background: var(--c-rule); }
.header.is-solid .logo-swap img { opacity: 0; }
.header.is-solid .logo-swap img + img { opacity: 1; }
.header .btn { border-color: currentColor; color: inherit; }
.header .btn:hover, .header .btn:focus-visible {
background: var(--c-white);
border-color: var(--c-white);
color: var(--c-olive);
}
.header.is-scrolled .btn:hover,
.header.is-solid .btn:hover,
.header.is-scrolled .btn:focus-visible,
.header.is-solid .btn:focus-visible {
background: var(--c-olive);
border-color: var(--c-olive);
color: var(--c-white);
}
.langswitch {
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
font-weight: var(--fw-body-bold);
letter-spacing: 1.5px;
text-transform: uppercase;
}
.langswitch li { display: flex; align-items: center; gap: 10px; }
.langswitch li + li::before {
content: "";
width: 1px;
height: 11px;
background: currentColor;
opacity: 0.4;
}
.langswitch a { opacity: 0.85; transition: opacity var(--dur-fast) ease; }
.langswitch a:hover { opacity: 1; }
.langswitch a[aria-current="true"] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.header__burger {
display: none;
justify-self: end;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
}
.header__burger span {
display: block;
position: relative;
width: 24px;
height: 1px;
background: currentColor;
}
.header__burger span::before,
.header__burger span::after {
content: "";
position: absolute;
left: 0;
width: 24px;
height: 1px;
background: currentColor;
}
.header__burger span::before { top: -7px; }
.header__burger span::after { top: 7px; }
.menu {
position: fixed;
inset: 0;
z-index: var(--z-menu);
background: var(--c-olive-deep);
color: var(--c-white);
display: flex;
flex-direction: column;
padding: var(--sp-3) var(--gutter) var(--sp-6);
opacity: 0;
visibility: hidden;
transform: translateY(-12px);
transition: opacity var(--dur-fast) var(--ease-out-soft),
transform var(--dur-fast) var(--ease-out-soft),
visibility 0s linear var(--dur-fast);
}
.menu.is-open {
opacity: 1;
visibility: visible;
transform: none;
transition-delay: 0s;
}
.menu__top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.menu__top img { display: block; width: 160px; height: auto; }
.menu__close {
font-size: 12px;
letter-spacing: var(--ls-btn);
text-transform: uppercase;
font-weight: var(--fw-body-bold);
}
.menu__nav {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
gap: var(--sp-2);
padding-block: var(--sp-6);
}
.menu__nav a {
font-family: var(--font-heading);
font-size: clamp(1.75rem, 8vw, 2.5rem);
line-height: 1.25;
color: var(--c-white);
}
.menu__nav a[aria-current="page"] { font-style: italic; }
.menu__foot { display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; }
body.menu-open { overflow: hidden; }
.hero {
position: relative;
height: 100svh;
min-height: 560px;
overflow: hidden;
background: var(--c-olive-deep);
}
.hero__video[hidden] { display: none; }
.hero__media,
.hero__video,
.hero__poster,
.hero__poster img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, var(--c-overlay-top), var(--c-overlay-bottom));
}
.hero__content {
position: relative;
z-index: 2;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--sp-4);
text-align: center;
color: var(--c-white);
padding: calc(var(--header-h) + var(--sp-4)) var(--gutter) var(--sp-8);
}
.hero__logo {
display: block;
width: min(40vw, 340px);
height: auto;
margin-inline: auto;
filter: drop-shadow(0 2px 24px rgba(20, 20, 10, 0.35));
}
.hero__tagline {
font-family: var(--font-accent);
font-size: clamp(1.125rem, 2.2vw, 1.5rem);
letter-spacing: 0.04em;
max-width: 24ch;
margin-inline: auto;
}
.hero__contact {
font-size: var(--fs-small);
letter-spacing: 0.04em;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--sp-2);
}
.hero__contact a { border-bottom: 1px solid rgba(255, 255, 255, 0.4); padding-bottom: 2px; }
.hero__contact a:hover { border-bottom-color: var(--c-white); }
.hero__contact .sep { opacity: 0.6; }
.hero__scroll {
position: absolute;
left: 50%;
bottom: var(--sp-3);
transform: translateX(-50%);
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-1);
color: var(--c-white);
font-size: 10px;
letter-spacing: var(--ls-kicker);
text-transform: uppercase;
}
.hero__scroll::after {
content: "";
width: 1px;
height: 44px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
animation: scroll-cue 2.4s var(--ease-out-soft) infinite;
}
@keyframes scroll-cue {
0%   { transform: scaleY(0.2); transform-origin: top; opacity: 0; }
35%  { opacity: 1; }
100% { transform: scaleY(1); transform-origin: top; opacity: 0; }
}
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(32px, 5vw, 80px);
align-items: center;
}
.split--image-left .split__text { order: 2; }
.split--image-left .split__media { order: 1; }
.split--single { grid-template-columns: 1fr; }
.split--single .split__text { max-width: 62ch; }
.split__body p { color: var(--c-ink-soft); }
.split__media { display: grid; gap: var(--grid-gap); }
.split__media--two { grid-template-columns: 1fr; align-items: start; }
.split__media--two .media:nth-child(2) { width: 62%; justify-self: end; }
.split__actions { margin-top: var(--sp-4); }
.split__signature {
font-family: var(--font-accent);
font-size: 1.5rem;
color: var(--c-olive);
margin-top: var(--sp-1);
}
.intro__text { max-width: 720px; }
.intro__photos {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--grid-gap);
margin-top: var(--sp-7);
}
.statement { text-align: center; }
.statement__quote {
font-family: var(--font-heading);
font-size: var(--fs-quote);
line-height: 1.25;
font-weight: var(--fw-heading);
max-width: 20ch;
margin-inline: auto;
}
.statement__body {
margin-top: var(--sp-4);
max-width: 62ch;
margin-inline: auto;
color: rgba(255, 255, 255, 0.86);
}
.textcols {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(32px, 4vw, 64px);
}
.textcols--4 { grid-template-columns: repeat(4, 1fr); }
.textcols__item h3 { margin-bottom: var(--sp-1); }
.textcols__item p { color: var(--c-ink-soft); }
.textcols__item::before {
content: "";
display: block;
width: 32px;
height: 1px;
background: var(--c-sage);
margin-bottom: var(--sp-2);
}
.cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--grid-gap);
}
.card { display: flex; flex-direction: column; }
.card__meta {
font-size: var(--fs-kicker);
letter-spacing: var(--ls-kicker);
text-transform: uppercase;
color: var(--c-olive);
margin-top: var(--sp-2);
}
.card h3 { margin-top: var(--sp-1); }
.card p { margin-top: var(--sp-1); color: var(--c-ink-soft); font-size: var(--fs-small); }
.card .link { margin-top: auto; padding-top: var(--sp-3); align-self: flex-start; }
.carousel { position: relative; }
.carousel__track {
display: flex;
gap: var(--grid-gap);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: var(--sp-1);
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide {
flex: 0 0 calc((100% - var(--grid-gap)) / 2);
scroll-snap-align: start;
}
.quote-card {
height: 100%;
background: var(--c-white);
border: 1px solid var(--c-rule);
padding: clamp(28px, 4vw, 48px);
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.quote-card::before {
content: "\201C";
font-family: var(--font-accent);
font-size: 4rem;
line-height: 0.7;
color: var(--c-sage);
}
.quote-card__text {
font-family: var(--font-heading);
font-size: var(--fs-h3);
line-height: 1.45;
color: var(--c-olive);
}
.quote-card__author {
font-size: var(--fs-small);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--c-ink-soft);
margin-top: auto;
}
.quote-card[data-placeholder] .quote-card__text { color: var(--c-ink-soft); font-style: italic; }
.carousel__nav { display: none; gap: var(--sp-1); margin-top: var(--sp-4); }
html.js .carousel__nav { display: flex; }
.carousel__btn {
width: 48px;
height: 48px;
border: 1px solid var(--c-rule);
color: var(--c-olive);
display: flex;
align-items: center;
justify-content: center;
transition: background var(--dur-fast) ease, color var(--dur-fast) ease,
border-color var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
.carousel__btn:hover:not(:disabled) {
background: var(--c-olive);
border-color: var(--c-olive);
color: var(--c-white);
}
.carousel__btn:disabled { opacity: 0.35; cursor: default; }
.gallery-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-flow: dense;
gap: var(--grid-gap);
}
.gallery-grid .media { aspect-ratio: 4 / 3; }
.gallery-grid .media--tall { grid-row: span 2; aspect-ratio: auto; }
.gallery-grid .media--wide { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.photostrip {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0;
}
.photostrip .media { aspect-ratio: 1 / 1; }
.ctaband { text-align: center; }
.ctaband p { margin-inline: auto; }
.ctaband .btn { margin-top: var(--sp-4); }
.footer {
background: var(--c-olive-deep);
color: rgba(255, 255, 255, 0.86);
padding-block: var(--section-y-tight) var(--sp-5);
font-size: var(--fs-small);
}
.footer a { color: var(--c-white); }
.footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer__brand { text-align: center; padding-bottom: var(--sp-7); }
.footer__brand img { display: block; width: min(70vw, 260px); height: auto; margin-inline: auto; }
.footer__tagline { margin-top: var(--sp-3); color: rgba(255, 255, 255, 0.8); max-width: 46ch; margin-inline: auto; }
.footer__cols {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--grid-gap);
padding-block: var(--sp-6);
border-top: 1px solid var(--c-rule-light);
border-bottom: 1px solid var(--c-rule-light);
}
.footer__title {
font-family: var(--font-body);
font-size: var(--fs-kicker);
font-weight: var(--fw-body-bold);
letter-spacing: var(--ls-kicker);
text-transform: uppercase;
color: var(--c-white);
margin-bottom: var(--sp-2);
}
.footer__cols li + li { margin-top: 6px; }
.footer__cols address { font-style: normal; line-height: var(--lh-body); }
.footer__bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--sp-2);
padding-top: var(--sp-4);
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 980px) {
.header__wordmark img { width: 140px; }
.cards { grid-template-columns: repeat(2, 1fr); }
.textcols--4 { grid-template-columns: repeat(2, 1fr); }
.gallery-grid { grid-template-columns: repeat(3, 1fr); }
.footer__cols { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-5); }
.intro__photos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
.header__inner { grid-template-columns: auto 1fr auto; min-height: var(--header-h-compact); }
.header__mark img { width: 38px; height: 38px; }
.header__wordmark img { width: 120px; }
.header__actions { display: none; }
.header__burger { display: flex; }
.header__rule, .header__nav { display: none; }
.hero__logo { width: min(60vw, 240px); }
.hero__content { gap: var(--sp-3); }
.split { grid-template-columns: 1fr; }
.split__media--two .media:nth-child(2) { width: 100%; }
.split--image-left .split__text,
.split--image-left .split__media { order: 0; }
.textcols, .textcols--4 { grid-template-columns: 1fr; }
.cards { grid-template-columns: 1fr; }
.carousel__slide { flex-basis: 100%; }
.gallery-grid { grid-template-columns: repeat(2, 1fr); }
.photostrip { grid-template-columns: repeat(3, 1fr); }
.footer__cols { grid-template-columns: 1fr; }
.footer__bottom { justify-content: center; text-align: center; }
}
@media (max-width: 560px) {
.hero__contact { flex-direction: column; gap: 6px; }
.hero__contact .sep { display: none; }
}
@media (max-width: 480px) {
.intro__photos { grid-template-columns: repeat(2, 1fr); }
.quote-card { padding: var(--sp-3); }
.photostrip { grid-template-columns: repeat(2, 1fr); }
}
.notfound {
min-height: 100vh;
display: flex;
align-items: center;
padding-block: var(--sp-8);
background: var(--c-linen);
}
.notfound__brand { width: min(60vw, 300px); margin-inline: auto; }
.notfound__brand a { display: block; }
.notfound__brand img { display: block; width: 100%; height: auto; }
.notfound__blocks {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--grid-gap);
margin-top: var(--sp-7);
text-align: center;
}
.notfound__block h2 { font-size: var(--fs-h3); }
.notfound__block p { margin-top: var(--sp-2); color: var(--c-ink-soft); }
.notfound__block .btn { margin-top: var(--sp-1); }
@media (max-width: 767px) {
.notfound__blocks { grid-template-columns: 1fr; gap: var(--sp-6); }
}
/* pages/home.css */
.home-intro { padding-top: clamp(72px, 10vw, 144px); }
.home-intro .intro__text h2 { max-width: 15ch; }
.home-statement { padding-block: clamp(80px, 11vw, 160px); }
.home-seasons .section__head { max-width: 640px; }
.home-cards .card__caption {
font-family: var(--font-heading);
font-style: italic;
font-size: 0.8125rem;
color: var(--c-ink-soft);
margin-top: 6px;
}
.home-reviews .section__head { text-align: center; margin-inline: auto; max-width: 640px; }
.home-gallery__head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--sp-3);
margin-bottom: var(--sp-6);
}
.home-gallery__head p { color: var(--c-ink-soft); max-width: 52ch; }
.home-closing { margin-top: var(--sp-3); font-family: var(--font-heading); color: var(--c-olive); }
.home-strip { padding-block: 0; }
@media (max-width: 767px) {
.home-gallery__head { align-items: flex-start; }
}