:root {
--paper: #f5f0e9;
--ink: #171411;
--muted: #7d7267;
--taupe: #a67b4f;
--panel: #eee5da;
}
body {
margin: 0;
font-family: "Manrope", sans-serif;
background:
radial-gradient(circle at 12% 16%, rgba(255, 255, 255, 0.82), transparent 30%),
radial-gradient(circle at 82% 10%, rgba(221, 211, 198, 0.34), transparent 34%),
var(--paper);
color: var(--ink);
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
}
main > section {
overflow-x: clip;
}
.font-logo {
font-family: "Cormorant Garamond", serif;
}
.font-display {
font-family: "Newsreader", serif;
}
.premium-panel {
border: 1px solid #d8c9b8;
background: #eee5da;
box-shadow:
0 24px 64px rgba(42, 31, 22, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.material-dot:nth-child(1) {
background: radial-gradient(circle at 35% 25%, #e6dfd5, #bfb5aa);
}
.material-dot:nth-child(2) {
background: linear-gradient(90deg, #786653, #b39a82, #705844);
}
.material-dot:nth-child(3) {
background: radial-gradient(circle at 30% 20%, #333638, #111314);
}
.material-dot:nth-child(4) {
background: radial-gradient(circle at 40% 20%, #d8ceb9, #a9967f);
}
.material-dot:nth-child(5) {
background: linear-gradient(120deg, #6d452d, #b57b4d, #553722);
}
.material-dot:nth-child(6) {
background: radial-gradient(circle at 35% 25%, #e1dcd5, #bdb5ac);
}
.z-35 {
z-index: 35;
}
.z-55 {
z-index: 55;
}
@media (max-width: 1023px) {
.hero-side {
min-height: auto !important;
}
.hero-image-frame {
height: 640px !important;
border-radius: 1.35rem !important;
}
.hero-visual-bleed {
margin-right: 0 !important;
}
}
@media (max-width: 640px) {
.hero-side,
.hero-visual-bleed {
width: calc(100vw - 3rem) !important;
max-width: calc(100vw - 3rem) !important;
padding-right: 0 !important;
}
.hero-image-frame {
height: 560px !important;
overflow: hidden !important;
}
.hero-side h1 {
font-size: clamp(2.75rem, 11vw, 2.95rem) !important;
letter-spacing: 0 !important;
}
.font-display {
letter-spacing: 0 !important;
}
h2.font-display {
font-size: clamp(2.65rem, 10.5vw, 3rem) !important;
}
.hero-side p {
font-size: 1.03rem !important;
}
header nav {
gap: 1rem !important;
}
header .font-logo {
font-size: 1.45rem !important;
letter-spacing: 0.12em !important;
}
header nav > div:last-child {
gap: 0.75rem !important;
}
header nav > div:last-child a:last-child {
height: 48px !important;
padding-left: 1rem !important;
padding-right: 1rem !important;
font-size: 0.86rem !important;
}
}

@media (max-width: 767px) {
.philosophy-points > .flex {
flex-wrap: wrap;
gap: 1.25rem;
}
.philosophy-points > .flex > div {
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.philosophy-points > .flex > div[class*="w-px"] {
display: none;
}
}



.reveal-on-scroll {
opacity: 0;
transform: translateY(30px);
transition-property: opacity, transform;
transition-duration: 1.2s;
transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-on-scroll.animate-in {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.reveal-on-scroll {
transition: none;
opacity: 1;
transform: none;
}
}

.is-clickable {
cursor: pointer;
}
.is-selected {
border-color: #ad8356 !important;
background: #f3eadf !important;
box-shadow:
0 12px 25px rgba(115, 82, 50, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}
.is-selected img {
opacity: 1 !important;
filter: saturate(1) !important;
}
.concept-thumb-active {
border-color: #ad8356 !important;
transform: translateY(-2px);
}
.dropzone-active {
border-color: #ad8356 !important;
background: #fbf5ed !important;
}
.atelier-modal-backdrop {
position: fixed;
inset: 0;
z-index: 9998;
display: flex;
align-items: center;
justify-content: center;
padding: 1.25rem;
background: rgba(23, 20, 17, 0.58);
backdrop-filter: blur(10px);
opacity: 0;
pointer-events: none;
transition: opacity 220ms ease;
}
.atelier-modal-backdrop.is-open {
opacity: 1;
pointer-events: auto;
}
.atelier-modal {
width: min(100%, 780px);
max-height: min(88vh, 820px);
overflow: auto;
border: 1px solid #d8c9b8;
border-radius: 1.2rem;
background: #f3eee7;
box-shadow: 0 38px 110px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.72);
transform: translateY(18px) scale(0.98);
transition: transform 220ms ease;
}
.atelier-modal-backdrop.is-open .atelier-modal {
transform: translateY(0) scale(1);
}
.atelier-toast {
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 9999;
max-width: min(360px, calc(100vw - 2rem));
border: 1px solid #d8c9b8;
border-radius: 0.95rem;
background: #171614;
color: #fff;
padding: 0.9rem 1rem;
box-shadow: 0 24px 64px rgba(42, 31, 22, 0.28);
font-size: 0.84rem;
font-weight: 800;
letter-spacing: -0.02em;
opacity: 0;
transform: translateY(12px);
pointer-events: none;
transition: opacity 180ms ease, transform 180ms ease;
}
.atelier-toast.is-visible {
opacity: 1;
transform: translateY(0);
}
.modal-form-field {
border: 1px solid #d8c9b8;
border-radius: 0.8rem;
background: #f7f1e9;
padding: 0.9rem 1rem;
font: inherit;
font-size: 0.88rem;
font-weight: 700;
color: #171411;
outline: none;
}
.modal-form-field:focus {
border-color: #ad8356;
box-shadow: 0 0 0 3px rgba(173, 131, 86, 0.16);
}
@media (max-width: 640px) {
.atelier-modal-backdrop {
align-items: flex-end;
padding: 0.75rem;
}
.atelier-modal {
max-height: 92vh;
border-radius: 1rem;
}
}