:root {
  --ink: #070707;
  --cream: #f2eee5;
  --paper: #fbf8f1;
  --sage: #7b806b;
  --clay: #b86f4c;
  --line: rgba(24, 33, 28, 0.18);
  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;
}

* { 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;
}
body, a, button, summary { -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }
svg { width: 1.25rem; height: 1.25rem; }

.shell { width: min(100% - 56px, 1360px); margin-inline: auto; }
.section { padding-block: 120px; }

.hero {
  position: relative;
  min-height: 820px;
  height: 100svh;
  color: #fff;
  overflow: hidden;
}
.hero-image, .hero-shade { position: absolute; inset: 0; height: 100%; }
.hero-image { object-fit: cover; object-position: center 56%; scale: 1.015; }
.hero-shade {
  background:
    linear-gradient(90deg, rgba(14, 22, 17, 0.7) 0%, rgba(14, 22, 17, 0.12) 68%),
    linear-gradient(0deg, rgba(14, 22, 17, 0.55) 0%, transparent 46%);
}
.site-header {
  position: relative;
  z-index: 4;
  height: 108px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}
.brand { display: inline-flex; align-items: center; gap: 13px; width: max-content; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 39px;
  aspect-ratio: 1;
  border: 1px solid currentColor;
  border-radius: 50% 50% 46% 54%;
  font: italic 24px/1 var(--serif);
}
.brand-name { font-size: 15px; font-weight: 700; letter-spacing: 0.2em; }
.desktop-nav { display: flex; gap: 40px; font-size: 13px; }
.desktop-nav a { position: relative; padding-block: 8px; }
.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 2px;
  height: 1px;
  background: currentColor;
  transition: right 220ms ease;
}
.desktop-nav a:hover::after { right: 0; }
.nav-cta {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
}
.nav-cta svg, .contact-button svg { transition: transform 200ms ease; }
.nav-cta:hover svg, .contact-button:hover svg { transform: translateX(5px); }
.mobile-menu { display: none; }
.hero-content {
  position: relative;
  z-index: 2;
  min-height: calc(100% - 108px);
  padding: 112px 0 66px;
  display: flex;
  flex-direction: column;
}
.eyebrow, .kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.eyebrow.light { color: rgba(255, 255, 255, 0.7); }
.hero h1, .intro h2, .expertise h2, .collection-heading h2, .process h2, .contact h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.055em;
}
.hero h1 {
  max-width: 910px;
  margin-top: 25px;
  font-size: clamp(72px, 8.25vw, 132px);
  line-height: 0.83;
}
h1 em, h2 em { font-weight: 400; }
.hero h1 em { color: #ded4bd; }
.hero-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-top: auto;
}
.hero-bottom > p {
  width: min(100%, 470px);
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  line-height: 1.65;
}
.round-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  width: 156px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: color 250ms ease, background 250ms ease;
}
.round-link:hover { color: var(--ink); background: var(--cream); }
.hero-index {
  position: absolute;
  right: 18px;
  top: 54%;
  z-index: 2;
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 9px;
  letter-spacing: 0.24em;
  writing-mode: vertical-rl;
}

.section-label {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.section-label span, .section-label p {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.section-label span { color: var(--clay); }
.intro { display: grid; grid-template-columns: 220px 1fr; gap: 80px; }
.intro .section-label { display: block; border-bottom: 0; }
.intro .section-label p { margin-top: 10px; }
.intro-copy { padding-right: 3vw; }
.kicker { color: var(--sage); }
.intro h2 {
  max-width: 980px;
  margin-top: 25px;
  font-size: clamp(52px, 6vw, 90px);
  line-height: 0.98;
}
.intro h2 em, .collection-heading h2 em, .process h2 em { color: var(--clay); }
.intro-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  max-width: 780px;
  margin: 64px 0 0 auto;
}
.intro-details p { margin: 0; color: #59615b; font-size: 15px; line-height: 1.8; }

.expertise { padding-block: 110px; background: var(--ink); color: #f5f0e7; }
.expertise-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 8vw;
  align-items: center;
}
.craft-visual { position: relative; min-height: 760px; }
.craft-visual img {
  width: 88%;
  height: 760px;
  object-fit: cover;
  filter: saturate(0.72) contrast(1.04);
}
.image-note {
  position: absolute;
  right: 0;
  bottom: 62px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 220px;
  padding: 28px;
  background: var(--clay);
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.05;
}
.light-label { border-color: rgba(255, 255, 255, 0.18); margin-bottom: 76px; }
.expertise h2 {
  margin: 24px 0 60px;
  font-size: clamp(58px, 6vw, 91px);
  line-height: 0.92;
}
.expertise h2 em { color: #c9bfa8; }
.services { border-top: 1px solid rgba(255, 255, 255, 0.2); }
.service {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 20px;
  padding: 26px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.service > span { color: #c19a7c; font-size: 10px; letter-spacing: 0.15em; }
.service h3, .service p { margin: 0; }
.service h3 { font: 400 24px/1.2 var(--serif); }
.service p {
  max-width: 510px;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
  line-height: 1.7;
}

.collection-heading {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 70px;
  align-items: end;
  margin: 80px 0 68px;
}
.collection-heading h2 {
  margin-top: 24px;
  font-size: clamp(56px, 6vw, 92px);
  line-height: 0.94;
}
.collection-heading > p { margin: 0 0 8px; color: #59615b; font-size: 14px; line-height: 1.8; }
.collection-stage { position: relative; min-height: 650px; overflow: hidden; }
.collection-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(14, 22, 17, 0.48), transparent 42%);
}
.collection-stage img {
  height: 650px;
  object-fit: cover;
  transition: scale 750ms cubic-bezier(.2,.75,.25,1);
}
.collection-stage:hover img { scale: 1.025; }
.collection-stage p, .collection-stage span {
  position: absolute;
  z-index: 2;
  bottom: 32px;
  margin: 0;
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.collection-stage p { left: 34px; }
.collection-stage span { right: 34px; }
.category-list { margin-top: 52px; border-top: 1px solid var(--line); }
.category-list > div {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 24px 8px;
  border-bottom: 1px solid var(--line);
  transition: color 200ms ease, padding 200ms ease;
}
.category-list > div:hover { color: var(--clay); padding-inline: 20px; }
.category-list span { font-size: 10px; color: var(--sage); }
.category-list h3 { margin: 0; font: 400 clamp(27px, 3vw, 42px)/1 var(--serif); }

.process { padding-top: 32px; background: var(--cream); }
.process-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9vw;
  padding-top: 88px;
}
.process h2 { font-size: clamp(46px, 5vw, 74px); line-height: 1; }
.steps article {
  position: relative;
  display: grid;
  grid-template-columns: 58px 150px 1fr;
  gap: 18px;
  padding: 30px 0;
  border-top: 1px solid var(--line);
}
.steps article:last-child { border-bottom: 1px solid var(--line); }
.steps span { color: var(--clay); font-size: 10px; }
.steps h3, .steps p { margin: 0; }
.steps h3 { font: 400 21px/1.3 var(--serif); }
.steps p { color: #5e665f; font-size: 13px; line-height: 1.65; }

.contact {
  position: relative;
  overflow: hidden;
  padding: 145px 0 36px;
  background: #070707;
  color: #f5f0e7;
}
.contact-arc {
  position: absolute;
  width: 760px;
  height: 760px;
  left: 50%;
  top: -350px;
  transform: translateX(-50%);
  border: 1px solid rgba(236, 225, 206, 0.17);
  border-radius: 50%;
  box-shadow: 0 0 0 110px rgba(236, 225, 206, 0.025), 0 0 0 220px rgba(236, 225, 206, 0.018);
}
.contact-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.contact h2 {
  margin-top: 25px;
  font-size: clamp(68px, 8vw, 118px);
  line-height: 0.87;
}
.contact h2 em { color: #d6c7a9; }
.contact-copy {
  max-width: 540px;
  margin: 45px 0 36px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  line-height: 1.75;
}
.contact-button {
  display: inline-flex;
  align-items: center;
  gap: 38px;
  padding: 18px 24px 18px 27px;
  background: var(--clay);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.site-footer {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 1fr 0.7fr 1fr;
  gap: 40px;
  align-items: end;
  margin-top: 150px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
}
.footer-brand { color: #fff; }
.site-footer p { margin: 5px 0; }
.site-footer > div:nth-of-type(2) { display: flex; flex-direction: column; gap: 6px; }
.site-footer a:hover { color: #fff; }
.copyright { justify-self: end; }

@media (max-width: 1050px) {
  .desktop-nav, .nav-cta { display: none; }
  .site-header { grid-template-columns: 1fr auto; }
  .mobile-menu { position: relative; display: block; }
  .mobile-menu summary {
    display: flex;
    width: 44px;
    height: 44px;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    list-style: none;
  }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu summary span { width: 27px; height: 1px; margin-left: auto; background: #fff; }
  .mobile-menu nav {
    position: absolute;
    top: 58px;
    right: 0;
    display: grid;
    width: 210px;
    padding: 16px;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 16px 48px rgba(0,0,0,.18);
  }
  .mobile-menu nav a { padding: 13px; border-bottom: 1px solid var(--line); }
  .expertise-grid { grid-template-columns: 1fr; }
  .craft-visual { min-height: 590px; }
  .craft-visual img { width: 94%; height: 590px; }
  .light-label { margin: 10px 0 64px; }
  .site-footer { grid-template-columns: 1fr 1fr; }
  .copyright { justify-self: start; }
}

@media (max-width: 760px) {
  .shell { width: min(100% - 34px, 1360px); }
  .section { padding-block: 82px; }
  .hero { min-height: 720px; }
  .site-header { height: 86px; }
  .brand-name { font-size: 13px; }
  .hero-content { min-height: calc(100% - 86px); padding: 82px 0 32px; }
  .hero h1 { margin-top: 19px; font-size: clamp(54px, 17vw, 77px); line-height: 0.88; }
  .hero-bottom { align-items: flex-end; gap: 20px; }
  .hero-bottom > p { max-width: 265px; font-size: 13px; }
  .round-link { flex: 0 0 90px; width: 90px; gap: 8px; font-size: 8px; }
  .round-link svg { width: 14px; }
  .hero-index { display: none; }
  .intro { display: block; }
  .intro .section-label { display: flex; margin-bottom: 54px; border-bottom: 1px solid var(--line); }
  .intro .section-label p { margin: 0; }
  .intro h2, .collection-heading h2 { font-size: 49px; }
  .intro-details { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
  .expertise { padding-block: 72px; }
  .craft-visual { min-height: 455px; }
  .craft-visual img { width: 92%; height: 455px; }
  .image-note { bottom: 30px; width: 175px; padding: 20px; font-size: 20px; }
  .expertise h2 { font-size: 54px; }
  .service { grid-template-columns: 38px 1fr; }
  .collection-heading { grid-template-columns: 1fr; gap: 30px; margin: 54px 0 44px; }
  .collection-stage, .collection-stage img { min-height: 470px; height: 470px; }
  .category-list > div { grid-template-columns: 40px 1fr auto; }
  .process-grid { grid-template-columns: 1fr; gap: 55px; padding-top: 58px; }
  .process h2 { font-size: 46px; }
  .steps article { grid-template-columns: 35px 1fr; }
  .steps p { grid-column: 2; }
  .contact { padding-top: 110px; }
  .contact h2 { font-size: clamp(57px, 18vw, 80px); }
  .contact-copy { max-width: 330px; }
  .site-footer { grid-template-columns: 1fr; gap: 22px; margin-top: 110px; }
  .copyright { margin-top: 10px !important; }
}

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