/* Fabriquet — September 2026 studio direction. */
:root {
  --ink: #eeeae2;
  --muted: #aaa79f;
  --paper: #201e19;
  --line: #48443d;
  --cream: #eeeae2;
  color-scheme: dark;
  background: var(--paper);
}

body { background: var(--paper); }
::selection { color: #201e19; background: #eeeae2; }
.skip-link { color: #201e19; background: #eeeae2; }
.site-header {
  position: absolute;
  height: auto;
  padding: 0;
  top: 2.65vw;
  left: 5.15%;
  width: 90%;
  transform: translateY(-50%);
  color: var(--cream);
}
.brand {
  width: auto;
  flex-direction: row;
  align-items: center;
  gap: 7px;
}
.brand-symbol { width: 27px; height: 31px; fill: currentColor; flex-shrink: 0; }
.wordmark {
  font-family: 'DM Sans Light', 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(21px, 1.46vw, 60px);
  letter-spacing: -.8px;
  line-height: 1.1;
}
.desktop-nav {
  position: absolute;
  left: 28.35%;
  gap: clamp(29px, 2.9vw, 65px);
}
.desktop-nav a,
.desktop-nav a:nth-child(n),
.desktop-nav button {
  color: var(--cream);
  text-shadow: none;
  font-size: clamp(12px, .79vw, 32px);
  font-weight: 400;
  padding: 8px 0;
}
.desktop-nav a:after { bottom: 2px; }
.header-actions { margin-left: auto; gap: 14px; }
.button {
  min-height: 45px;
  padding: 0 27px;
  font-size: 14px;
  font-weight: 400;
  gap: 16px;
  transition: background .25s, color .25s, border-color .25s, transform .4s var(--ease), box-shadow .4s;
}
.button-cream,
.button-light {
  background: var(--cream);
  color: #151512;
  border-color: transparent;
  box-shadow: 0 0 0 1px #ffffff05;
}
.button-cream:hover,
.button-light:hover {
  background: #fffdf7;
  color: #151512;
  transform: translateY(-2px);
  box-shadow: 0 7px 24px #09090733;
}
.button-arrow { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .35s; }
.button:hover .button-arrow { transform: translateX(3px); }
.header-contact { min-height: 38px; padding: 0 28px; font-size: 14px; }
.hero {
  height: 100svh;
  min-height: 650px;
  max-height: none;
  overflow: hidden;
  isolation: isolate;
  background: #201e19;
}
.hero-art {
  position: absolute;
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
  background: none;
  transform: none;
  translate: none;
  animation: studio-fade 1.4s ease both;
  will-change: auto;
  z-index: -2;
}
.hero-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero-wash {
  background: none;
  pointer-events: none;
  z-index: -1;
}
.hero-content {
  margin: 0;
  padding: 0;
  position: absolute;
  left: 5.15%;
  top: 23.3%;
  max-width: 55%;
  color: var(--cream);
}
.hero h1 {
  font-family: 'DM Sans Light', 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(70px, 6.78vw, 320px);
  line-height: .82;
  letter-spacing: -.057em;
}
.hero h1 br { display: block; content: ''; margin-top: .04em; }
.hero-description {
  color: #e5e0d6;
  font-family: 'DM Sans Light', 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(17px, 1.2vw, 48px);
  line-height: 1.29;
  letter-spacing: -.027em;
  margin-top: 28px;
  max-width: none;
}
.hero-buttons { gap: 19px; margin-top: 18px; flex-wrap: nowrap; }
.hero .button { min-height: 45px; padding: 0 27px; font-size: 14px; }
.hero .button-outline {
  color: var(--cream);
  border: 1px solid #e8e1d6c7;
  background: #1818120a;
  min-width: 140px;
  box-shadow: none;
}
.hero .button-outline:hover { color: #181712; background: var(--cream); border-color: var(--cream); transform: translateY(-2px); }
.hero-content > * { animation: studio-rise .8s var(--ease) both; }
.hero-content > :nth-child(2) { animation-delay: .09s; }
.hero-content > :nth-child(3) { animation-delay: .17s; }
.motion-pause { color: #e8e3da; background: #29261e88; border-color: #d9d1bf33; }
.hero + .section { border-top: 1px solid #ddd1bc15; }

/* Carry the new warm, dark palette into the retained content. */
.section { background: #211f1a; }
.section-heading .eyebrow, .section-note, .section-note .small-rule { color: #b2ada2; }
.section-description, .principles-description, .principle p { color: #b2ada3; }
.visual-card { color: #181917; background: #eae8e3; }
.card-explore { color: #eeeae2; background: #25221dec; }
.principle { border-color: #4a453a; }
.principle-icon { color: #b3ac9d; }
.approach { background: #161612; }
.approach:before { background: linear-gradient(90deg, #201d17b0, #201d1733); }
.contact-copy { color: #191a17; }
.contact-copy .button-dark { color: #eeeae2; background: #211f1a; }
.site-footer { background: #191813; color: var(--cream); }
.footer-wave { filter: sepia(.16); }
.footer-brand .wordmark { font-family: 'DM Sans Light', 'DM Sans', sans-serif; font-weight: 300; }
.footer-brand .brand-tagline { display: none; }
.newsletter form button { background: var(--cream); color: #191813; }
.modal { background: #24221c; color: var(--cream); border-color: #655e4c; }
.modal-close { background: #24221ce6; color: var(--cream); border-color: #aaa08b66; }
.modal-close:hover { background: #494236; }
.detail-copy .eyebrow, .detail-copy > p:not(.eyebrow), .simple-modal > p, .simple-modal .helper { color: #b7b0a3; }
.detail-copy .button-dark, .contact-form .button-dark, .mobile-navigation .button-dark { background: var(--cream); color: #201e19; }
.contact-form input, .contact-form textarea, .contact-form select { color: var(--cream); border-color: #817764; }
.contact-form input::placeholder, .contact-form textarea::placeholder, .contact-form select:invalid { color: #9b9387; }
.contact-form select option { color: #201e19; background: #fff; }
.form-status { color: #d5ccb6; }
.search-input { color: var(--cream); border-color: #817764; }
.search-result { background: #413a2c66; }
.search-result:hover { background: #5b513c; }
.search-result small { color: #c1b8a4; }
.menu-toggle span { background: var(--cream); }

@keyframes studio-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes studio-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 1900px) {
  .brand { gap: 10px; }
  .brand-symbol { width: 1.62vw; height: 1.86vw; }
  .header-contact { min-height: 2.28vw; padding: 0 1.68vw; font-size: .84vw; }
  .hero-description { margin-top: 1.675vw; }
  .hero-buttons { margin-top: 1.075vw; gap: 1.14vw; }
  .hero .button { min-height: 2.69vw; padding: 0 1.62vw; font-size: .84vw; gap: .96vw; }
  .hero .button-outline { min-width: 8.38vw; }
  .button-arrow { width: 1.14vw; height: 1.14vw; }
}
@media (max-width: 1100px) {
  .site-header { top: 43px; }
  .desktop-nav { left: 28%; gap: 27px; }
  .desktop-nav a:nth-child(n) { font-size: 12px; }
  .hero { min-height: 680px; }
  .hero-content { top: 25%; max-width: 65%; }
  .hero h1 { font-size: 78px; }
  .hero-description { font-size: 18px; margin-top: 29px; }
  .hero-wash { background: linear-gradient(90deg, #1b191835, transparent 62%); }
}
@media (max-width: 760px) {
  .site-header { top: 41px; left: 6%; width: 88%; height: auto; }
  .wordmark { font-size: 22px; letter-spacing: -.7px; }
  .brand-symbol { width: 25px; height: 29px; }
  .header-contact, .desktop-nav { display: none; }
  .menu-toggle { display: flex; width: 38px; height: 38px; }
  .hero { min-height: 740px; height: 100svh; }
  .hero-art img { object-position: 66% 50%; }
  .hero-wash { background: linear-gradient(180deg, #16151150, #1715116b 42%, #17151112 70%, #1715111a), linear-gradient(90deg, #16151170, transparent 100%); }
  .hero-content { left: 6%; top: 19%; max-width: 90%; }
  .hero h1 { font-size: clamp(59px, 12.8vw, 91px); line-height: .92; letter-spacing: -.058em; }
  .hero h1 br { margin-top: 0; }
  .hero-description { font-size: 17px; line-height: 1.4; letter-spacing: -.025em; margin-top: 28px; max-width: 350px; }
  .hero-description .desktop-break { display: none; }
  .hero-buttons { gap: 12px; margin-top: 26px; flex-wrap: wrap; }
  .hero .button { min-height: 46px; padding: 0 22px; font-size: 13px; gap: 14px; }
  .hero .button-outline { min-width: 128px; }
  .button-arrow { width: 17px; height: 17px; }
  .brand { gap: 6px; }
}
@media (max-width: 375px) {
  .hero h1 { font-size: 57px; }
  .hero-description { font-size: 16px; }
  .hero .button { font-size: 12px; padding: 0 19px; }
  .hero .button-outline { min-width: 119px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art, .hero-content > * { animation: none; }
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.hero-video.video-ready { opacity: 1; }
.motion-pause, .motion-pause:not(.below-hero) {
  display: grid;
  opacity: .7;
  pointer-events: auto;
  width: 40px;
  height: 40px;
}
.motion-pause:hover, .motion-pause:focus-visible { opacity: 1; }
@media (max-width: 760px) { .hero-video { object-position: 66% 50%; } }

html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
.hero h1 span { display: block; }
.hero h1 span:last-child { letter-spacing: -.077em; }
.hero .button-cream { width: 163px; padding: 0 20px; }
@media (min-width: 1900px) { .hero .button-cream { width: 9.75vw; padding: 0 1.2vw; } }
@media (max-width: 760px) { .hero .button-cream { width: auto; padding: 0 22px; } }

.desktop-nav a { font-family: "DM Sans Light", "DM Sans", sans-serif; font-weight: 300; }
.hero .button-cream { font-weight: 500; }