:root {
  --dark: #1c201e;
  --paper: #f0eee8;
  --sage: #b6b9a9;
  --rust: #a66042;
  --muted: #6d736c;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--dark); font: 14px/1.6 'DM Sans', Arial, sans-serif; }
a { -webkit-tap-highlight-color: transparent; }
.concept { min-height: 29px; padding: 6px 4.4%; display: flex; align-items: center; background: #e8e2d7; color: #706450; font-size: 8px; letter-spacing: 1.05px; text-transform: uppercase; }
.nav { height: 78px; padding: 0 4.4%; position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; background: var(--paper); }
.logo { display: flex; align-items: center; gap: 10px; color: inherit; font-size: 13px; font-weight: 600; letter-spacing: 1.3px; text-decoration: none; }
.logo small { display: block; margin-top: 3px; color: #7c8279; font-size: 7px; letter-spacing: 1.4px; }
.monogram { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid #7d8577; border-radius: 50%; color: #47534a; font: italic 16px Georgia, serif; }
.nav nav { display: flex; gap: 33px; }
.nav nav a, .navPhone { color: #39413b; font-size: 11px; text-decoration: none; }
.nav nav a { transition: color .2s ease; }
.nav nav a:hover, .map:hover { color: var(--rust); }
.navPhone { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; }
.navPhone .arrow, .button span { color: var(--rust); }
.phoneMobile { display: none; }
.menu { display: none; }

.hero { height: clamp(610px, 56vw, 760px); position: relative; overflow: hidden; background: #202421; color: #f4f1e9; }
.heroPhoto { position: absolute; inset: 0 0 0 27%; background: url('assets/detailing-hero-original.png') center 52%/cover no-repeat; opacity: .88; mix-blend-mode: screen; }
.heroShade { position: absolute; inset: 0; background: linear-gradient(90deg, #1c201e 0%, #1c201e 28%, #1c201ee8 42%, #1c201e45 73%, #1c201e1c 100%), linear-gradient(0deg, #1c201e75, transparent 28%); }
.heroCopy { position: absolute; top: 50%; left: 12%; max-width: 730px; width: min(730px, 76%); transform: translateY(-50%); }
.overline, .sectionNo { margin: 0; font-size: 9px; letter-spacing: 1.55px; }
.overline { color: #c2b39c; }
.hero h1 { margin: 25px 0 19px; font: 500 clamp(48px, 5vw, 70px)/1.12 'Playfair Display', Georgia, serif; letter-spacing: -2px; }
.hero h1 span { color: #c2b39c; }
.intro { max-width: 370px; margin: 0 0 28px; color: #deded7; font-size: 13px; line-height: 1.8; }
.button { min-height: 47px; padding: 0 17px; display: inline-flex; align-items: center; justify-content: space-between; gap: 35px; background: #e7e1d4; color: #252a26; font-size: 10px; font-weight: 600; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.button:hover { background: #fffaf0; transform: translateY(-1px); }
.vertical { position: absolute; top: 50%; right: 4.4%; color: #ded8cb; font-size: 8px; letter-spacing: 2px; writing-mode: vertical-rl; }

.statement { padding: 112px 13% 120px; display: grid; grid-template-columns: 1fr 2.3fr .5fr; gap: 40px; align-items: start; }
.sectionNo { color: #88775e; }
.statement h2, .services h2, .visit h2 { margin: 0 0 22px; font: 500 clamp(38px, 4.8vw, 57px)/1.18 'Playfair Display', Georgia, serif; letter-spacing: -1.2px; }
.statementCopy p, .servicesHead p { max-width: 440px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.9; }
.stamp { width: 72px; height: 72px; display: grid; align-content: center; border: 1px solid #abb1a4; border-radius: 50%; color: #708071; text-align: center; font: italic 19px/1 Georgia, serif; }
.stamp span { font-size: 12px; }

.services { padding: 90px 13% 105px; display: grid; grid-template-columns: 1fr 2.3fr; gap: 34px; background: #e4e4da; }
.servicesHead h2 { margin-bottom: 18px; font-size: clamp(43px, 4.5vw, 55px); }
.servicesHead p { max-width: 400px; }
.serviceRows { grid-column: 2; }
.serviceRow { min-height: 126px; padding: 22px 0; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 15px; align-items: center; border-top: 1px solid #c9ccc0; }
.serviceRow:last-child { border-bottom: 1px solid #c9ccc0; }
.serviceNo { align-self: start; padding-top: 7px; color: #968366; font-size: 9px; }
.serviceInfo h3 { margin: 0 0 7px; font: 500 clamp(20px, 2.2vw, 26px)/1.3 'Playfair Display', Georgia, serif; }
.serviceInfo p { margin: 0; color: #70776f; font-size: 10px; line-height: 1.7; }
.serviceContact { align-self: center; display: inline-flex; gap: 14px; align-items: center; color: #39413b; font-size: 10px; text-decoration: none; white-space: nowrap; }
.serviceContact span { color: var(--rust); }
.serviceContact:hover { color: var(--rust); }

.visit { min-height: 470px; display: grid; grid-template-columns: 1.1fr .9fr; background: #272d29; color: #eeeae1; }
.visitImage { background: url('assets/detailing-hero-original.png') 65% center/cover; filter: saturate(.55); opacity: .75; }
.visitCopy { padding: 74px 12% 60px 11%; }
.visitCopy .sectionNo { color: #c4ad8e; }
.visit h2 { margin-top: 32px; }
.visitCopy .address { margin: 25px 0 0; color: #ddd8ce; font-size: 12px; }
.actions { margin-top: 26px; display: flex; align-items: center; gap: 22px; }
.button.light { background: #e7e1d4; }
.map { padding-bottom: 4px; border-bottom: 1px solid #72736c; color: #dad6cc; font-size: 10px; text-decoration: none; transition: color .2s ease; }
footer { min-height: 60px; padding: 18px 4.4%; display: flex; align-items: center; justify-content: space-between; color: #777e76; font-size: 8px; letter-spacing: .8px; }
footer a { color: inherit; text-decoration: none; }

@media (max-width: 760px) {
  .concept { min-height: 29px; padding: 6px 17px; font-size: 7px; }
  .nav { height: 66px; padding: 0 17px; }
  .nav nav { position: absolute; z-index: 3; top: calc(100% - 1px); left: 0; right: 0; padding: 20px 22px 23px; display: none; flex-direction: column; gap: 15px; background: var(--paper); box-shadow: 0 12px 18px #1c201e12; }
  .nav nav.open { display: flex; }
  .nav nav a { font-size: 13px; }
  .navPhone { margin-left: auto; margin-right: 15px; font-size: 11px; }
  .phoneDesktop { display: none; }
  .phoneMobile { display: inline; }
  .menu { width: 32px; height: 36px; padding: 0; display: grid; place-items: center; border: 0; background: transparent; color: #39413b; cursor: pointer; font-size: 19px; }
  .hero { height: 670px; min-height: 0; }
  .heroPhoto { inset: 0 0 0 5%; background-position: 59% center; }
  .heroShade { background: linear-gradient(90deg, #1c201ee8 0%, #1c201ea8 54%, #1c201e55 100%), linear-gradient(0deg, #1c201e8c, transparent 48%); }
  .heroCopy { top: 46%; left: 8%; right: 7%; max-width: none; }
  .overline { max-width: 300px; font-size: 8px; line-height: 1.7; }
  .hero h1 { margin: 21px 0 17px; font-size: clamp(34px, 8.8vw, 45px); line-height: 1.12; letter-spacing: -1.2px; }
  .intro { max-width: 330px; margin-bottom: 24px; font-size: 12px; line-height: 1.75; }
  .button { min-height: 46px; gap: 25px; }
  .vertical { right: 4%; font-size: 7px; letter-spacing: 1.5px; }
  .statement { padding: 72px 8% 78px; grid-template-columns: 1fr; gap: 25px; }
  .statement h2 { margin-bottom: 17px; font-size: 46px; }
  .statementCopy p { max-width: 390px; font-size: 12px; }
  .stamp { position: absolute; right: 9%; margin-top: 7px; width: 59px; height: 59px; font-size: 16px; }
  .services { padding: 66px 8% 75px; grid-template-columns: 1fr; gap: 22px; }
  .servicesHead h2 { margin-bottom: 14px; font-size: 43px; }
  .servicesHead p { max-width: 360px; }
  .serviceRows { grid-column: auto; margin-top: 8px; }
  .serviceRow { min-height: 122px; padding: 18px 0; grid-template-columns: 25px minmax(0, 1fr); gap: 10px; }
  .serviceNo { grid-row: 1 / span 2; }
  .serviceInfo h3 { font-size: 21px; }
  .serviceInfo p { max-width: 270px; font-size: 10px; }
  .serviceContact { grid-column: 2; justify-self: start; gap: 9px; margin-top: 5px; font-size: 10px; }
  .visit { grid-template-columns: 1fr; }
  .visitImage { min-height: 250px; background-position: center 56%; }
  .visitCopy { padding: 48px 8% 56px; }
  .visit h2 { margin: 22px 0 17px; font-size: 46px; }
  .visitCopy .address { max-width: 320px; margin-top: 0; font-size: 12px; line-height: 1.8; }
  .actions { margin-top: 24px; gap: 17px; }
  footer { min-height: 58px; padding: 17px 8%; gap: 12px; }
}

@media (max-width: 360px) {
  .nav { padding: 0 13px; }
  .logo { gap: 7px; font-size: 11px; }
  .monogram { width: 31px; height: 31px; }
  .navPhone { margin-right: 8px; font-size: 10px; }
  .hero { height: 640px; }
  .heroCopy { left: 7%; right: 6%; }
  .hero h1 { font-size: clamp(30px, 9.5vw, 34px); }
}

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