@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/98b910f0208e132f8fc60ce2.ttf') format('truetype'); }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/92def11606c4f9b49fa78e90.ttf') format('truetype'); }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/750636acddb6c1724ba76e6f.ttf') format('truetype'); }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/0dbdd5048556689ce6c4714f.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/a0ab9869bed1d244173bfce6.ttf') format('truetype'); }
:root {
  --brown-channels: 22% 0.047 65;
  --brown: oklch(var(--brown-channels));
  --ink: #1c140f;
  --surface-dark: #230e02;
  --surface-header: rgb(45 22 0 / 96%);
  --surface-nav: rgb(40 21 0 / 85%);
  --surface-light: rgb(255 255 255 / 90%);
  --text-light: #fff;
  --text-dark: #190c00;
  --space-s: .75rem;
  --space-m: 1.25rem;
  --space-l: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  --space-xl: clamp(2.5rem, 1.75rem + 2vw, 4rem);
  --section-space: clamp(3rem, 1.75rem + 4vw, 6rem);
  --radius: 1.25rem;
  --body-size: 1.375rem;
  --heading-size: clamp(1.875rem, 1.3rem + 1.65vw, 2.5rem);
  --content-width: 66.25rem;
  --header-offset: 8.75rem;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-offset); }
body { margin: 0; color: var(--text-light); background: var(--ink); font-family: 'Raleway', sans-serif; font-size: var(--body-size); line-height: 1.5; overflow-wrap: anywhere; }
img { max-width: 100%; height: auto; }
button, input, textarea { font: inherit; }
a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .2em; }
button, a, input, textarea, [tabindex] { &:focus-visible { outline: 3px solid #fff; outline-offset: 4px; } }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: 'Roboto', sans-serif; font-weight: 700; line-height: 1.2; }
h2 { font-size: var(--heading-size); }
.content-width { width: min(var(--content-width), calc(100% - 2 * var(--space-m))); margin-inline: auto; }
.prose { & p + p { margin-top: var(--space-s); } }
.skip-link { position: fixed; z-index: 20; top: .5rem; left: .5rem; transform: translateY(-200%); padding: .75rem 1rem; background: var(--surface-dark); &:focus { transform: none; } }
.site-header { position: sticky; top: 0; z-index: 10; background: var(--surface-nav); }
.site-header__topbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-m); min-height: 2.625rem; padding: .375rem 1rem; background: var(--surface-header); font-family: 'Roboto', sans-serif; font-size: 1.125rem; }
.site-header__service, .site-header__phone { display: flex; align-items: center; gap: .5rem; }
.site-header__phone { text-decoration: none; padding-inline: .75rem; border-inline: 1px solid #fff; white-space: nowrap; }
.site-header__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); width: min(58.75rem, calc(100% - 2 * var(--space-m))); margin-inline: auto; min-height: 5.125rem; }
.site-header__brand { display: block; flex: 0 1 17.875rem; & img { display: block; } }
.elams-navigation__nav { flex: 0 1 38rem; width: 38rem; margin-right: -1.25rem; }
.elams-navigation__item { flex: 1 1 auto; }
.elams-navigation__list { display: flex; align-items: stretch; min-height: 5rem; gap: 0; list-style: none; padding: 0; margin: 0; }
.elams-navigation__link { display: flex; align-items: center; justify-content: center; min-height: 5rem; height: 100%; padding: 0 .625rem; font-family: 'EB Garamond', serif; font-size: 1.25rem; font-weight: 600; text-decoration: none; &:hover { background: var(--surface-dark); } }
.elams-menu-toggle { display: none; }
 .hero { display: grid; align-items: center; justify-items: center; margin-top: -7.75rem; min-height: 50.8125rem; background: #b7ada4; }
.hero__video { grid-area: 1 / 1; width: 100%; height: 50.8125rem; object-fit: cover; }
.hero__logo { grid-area: 1 / 1; z-index: 1; display: grid; justify-items: center; gap: .75rem; width: 19rem; padding: .9375rem 1.125rem .625rem; background: rgb(0 0 0 / 48%); border-radius: 3.125rem 0 3.125rem 0; transform: translateY(1.4375rem); }
.hero__cabinet { width: 13.125rem; }
.hero__wordmark { width: 16.75rem; }
.introduction { background: var(--ink); }
 .introduction__heading { padding: 1.25rem var(--space-m) .6875rem; & h1 { max-width: 56.25rem; margin: auto; text-align: center; font-size: 3.125rem; line-height: 1.26; padding-bottom: .6875rem; border-bottom: 1px solid #ececec; } }
.introduction__grid { width: min(67.5rem, calc(100% - 2 * var(--space-m))); display: grid; grid-template-columns: minmax(0, 400fr) minmax(0, 670fr); align-items: center; gap: 2rem; padding-block: .6875rem 1.4375rem; }
.introduction__copy { padding: 1.1875rem 0 1.1875rem 1.8125rem; }
.introduction__gallery { min-width: 0; }
.elams-slider { display: grid; grid-template-columns: 3.125rem minmax(0, 1fr) 3.125rem; align-items: center; aspect-ratio: var(--elams-slider-aspect-ratio, 1600 / 1067); overflow: hidden; background: var(--ink); touch-action: pan-y; }
.elams-slider__image { grid-area: 1 / 1 / 2 / 4; width: 100%; height: 100%; min-height: 0; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.elams-slider__button { grid-row: 1; z-index: 1; display: grid; place-items: center; width: 100%; min-height: 5.25rem; border: 0; padding: 0; color: #fff; background: rgb(0 0 0 / 30%); cursor: pointer; & svg { width: 1.375rem; height: 2.25rem; } &:hover { background: rgb(0 0 0 / 50%); } }
.elams-slider__button--previous { grid-column: 1; }
.elams-slider__button--next { grid-column: 3; }
.elams-slider__status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.light-panel { padding: var(--space-m); color: var(--text-dark); background: var(--surface-light); border: 0; border-radius: var(--radius); }
 .craft-background { display: grid; }
.craft-background__image { grid-area: 1 / 1 / 3 / 2; align-self: start; height: 93.125rem; background: #c6ae9b url('/assets/721a95afad46681b2e99c88f.webp') center / cover no-repeat; }
.taste { grid-area: 1 / 1; z-index: 1; }
.taste__grid { display: grid; grid-template-columns: minmax(0, 590fr) minmax(0, 470fr); min-height: 60.1875rem; padding-block: 3.625rem 4.375rem; }
.taste__content { grid-column: 2; display: grid; align-content: start; gap: .625rem; }
.taste__heading { display: grid; gap: .75rem; text-align: center; font-size: 2.25rem; line-height: 1.1944; }
.guarantee { grid-area: 2 / 1; z-index: 1; padding-block: 2.8125rem 2.875rem; background: var(--ink); min-height: 44rem; }
.guarantee__grid { max-width: 58.75rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.guarantee-card { display: flex; flex-direction: column; }
.guarantee-card__image { width: 100%; aspect-ratio: 460 / 307; object-fit: cover; border: 3px solid #fff; border-radius: 1.25rem; }
.guarantee-card__heading { margin: .625rem .625rem 0; padding: .625rem; min-height: 3.75rem; text-align: center; background: var(--surface-light); color: var(--text-dark); border-radius: .9375rem; font-size: 1.875rem; line-height: 1.2; }
.guarantee-card__copy { padding: .625rem .9375rem 0; }
.about { background: #d93 url('/assets/f3153d74fec7bcaaea8098f5.webp') center / cover no-repeat; }
.about__grid { display: grid; grid-template-columns: minmax(0, 550fr) minmax(0, 510fr); min-height: 61.875rem; padding-block: 5.9375rem 6.6875rem; }
.about__content { display: grid; align-content: start; gap: .625rem; & h2 { text-align: center; font-size: 2.5rem; line-height: 1.2; } }
.about__portrait { display: none; }
 .contact { background: var(--ink); padding-block: 3.5rem 3.75rem; }
.contact__heading { font-family: 'EB Garamond', serif; font-size: 2.5rem; line-height: 1.5; text-align: center; margin-bottom: 2.9375rem; &::after { content: ''; display: block; width: 2.5rem; height: 3px; margin: 1.625rem auto 0; background: #fff; } }
.contact__grid { display: grid; grid-template-columns: minmax(0, 460fr) minmax(0, 450fr); gap: 1.5625rem; max-width: 58.75rem; margin-inline: auto; }
.contact__details { display: grid; align-content: start; gap: 1.125rem; }
.contact-detail { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 1.5rem; align-items: start; padding-left: .125rem; & h3 { font-family: 'EB Garamond', serif; font-size: 1.25rem; line-height: 1.2; } & p { font-size: 1.125rem; line-height: 1.2222; overflow-wrap: anywhere; margin-top: .25rem; } & a { text-decoration: none; &:hover { text-decoration: underline; } } }
.contact-form { display: grid; align-content: start; gap: .3125rem; font-family: 'Roboto', sans-serif; font-size: 1rem; }
.contact-form__field { display: grid; & label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } & input, & textarea { min-width: 0; width: 100%; min-height: 2.8125rem; padding: .5rem .9375rem; border: 2px solid rgb(255 255 255 / 90%); border-radius: .3125rem; color: #fff; background: rgb(125 125 125 / 30%); font-family: 'Roboto', sans-serif; font-size: 1rem; &::placeholder { color: #bdbdbd; opacity: 1; } &:focus-visible { outline-color: #eec789; } } & textarea { min-height: 9.375rem; resize: vertical; padding-top: .9375rem; } }
.contact-form__submit { justify-self: start; border: 1px solid #fff; border-radius: .625rem; padding: .75rem .9375rem; min-height: 3.125rem; color: #fff; background: #230e02; cursor: pointer; &:hover { background: #583c2b; } }
.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .75rem; min-height: 3.6875rem; padding: .5rem max(1.25rem, calc((100vw - 60rem) / 2)); background: #1e1d1d; font-size: .875rem; & img { display: block; } }
.mobile-call { display: none; }
@media (max-width: 59.9375rem) {
 :root { --header-offset: 7rem; }
 body { padding-bottom: 5.5rem; }
 .site-header { display: grid; grid-template-columns: minmax(0, 1fr) 4rem; background: var(--surface-header); }
 .site-header__topbar { grid-column: 1; min-width: 0; padding: .75rem 1rem; font-size: 1rem; }
 .site-header__service { line-height: 1.4; & img { flex: 0 0 1rem; } }
 .site-header__phone, .site-header__brand { display: none; }
 .site-header__row { display: contents; }
 .elams-menu-toggle { display: grid; grid-column: 2; grid-row: 1; place-self: center; grid-template-rows: 1fr; align-items: center; justify-items: center; width: 3.25rem; height: 3.25rem; padding: 0; border: 2px solid #fff; border-radius: .25rem; color: #fff; background: rgb(45 22 0 / 93%); cursor: pointer; }
 .elams-menu-toggle__line { grid-area: 1 / 1; width: 76%; height: .3rem; border-radius: 1rem; background: currentColor; transition: transform 320ms cubic-bezier(.4,0,.2,1), opacity 200ms; &:nth-child(1) { transform: translateY(-.75rem); } &:nth-child(3) { transform: translateY(.75rem); } }
 .elams-menu-toggle[aria-expanded='true'] { & .elams-menu-toggle__line:nth-child(1) { transform: rotate(45deg); } & .elams-menu-toggle__line:nth-child(2) { opacity: 0; transform: scaleX(0); } & .elams-menu-toggle__line:nth-child(3) { transform: rotate(-45deg); } }
 .elams-navigation__nav { width: auto; grid-column: 1 / -1; margin: 0 .5rem .5rem; padding: .5rem; background: rgb(64 40 14 / 96%); border: 1px solid #dbc7b1; border-radius: .2rem; max-height: 65dvh; overflow-y: auto; }
 .elams-navigation__list { flex-direction: column; gap: 0; }
 .elams-navigation__item { width: 100%; }
 .elams-navigation__link { font-size: clamp(1.25rem, .1rem + 5.85vw, 3.75rem); min-height: max(2.75rem, 11.6667vw); padding-block: .4rem; }
 .hero { margin-top: 0; min-height: 0; }
 .hero__video { display: block; height: 66.6667vw; }
  .hero__logo { width: 81.6667%; min-height: 45.8333vw; align-content: center; padding: 2.0833vw; gap: 2.5vw; border-radius: 10.4167vw 0 10.4167vw 0; transform: none; }
 .hero__cabinet { width: 75%; }
 .hero__wordmark { width: 95%; }
 .content-width { width: calc(100% - 4.1667vw); }
 .site-header__topbar { padding: .4375rem .25rem .4375rem .75rem; font-size: clamp(1rem, .1rem + 4.8vw, 2.5rem); }
 .site-header__service { line-height: 1.24; text-align: center; }
 .introduction__heading { padding: 2.0833vw 2.0833vw 2.9167vw; & h1 { font-size: clamp(2rem, .1rem + 9vw, 4.5rem); line-height: 1.2444; padding-bottom: 5.4167vw; } }
 .introduction__grid { width: 100%; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 2.0833vw; padding-block: 2.0833vw 0; }
 .introduction__copy { padding: 1.0417vw 4.1667vw 4.1667vw; font-size: clamp(1.125rem, .1rem + 4.8vw, 2.5rem); line-height: 1.52; }
 .prose { & p + p { margin-top: 2.5vw; } }
 .light-panel { padding: 4.1667vw; border-radius: 1.25rem; }
 .craft-background__image { grid-area: 1 / 1; height: auto; align-self: stretch; background-image: url('/assets/8cd6e3bab55f46134da8eeac.webp'); }
 .taste__grid { grid-template-columns: minmax(0, 1fr); padding: 4.1667vw 2.0833vw 20.8333vw; min-height: 0; }
 .taste__content { grid-column: 1; gap: 2.0833vw; }
 .taste__heading { min-height: 33.9583vw; font-size: clamp(2rem, .1rem + 9vw, 4.5rem); line-height: 1.2; gap: 2.5vw; }
 .taste .prose { min-height: 242.0833vw; }
 .about .prose { min-height: 286.4583vw; }
 .taste .prose, .about .prose { font-size: clamp(1.125rem, .1rem + 5.4262vw, 2.8rem); line-height: 1.5; }
 .guarantee { min-height: 0; padding-block: 4.1667vw; }
 .guarantee__grid { grid-template-columns: minmax(0, 1fr); gap: 6.6667vw; padding-inline: 2.0833vw; }
 .guarantee-card__image { aspect-ratio: 440 / 294; }
 .guarantee-card__heading { margin: 2.0833vw 0 0; padding: 2.0833vw; min-height: 0; font-size: clamp(1.375rem, .1rem + 5.8438vw, 3rem); }
 .guarantee-card__copy { margin-top: 2.0833vw; padding: 0 2.0833vw; font-size: clamp(1.125rem, .1rem + 4.1762vw, 2.2rem); line-height: 1.5; }
 .guarantee-card:first-child .guarantee-card__copy { min-height: 51.875vw; }
 .guarantee-card:last-child .guarantee-card__copy { min-height: 45.2083vw; }
 .about { background-image: url('/assets/fce6b60042c4e5609f69bec3.webp'); }
 .about__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 5.4167vw 2.0833vw 7.5vw; }
 .about__portrait { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border: 3px solid #fff; border-radius: 1.25rem; }
 .about__content { gap: 2.0833vw; & h2 { font-size: clamp(2rem, .1rem + 10vw, 5rem); } }
 .contact { padding-block: 2.0833vw 3.3333vw; }
 .contact__heading { font-size: clamp(2.5rem, .1rem + 12vw, 6rem); line-height: 1.5; margin-bottom: 2.0833vw; &::after { display: none; } }
 .contact__grid { grid-template-columns: minmax(0, 1fr); width: calc(100% - 4.1667vw); max-width: none; gap: 6.6667vw; }
 .contact-form { order: -1; gap: 1.0417vw; }
 .contact-form__field { & input, & textarea { font-size: clamp(1rem, .1rem + 3vw, 1.75rem); } & input { min-height: max(2.75rem, 9.5833vw); } & textarea { min-height: 42.0833vw; } }
 .contact-form__submit { justify-self: stretch; min-height: max(3rem, 12.5vw); }
 .contact__details { gap: 5.8333vw; }
 .contact-detail { grid-template-columns: 15vw minmax(0, 1fr); gap: 3.75vw; & h3 { font-size: clamp(1rem, .1rem + 3.75vw, 2rem); } & p { font-size: clamp(.95rem, .1rem + 3.4vw, 1.8rem); } }
 .site-footer { justify-content: center; flex-direction: column; padding: 3.3333vw; font-size: clamp(1rem, .1rem + 4vw, 2rem); }
 .mobile-call { display: flex; position: fixed; inset: auto 0 0; z-index: 11; background: rgb(45 22 0 / 98%); padding: 2.0833vw 7.0833vw calc(5.2083vw + env(safe-area-inset-bottom)); font-size: clamp(1.125rem, .1rem + 4.8vw, 2.5rem); line-height: 1.3; & a { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: max(2.75rem, 13.5417vw); padding: .5rem; border: 2px solid #fff; border-radius: .5rem; background: #583c2b; text-decoration: none; } }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .elams-menu-toggle__line { transition: none; } }
