:root { --ink: #111; --muted: #6f6f6b; --line: #deded9; --surface: #f3f3f0; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; font-family: Inter, system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
.eyebrow { color: #8b8b86; font-size: 10px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.section-number { color: #aaa; font-family: "Instrument Serif", serif; font-size: 24px; }

.about-header { min-height: 72px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 30px; padding: 0 5vw; border-bottom: 1px solid var(--line); background: #fff; }
.about-logo { display: inline-flex; align-items: center; gap: 9px; }
.about-logo .brand-mark { width: 28px; height: 35px; object-fit: contain; }
.about-logo .brand-wordmark { width: 108px; height: auto; object-fit: contain; }
.about-header nav { display: flex; justify-content: center; gap: 28px; color: #555; font-size: 12px; }
.header-action { padding: 11px 17px; border-radius: 999px; color: #fff; background: #111; font-size: 12px; font-weight: 600; }

.about-hero { position: relative; min-height: 720px; overflow: hidden; color: #fff; }
.about-hero > img { position: absolute; inset: 0; }
.about-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.76), rgba(0,0,0,.38) 54%, rgba(0,0,0,.08)); }
.about-hero-content { position: relative; z-index: 1; min-height: 720px; display: flex; flex-direction: column; justify-content: flex-end; padding: 72px 5vw 80px; }
.breadcrumb { display: flex; gap: 8px; margin-bottom: auto; color: rgba(255,255,255,.68); font-size: 11px; }
.breadcrumb strong { color: #fff; font-weight: 500; }
.about-hero .eyebrow { color: rgba(255,255,255,.72); }
.about-hero h1 { max-width: 1050px; margin: 16px 0 0; font-size: clamp(62px, 8.5vw, 128px); font-weight: 500; line-height: .83; letter-spacing: -.055em; }
.about-hero h1 em, .journey-content h2 em, .about-cta h2 em { font-family: "Instrument Serif", serif; font-weight: 400; }
.about-hero p { max-width: 590px; margin: 34px 0 0 auto; color: rgba(255,255,255,.82); font-size: 14px; line-height: 1.8; }

.story-section, .values-section { width: min(1380px, calc(100% - 48px)); margin: 0 auto; padding: 120px 0; }
.story-heading, .values-title { display: grid; grid-template-columns: 90px minmax(0, 1fr); border-bottom: 1px solid var(--line); padding-bottom: 64px; }
.story-heading h2, .values-title h2 { max-width: 980px; margin: 16px 0 0; font-size: clamp(42px, 5.5vw, 78px); font-weight: 500; line-height: 1.02; letter-spacing: -.04em; }
.story-copy { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(60px, 10vw, 160px); padding: 70px 0 0 90px; }
.story-copy p { margin: 0; color: #666; font-size: 14px; line-height: 1.9; }
.story-copy .story-lead { color: #222; font-family: "Instrument Serif", serif; font-size: clamp(27px, 3vw, 42px); line-height: 1.25; }
.story-copy > div { display: grid; gap: 22px; align-content: start; }

.about-gallery { display: grid; grid-template-columns: 1.05fr .75fr; grid-template-rows: 390px 310px; gap: 18px; padding: 0 5vw 130px; }
.about-gallery figure { position: relative; overflow: hidden; margin: 0; background: #ddd; }
.gallery-store { grid-row: 1 / 3; }
.about-gallery figcaption { position: absolute; inset: auto 18px 18px; width: max-content; padding: 9px 11px; color: #fff; background: rgba(0,0,0,.72); font-size: 10px; }
.gallery-quote { display: flex; flex-direction: column; justify-content: space-between; padding: 42px; background: #171717; color: #fff; }
.gallery-quote span { color: #888; font-size: 10px; text-transform: uppercase; letter-spacing: .13em; }
.gallery-quote blockquote { max-width: 620px; margin: 0; font-family: "Instrument Serif", serif; font-size: clamp(30px, 3.5vw, 52px); line-height: 1.12; }

.values-section { padding-top: 0; }
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.values-grid article { min-height: 330px; padding: 34px 28px; border-right: 1px solid var(--line); }
.values-grid article:last-child { border-right: 0; }
.values-grid article > span { color: #aaa; font-size: 10px; }
.values-grid svg { display: block; width: 30px; height: 30px; margin: 60px 0 32px; stroke-width: 1.35; }
.values-grid h3 { margin: 0 0 13px; font-size: 17px; font-weight: 500; }
.values-grid p { margin: 0; color: #777; font-size: 12px; line-height: 1.75; }

.journey-section { display: grid; grid-template-columns: 1fr 1fr; min-height: 760px; background: var(--surface); }
.journey-image { min-height: 760px; }
.journey-content { padding: clamp(70px, 8vw, 125px); }
.journey-content h2 { margin: 18px 0 62px; font-size: clamp(46px, 5vw, 78px); font-weight: 500; line-height: .98; letter-spacing: -.045em; }
.timeline { display: grid; }
.timeline article { display: grid; grid-template-columns: 95px 1fr; gap: 25px; padding: 25px 0; border-top: 1px solid #d4d4cf; }
.timeline strong { font-family: "Instrument Serif", serif; font-size: 25px; font-weight: 400; }
.timeline h3 { margin: 2px 0 8px; font-size: 14px; font-weight: 600; }
.timeline p { margin: 0; color: #74746f; font-size: 12px; line-height: 1.7; }

.about-services { display: grid; grid-template-columns: repeat(4, 1fr); padding: 75px 5vw; }
.about-services article { padding: 10px 30px; border-right: 1px solid var(--line); }
.about-services article:first-child { padding-left: 0; }
.about-services article:last-child { border-right: 0; }
.about-services strong { display: block; margin-bottom: 9px; font-family: "Instrument Serif", serif; font-size: 34px; font-weight: 400; }
.about-services span { color: #777; font-size: 11px; }

.about-cta { padding: 110px 5vw 125px; color: #fff; background: #111; text-align: center; }
.about-cta .eyebrow { color: #777; }
.about-cta h2 { max-width: 1100px; margin: 18px auto 28px; font-size: clamp(48px, 7vw, 102px); font-weight: 500; line-height: .92; letter-spacing: -.05em; }
.about-cta p { color: #999; font-size: 12px; }
.about-cta > div { display: flex; justify-content: center; gap: 12px; margin-top: 38px; }
.about-cta a { display: inline-flex; align-items: center; gap: 8px; padding: 14px 20px; border: 1px solid #444; font-size: 12px; }
.about-cta a:first-child { color: #111; background: #fff; border-color: #fff; }
.about-cta svg { width: 15px; }

@media (max-width: 900px) {
  .story-copy { grid-template-columns: 1fr; padding-left: 90px; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .values-grid article:nth-child(2) { border-right: 0; }
  .values-grid article { border-bottom: 1px solid var(--line); }
  .journey-section { grid-template-columns: 1fr; }
  .journey-image { min-height: 560px; }
  .about-services { grid-template-columns: repeat(2, 1fr); gap: 35px 0; }
}

@media (max-width: 600px) {
  .about-header { grid-template-columns: 1fr auto; min-height: 64px; padding: 0 16px; }
  .about-header nav { display: none; }
  .header-action { padding: 10px 13px; }
  .about-hero, .about-hero-content { min-height: 610px; }
  .about-hero-content { padding: 40px 20px 50px; }
  .about-hero h1 { font-size: 57px; }
  .about-hero p { margin-top: 28px; }
  .story-section, .values-section { width: calc(100% - 40px); padding: 80px 0; }
  .story-heading, .values-title { grid-template-columns: 1fr; gap: 20px; padding-bottom: 45px; }
  .story-heading h2, .values-title h2 { font-size: 40px; }
  .story-copy { grid-template-columns: 1fr; gap: 34px; padding: 45px 0 0; }
  .about-gallery { grid-template-columns: 1fr; grid-template-rows: 500px 330px auto; padding: 0 20px 90px; }
  .gallery-store { grid-row: auto; }
  .gallery-quote { min-height: 310px; padding: 30px; }
  .values-grid { grid-template-columns: 1fr; }
  .values-grid article { min-height: 280px; border-right: 0; }
  .journey-image { min-height: 440px; }
  .journey-content { padding: 70px 20px; }
  .timeline article { grid-template-columns: 75px 1fr; }
  .about-services { grid-template-columns: 1fr 1fr; padding: 55px 20px; }
  .about-services article { padding: 12px; }
  .about-services article:nth-child(2) { border-right: 0; }
  .about-cta { padding: 85px 20px 95px; }
  .about-cta h2 { font-size: 50px; }
  .about-cta > div { flex-direction: column; align-items: stretch; }
  .about-cta a { justify-content: center; }
}