:root {
  --ink: #101010;
  --paper: #fff;
  --gray: #c4c4c4;
  --line: #494949;
}

html { scroll-behavior: smooth; }
body { background: var(--ink); color: var(--paper); font-family: system-ui, sans-serif; }
.container { padding-inline: max(20px, 3vw); }
a { color: inherit; text-underline-offset: .24em; }
a:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.header { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: 12px; border-bottom: 1px solid var(--line); }
.header nav { display: none; }
.wordmark { display: flex; align-items: center; gap: 8px; font-size: .73rem; font-weight: 800; letter-spacing: .08em; text-decoration: none; }
.wordmark img { border-radius: 50%; }
.demo-tag { padding: 6px 9px; border: 1px solid #787878; border-radius: 3px; color: #e0e0e0; font-size: .66rem; text-transform: uppercase; letter-spacing: .09em; }
.banner-section { padding-block: clamp(56px, 8vw, 110px); }
.eyebrow, .index, figcaption { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; }
.eyebrow span { width: 7px; height: 7px; background: currentColor; }
h1, h2 { font-weight: 850; letter-spacing: -.085em; line-height: .93; text-wrap: balance; }
h1 { font-size: clamp(3.05rem, 9.9vw, 8.4rem); margin: 0 0 20px; }
h2 { font-size: clamp(2.7rem, 6.3vw, 6rem); margin: 0 0 24px; }
.hero-copy { color: var(--gray); max-width: 34ch; font-size: clamp(1rem, 2vw, 1.3rem); margin-bottom: 24px; }
.action { display: inline-flex; gap: 15px; justify-content: space-between; align-items: center; min-height: 48px; border: 1px solid #777; padding: 9px 15px; text-decoration: none; font-weight: 700; font-size: .9rem; }
.action:hover { background: #303030; color: white; }
.action--light { border-color: white; background: white; color: var(--ink); }
.action--light:hover { background: #ddd; color: var(--ink); }
.studio-print { position: relative; display: grid; place-items: center; min-height: clamp(210px, 31vw, 370px); margin: 0; padding: 20px 20px 42px; background: white; color: var(--ink); }
.studio-print img { display: block; width: min(70%, 290px); height: auto; }
.studio-print figcaption { position: absolute; inset: auto 16px 15px; display: flex; justify-content: space-between; gap: 8px; }
.corner { position: absolute; width: 15px; height: 15px; border: solid var(--ink); }
.corner--first { inset: 14px auto auto 14px; border-width: 1px 0 0 1px; }
.corner--last { inset: 14px 14px auto auto; border-width: 1px 1px 0 0; }
.service-section { padding-block: clamp(54px, 8vw, 92px); background: #f2f2f2; color: var(--ink); }
.service-card { display: grid; grid-template-columns: 35px 1fr; gap: 7px 12px; min-height: 140px; padding: 20px; border: 1px solid #aaa; background: white; }
.service-card h3 { margin: 0; font-size: 1.45rem; font-weight: 750; letter-spacing: -.05em; }
.service-card p { grid-column: 2; margin: 0; color: #383838; }
.book-appointment-section { padding-block: clamp(56px, 8vw, 105px); }
.book-appointment-section p:last-child { margin-bottom: 0; color: var(--gray); }
.booking-links { display: grid; gap: 8px; }
.footer { border-top: 1px solid var(--line); background: #1d1d1d; padding-block: 26px 16px; }
.footer-main { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 23px; }
address { margin: 0; }
.disclosure { color: var(--gray); font-size: .8rem; border-top: 1px solid var(--line); margin: 0; padding-top: 14px; }
@media (min-width: 670px) {
  .header nav { display: flex; gap: 24px; font-size: .85rem; }
  .header nav a { text-decoration: none; }
  .header nav a:hover { text-decoration: underline; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }