@font-face { font-family: "Barlow"; src: url("/assets/barlow-regular.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/barlow-semibold.woff2") format("woff2"); font-style: normal; font-weight: 600 800; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("/assets/oswald.woff2") format("woff2"); font-style: normal; font-weight: 200 700; font-display: swap; }

:root {
  --ink: #080808;
  --soft-ink: #111112;
  --paper: #f0efe9;
  --muted: #92908b;
  --line: rgba(240, 239, 233, 0.22);
  --signal: #df4c2d;
  --sans: "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: "Oswald", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --gutter: clamp(1.1rem, 2.5vw, 2.4rem);
}
* { box-sizing: border-box; }
html { background: var(--ink); color: var(--paper); scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { margin: 0; overflow-x: hidden; background: radial-gradient(circle at 77% 9%, rgba(223, 76, 45, .07), transparent 22rem), var(--ink); color: var(--paper); font-family: var(--sans); font-size: 1rem; line-height: 1.5; }
body::before { position: fixed; inset: 0; z-index: 50; pointer-events: none; content: ""; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
.skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 100; padding: .7rem 1rem; transform: translateY(-180%); background: var(--paper); color: var(--ink); font-weight: 800; }
.skip-link:focus { transform: translateY(0); }
.eyebrow, .meta, .nav-link, .button, .label, .status, .footer-kicker, .micro { font-family: var(--mono); font-size: .76rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 40; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 4.35rem; padding: 0 var(--gutter); border-bottom: 1px solid var(--paper); background: rgba(8, 8, 8, .91); backdrop-filter: blur(16px); }
.brand { justify-self: start; text-decoration: none; font-family: var(--mono); font-size: .8rem; font-weight: 800; letter-spacing: .15em; }
.nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.6rem); }
.nav-link { position: relative; padding: 1.55rem 0; color: var(--muted); text-decoration: none; transition: color .2s ease; }
.nav-link:hover, .nav-link:focus-visible, .nav-link[aria-current="page"] { color: var(--paper); }
.nav-link[aria-current="page"]::after { position: absolute; right: 0; bottom: -.05rem; left: 0; height: 3px; background: var(--paper); content: ""; }
.header-meta { justify-self: end; display: flex; align-items: center; gap: 1rem; }
.language-switch { display: inline-flex; align-items: center; gap: .38rem; min-height: 2.35rem; padding: 0 .7rem; border: 1px solid var(--line); color: var(--paper); font-family: var(--mono); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-decoration: none; }
.language-switch [aria-current="true"] { color: var(--signal); }
.language-switch:hover, .language-switch:focus-visible { border-color: var(--paper); }
.header-book { padding: .62rem .85rem; background: var(--paper); color: var(--ink); text-decoration: none; }
.menu-button { display: none; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; background: transparent; color: var(--paper); }
.menu-button span, .menu-button::before, .menu-button::after { display: block; width: 1.35rem; height: 1px; margin: .32rem auto; background: currentColor; content: ""; }
main { padding-top: 4.35rem; }

.landing-hero { position: relative; min-height: min(calc(100svh - 4.35rem), 40rem); gap: 3rem; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(2.2rem, 6vh, 4.6rem) var(--gutter) 2rem; overflow: hidden; border-bottom: 1px solid var(--paper); }
.landing-title { position: relative; z-index: 2; width: min-content; margin: 0; font-family: var(--display); font-size: clamp(7rem, 16.5vw, 17rem); font-weight: 900; letter-spacing: -.05em; line-height: .95; text-transform: uppercase; }
.landing-title span { display: block; }
.landing-title .outline { margin-top: .02em; color: transparent; -webkit-text-stroke: 1px var(--paper); }
.landing-orbit { position: absolute; top: 10%; right: 17%; width: clamp(15rem, 29vw, 31rem); aspect-ratio: 1; border: 1px solid rgba(240, 239, 233, .18); border-radius: 50%; }
.landing-orbit::before, .landing-orbit::after { position: absolute; inset: 13%; border: 1px solid rgba(240, 239, 233, .1); border-radius: 50%; content: ""; }
.landing-orbit::after { inset: 42% -12%; }
.landing-bottom { position: relative; z-index: 3; max-width: 42rem; }
.landing-intro { margin: 0; max-width: 42rem; font-size: clamp(1.1rem, 1.7vw, 1.5rem); }

.booking-strip { padding: .8rem var(--gutter); border-bottom: 1px solid var(--line); background: var(--ink); }
.booking-strip__button { display: flex; min-height: 4.4rem; align-items: center; justify-content: space-between; width: 100%; padding: 0 1.4rem; background: var(--signal); color: #fff; font-family: var(--mono); font-size: .84rem; font-weight: 800; letter-spacing: .13em; text-decoration: none; text-transform: uppercase; transition: background-color .2s ease, color .2s ease; }
.booking-strip__button:hover, .booking-strip__button:focus-visible { background: #c94327; color: #fff; }

.page-hero { min-height: 76svh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .85fr); border-bottom: 1px solid var(--paper); }
.page-hero-copy { display: flex; flex-direction: column; justify-content: space-between; min-height: 76svh; padding: clamp(2.2rem, 6vh, 4rem) var(--gutter) 2rem; }
.division-pill { display: inline-flex; align-items: center; align-self: flex-start; min-height: 2rem; padding: 0 .75rem; background: var(--signal); color: #fff; }
.page-title { margin: 1rem 0; font-family: var(--display); font-size: clamp(6rem, 13vw, 13rem); font-weight: 900; letter-spacing: -.045em; line-height: 1; text-transform: uppercase; }
.page-lede { max-width: 37rem; margin: 0; font-size: clamp(1.08rem, 1.6vw, 1.4rem); }
.page-note { margin: 1rem 0 0; color: var(--muted); }
.page-hero-media { position: relative; min-height: 76svh; overflow: hidden; border-left: 1px solid var(--line); background: #141414; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-media::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, var(--ink), transparent 27%), linear-gradient(0deg, rgba(8,8,8,.65), transparent 45%); }
.image-caption { position: absolute; right: var(--gutter); bottom: 1.7rem; z-index: 2; width: min(17rem, 72%); padding-top: .7rem; border-top: 1px solid var(--paper); }
.crosshair { position: absolute; top: 17%; right: 8%; z-index: 2; width: clamp(7rem, 13vw, 12rem); aspect-ratio: 1; border: 1px solid rgba(240,239,233,.45); border-radius: 50%; }
.crosshair::before, .crosshair::after { position: absolute; background: rgba(240,239,233,.45); content: ""; }
.crosshair::before { top: 50%; left: -20%; width: 140%; height: 1px; }
.crosshair::after { top: -20%; left: 50%; width: 1px; height: 140%; }

.section { display: grid; grid-template-columns: minmax(10rem, .34fr) minmax(0, 1fr); border-bottom: 1px solid var(--paper); }
.section-side { padding: clamp(2rem, 5vw, 4rem) var(--gutter); border-right: 1px solid var(--line); }
.section-name { margin: 0; font-family: var(--mono); font-size: .76rem; letter-spacing: .13em; text-transform: uppercase; }
.section-map { margin-top: 0; }
.section-map__frame { display: block; width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--line); background: #fff; filter: grayscale(1) contrast(.82) brightness(1.18); }
.section-map address { margin: 1rem 0 .6rem; color: #cfcdc7; font-size: .9rem; font-style: normal; line-height: 1.5; }
.section-main { min-width: 0; padding: clamp(2.8rem, 7vw, 6.5rem) var(--gutter); }
.display-heading { margin: 0 0 clamp(2rem, 5vw, 4rem); font-family: var(--display); font-size: clamp(4rem, 9vw, 9rem); font-weight: 900; letter-spacing: -.035em; line-height: 1; text-transform: uppercase; }
.display-heading em { color: var(--signal); font-style: normal; }
.copy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 6vw, 6rem); }
.copy-grid p { margin: 0; color: #cfcdc7; font-size: clamp(1.05rem, 1.5vw, 1.3rem); }

.division-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--paper); }
.division-card { position: relative; min-height: 33rem; display: flex; flex-direction: column; justify-content: space-between; padding: 1.5rem; overflow: hidden; border-right: 1px solid var(--line); text-decoration: none; }
.division-card:last-child { border-right: 0; }
.division-card::before { position: absolute; inset: 0; z-index: 0; background: var(--soft-ink); transform: translateY(100%); transition: transform .4s cubic-bezier(.2,.75,.2,1); content: ""; }
.division-card:hover::before, .division-card:focus-visible::before { transform: translateY(0); }
.division-card > * { position: relative; z-index: 2; }
.division-card .index { color: var(--signal); }
.division-card h2 { margin: 0; font-family: var(--display); font-size: clamp(4rem, 7vw, 7rem); line-height: 1; text-transform: uppercase; }
.division-card p { max-width: 25rem; color: var(--muted); }
.division-card .arrow { align-self: flex-end; font-size: 2rem; transition: transform .2s ease; }
.division-card .arrow svg { display: block; width: 1em; height: 1em; }
.division-card:hover .arrow { transform: translate(5px, -5px); }
.division-card.is-muted { cursor: default; }
.division-card.is-muted h2 { color: transparent; -webkit-text-stroke: 1px rgba(240,239,233,.55); }

.service-list { border-top: 1px solid var(--line); }
.service-row { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; min-height: 6rem; border-bottom: 1px solid var(--line); transition: background-color .2s ease, padding .2s ease; }
.service-row:hover { padding: 0 1rem; background: var(--soft-ink); }
.service-row .num, .service-row .duration { color: var(--muted); font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; }
.service-row h3 { margin: 0; font-size: clamp(1.3rem, 2.3vw, 2.25rem); font-weight: 500; letter-spacing: -.025em; }
.service-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.5rem; color: var(--muted); }
.button { display: inline-flex; min-height: 3.6rem; align-items: center; justify-content: space-between; gap: 2rem; padding: 0 1.25rem; border: 1px solid var(--paper); background: transparent; color: var(--paper); text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.button:hover, .button:focus-visible { background: var(--paper); color: var(--ink); }
.button.signal { border-color: var(--signal); background: var(--signal); color: #fff; }
.button.signal:hover, .button.signal:focus-visible { background: #fff; color: var(--ink); }

.chairs-grid, .founder-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 4vw, 4rem); }
.portrait-wrap { position: relative; min-height: 36rem; margin: 0; overflow: hidden; background: #171717; }
.portrait-wrap img { width: 100%; height: 100%; object-fit: cover; }
.portrait-wrap::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg, rgba(8,8,8,.7), transparent 45%); }
.portrait-label { position: absolute; z-index: 2; bottom: 1.4rem; left: 1.4rem; }
.barber-stack { display: flex; flex-direction: column; justify-content: flex-end; }
.barber-card { padding: 2rem 0; border-top: 1px solid var(--line); }
.barber-card:last-child { border-bottom: 1px solid var(--line); }
.barber-card h3 { margin: .25rem 0 .8rem; font-family: var(--display); font-size: clamp(3.5rem, 7vw, 7rem); line-height: 1.05; text-transform: uppercase; }
.barber-card p { max-width: 35rem; margin: 0; color: #c8c6c0; font-size: 1.03rem; }
.barber-card .founder-quote { margin: 1.25rem 0; color: var(--paper); font-size: clamp(1.35rem, 2.1vw, 2rem); line-height: 1.25; }
.founder-portrait { align-self: start; min-height: 0; aspect-ratio: 4 / 5; }
.mission-statement { max-width: 13ch; }
.mission-statement em { display: block; overflow-wrap: anywhere; }
.mission-copy { max-width: 50rem; margin: 0; color: #cfcdc7; font-size: clamp(1.1rem, 1.8vw, 1.5rem); line-height: 1.6; }

.visit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, .72fr); gap: clamp(2rem, 7vw, 7rem); }
.schedule { margin: 0; }
.schedule-row { display: grid; grid-template-columns: 1fr auto; padding: .92rem 0; border-bottom: 1px solid var(--line); }
.schedule-row.is-today { color: var(--signal); }
.visit-card { align-self: start; padding: 1.5rem; border: 1px solid var(--paper); }
.visit-card h3 { margin: 2rem 0 1rem; font-size: clamp(1.8rem, 4vw, 3.4rem); line-height: 1; }
.visit-card p { color: #c8c6c0; }
.status { display: flex; align-items: center; gap: .55rem; }
.status::before { width: .55rem; height: .55rem; border-radius: 50%; background: var(--signal); content: ""; }
.status.open::before { background: #e7d54d; box-shadow: 0 0 0 .25rem rgba(231,213,77,.1); }

.tattoo-hero-visual { display: grid; place-items: center; isolation: isolate; }
.tattoo-hero-visual::before { position: absolute; inset: 9%; border: 1px solid rgba(240,239,233,.2); border-radius: 50%; content: ""; transform: rotate(-12deg); }
.tattoo-hero-visual::after { background: radial-gradient(circle at center, transparent 0 31%, rgba(223,76,45,.14) 31.5% 32%, transparent 32.5%), linear-gradient(135deg, transparent 49.8%, rgba(240,239,233,.16) 50%, transparent 50.2%); }

.principle-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.principle { min-width: 0; min-height: 18rem; padding: 1.5rem; overflow: hidden; border-right: 1px solid var(--line); }
.principle:last-child { border-right: 0; }
.principle h3 { max-width: 100%; margin: 4rem 0 1rem; font-family: var(--display); font-size: clamp(2.25rem, 3.3vw, 4rem); line-height: 1.05; letter-spacing: -.02em; white-space: nowrap; text-transform: uppercase; }
.principle p { color: var(--muted); }
.values-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.values-grid .principle { min-height: 11rem; padding: 1.25rem; }
.values-grid .principle { container-type: inline-size; }
.values-grid .principle h3 { margin-top: .5rem; font-size: min(17cqw, 3.1rem); white-space: nowrap; }

.cta-band { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2rem; padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) 2rem; border-bottom: 1px solid var(--paper); background: var(--signal); color: #fff; }
.cta-band h2 { max-width: 12ch; margin: 0; font-family: var(--display); font-size: clamp(4.4rem, 11vw, 11rem); line-height: 1; letter-spacing: -.04em; text-transform: uppercase; }
.cta-band .button { background: var(--paper); color: var(--ink); }
.cta-band .button:hover, .cta-band .button:focus-visible { background: var(--ink); color: var(--paper); }

.site-footer { padding: 0 var(--gutter); color: var(--muted); font-family: var(--mono); font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; }
.footer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 7vw, 7rem); padding: clamp(3rem, 6vw, 5rem) 0; border-bottom: 1px solid var(--line); }
.footer-heading { display: block; margin-bottom: 1.25rem; color: var(--paper); font-weight: 800; letter-spacing: .13em; }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
.footer-links a { color: var(--muted); letter-spacing: 0; text-decoration: none; text-transform: none; transition: color .2s ease; }
.footer-links a:hover, .footer-links a:focus-visible { color: var(--paper); }
.footer-links address { color: #cfcdc7; font-style: normal; letter-spacing: 0; line-height: 1.7; text-transform: none; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 5rem; }
.site-credit { display: inline-flex; align-items: center; gap: .55rem; color: var(--muted); text-decoration: none; transition: color .2s ease; }
.site-credit__slashes { color: var(--signal); font-size: .85rem; font-weight: 800; }
.site-credit:hover, .site-credit:focus-visible { color: var(--paper); }

[data-reveal] { opacity: 0; transform: translateY(2rem); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.75,.2,1); }
[data-reveal].is-visible { opacity: 1; transform: none; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }

/* Gallery slider */
.gallery-slider { min-width: 0; }
.gallery-viewport { overflow: hidden; border: 1px solid var(--line); background: #141414; }
.gallery-track { display: flex; transition: transform .55s cubic-bezier(.2,.75,.2,1); will-change: transform; }
.gallery-slide { position: relative; flex: 0 0 100%; aspect-ratio: 16 / 9; margin: 0; overflow: hidden; }
.gallery-slide img { width: 100%; height: 100%; object-fit: cover; }
.barber-slider .gallery-slide { aspect-ratio: 16 / 10; }
.gallery-slider__controls { display: flex; align-items: center; justify-content: space-between; min-height: 4rem; border-bottom: 1px solid var(--line); }
.gallery-slider__controls button { width: 3.25rem; height: 3.25rem; margin-left: .4rem; border: 1px solid var(--line); background: transparent; color: var(--paper); cursor: pointer; font-size: 1.2rem; }
.gallery-slider__controls button:hover, .gallery-slider__controls button:focus-visible { background: var(--paper); color: var(--ink); }

/* Testimonials Styles */
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2.5rem; border-top: 1px solid var(--line); padding-top: 2.5rem; }
.testimonial-card { display: flex; flex-direction: column; gap: 1rem; }
.testimonial-card .stars { color: var(--signal); font-size: 1.2rem; letter-spacing: 0.1em; }
.testimonial-card p { margin: 0; font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-style: italic; color: var(--paper); line-height: 1.6; }
.testimonial-card .meta { color: var(--muted); }

/* Visit info layout */
.visit-info { display: flex; flex-direction: column; gap: 2rem; }
.location-card { padding: 1.5rem; border: 1px solid var(--line); background: var(--soft-ink); }
.location-card .section-map__frame { margin-bottom: 1.25rem; aspect-ratio: 4 / 3; }
.location-card p { color: var(--paper); margin: .5rem 0 1rem; line-height: 1.6; }
.text-link { color: var(--signal); text-decoration: none; font-weight: 500; transition: color .2s ease; }
.text-link:hover { color: var(--paper); }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto auto; gap: .55rem; }
  .menu-button { display: block; justify-self: end; }
  .header-meta { display: flex; gap: .55rem; }
  .header-book { display: none; }
  .nav { position: fixed; inset: 4.35rem 0 auto; display: grid; padding: 1rem var(--gutter) 1.4rem; transform: translateY(-120%); border-bottom: 1px solid var(--paper); background: var(--ink); opacity: 0; transition: transform .25s ease, opacity .25s ease; }
  .nav.is-open { transform: translateY(0); opacity: 1; }
  .nav-link { padding: .45rem 0; }
  .nav-link[aria-current="page"]::after { display: none; }
  .landing-hero { min-height: auto; gap: clamp(3rem, 8vw, 4.5rem); padding-bottom: clamp(2rem, 6vw, 3rem); }
  .landing-title { max-width: 100%; font-size: clamp(5.5rem, 21vw, 10rem); }
  .landing-orbit { top: 20%; right: -12%; width: clamp(12rem, 48vw, 22rem); opacity: .72; }
  .landing-bottom { max-width: 36rem; }
  .page-hero { grid-template-columns: 1fr; }
  .page-hero-copy { min-height: 38rem; }
  .page-hero-media { min-height: 65svh; border-top: 1px solid var(--line); border-left: 0; }
  .page-hero-media::after { background: linear-gradient(180deg, var(--ink), transparent 20%, rgba(8,8,8,.65)); }
  .section { grid-template-columns: 1fr; }
  .section-side { padding: 1.2rem var(--gutter); border-right: 0; border-bottom: 1px solid var(--line); }
  .section-map__frame { aspect-ratio: 16 / 9; }
  .section-name { display: inline-block; margin: 0 .7rem 0 0; }
  .division-grid { grid-template-columns: 1fr; }
  .division-card { min-height: 23rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .division-card:last-child { border-bottom: 0; }
  .chairs-grid, .founder-grid, .visit-grid { grid-template-columns: 1fr; }
  .principle-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .values-grid .principle { border-bottom: 1px solid var(--line); }
  .values-grid .principle:nth-child(even) { border-right: 0; }
  .values-grid .principle:last-child { grid-column: 1 / -1; }
  .principle { min-height: 13rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .principle:last-child { border-bottom: 0; }
  .values-grid .principle:nth-child(odd) { border-right: 1px solid var(--line); }
  .values-grid .principle:last-child { border-right: 0; }
  .cta-band { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .landing-hero { min-height: auto; gap: 3rem; padding-top: 2rem; padding-bottom: 2rem; }
  .landing-title { font-size: clamp(4.7rem, 23vw, 7rem); line-height: .95; }
  .landing-orbit { top: 27%; right: -24%; width: 68vw; }
  .landing-intro { max-width: 31rem; font-size: 1.08rem; line-height: 1.55; }
  .booking-strip { padding: .7rem; }
  .booking-strip__button { min-height: 4rem; padding: 0 1rem; }
  .gallery-slide { aspect-ratio: 4 / 5; }
  .barber-slider .gallery-slide { aspect-ratio: 4 / 5; }
  .page-title { font-size: clamp(4.8rem, 20vw, 7rem); }
  .page-hero-copy { min-height: 32rem; }
  .copy-grid { grid-template-columns: 1fr; }
  .display-heading { font-size: clamp(3.7rem, 18vw, 6.5rem); }
  .service-row { grid-template-columns: 2.1rem minmax(0, 1fr); padding: 1rem 0; }
  .service-row .duration { grid-column: 2; }
  .service-foot { display: grid; }
  .portrait-wrap { min-height: 27rem; }
  .founder-portrait { min-height: 0; }
  .schedule-row { gap: 1rem; }
  .cta-band h2 { font-size: clamp(4rem, 18vw, 6.8rem); }
  .footer-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-bottom { flex-direction: column; justify-content: center; gap: .7rem; padding: 1.2rem 0; text-align: center; }
}

@media (max-width: 520px) {
  .values-grid { grid-template-columns: 1fr; }
  .values-grid .principle:last-child { grid-column: auto; }
  .values-grid .principle { min-height: 11rem; border-right: 0; }
  .values-grid .principle:nth-child(odd) { border-right: 0; }
  .values-grid .principle h3 { margin-top: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* Standalone map section */
.map-section .section-map { margin-top: 0; }
.map-section .section-map__frame { aspect-ratio: 16 / 8; }
.map-section .section-map address { font-size: 1rem; }
@media (max-width: 900px) { .map-section .section-map__frame { aspect-ratio: 4 / 3; } }
.map-section .section-main { padding-top: clamp(2rem, 5vw, 4rem); }

/* Home hero background supplied by the admin dashboard */
.landing-hero[data-media-slot].has-media { background: linear-gradient(90deg, rgba(8,8,8,.88), rgba(8,8,8,.45)), var(--hero-image) center / cover no-repeat; }

/* Logos supplied by the admin dashboard (hidden until a slot is filled) */
.site-logo { display: block; width: auto; max-width: 100%; }
.site-logo[hidden] { display: none; }
.site-logo--hero { position: absolute; top: 6%; right: 6%; z-index: 0; width: clamp(18rem, 42vw, 44rem); height: auto; max-height: none; pointer-events: none; }
.site-logo--hero:not([hidden]) ~ .landing-orbit { display: none; }

.site-logo--footer { max-height: 7rem; margin-top: 1rem; }

/* Mobile hero: logo to the left of the title, matching its height */
@media (max-width: 900px) {
  .landing-hero { --title-size: clamp(3rem, calc((100vw - 2.6rem) / 5.3), 7rem); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-content: start; column-gap: clamp(.6rem, 3vw, 1.4rem); row-gap: clamp(2rem, 6vw, 3rem); }
  .landing-hero .landing-title { grid-column: 2; grid-row: 1; font-size: var(--title-size); line-height: .95; }
  .landing-hero .site-logo--hero { position: static; grid-column: 1; grid-row: 1; width: calc(var(--title-size) * 1.92); height: calc(var(--title-size) * 1.92); max-width: none; margin: 0; aspect-ratio: 1; object-fit: cover; }
  .landing-hero .landing-bottom { grid-column: 1 / -1; grid-row: 2; }
}

/* Tattoos hero photo supplied by the admin dashboard replaces the drawn graphic */
.tattoo-hero-visual > img[data-media-slot] { position: absolute; inset: 0; }
.tattoo-hero-visual:has(> img[data-media-slot]:not([hidden]))::before, .tattoo-hero-visual:has(> img[data-media-slot]:not([hidden])) .crosshair { display: none; }
.tattoo-hero-visual:has(> img[data-media-slot]:not([hidden]))::after { background: linear-gradient(90deg, var(--ink), transparent 27%), linear-gradient(0deg, rgba(8,8,8,.65), transparent 45%); }
@media (max-width: 900px) { .tattoo-hero-visual:has(> img[data-media-slot]:not([hidden]))::after { background: linear-gradient(180deg, var(--ink), transparent 20%, rgba(8,8,8,.65)); } }

.section[hidden] { display: none; }
.gallery-slider__controls[hidden] { display: none; }
img[hidden] { display: none; }

/* Squire booking widget: full screen on mobile and small tablets (it floats as a card above 425px by default) */
@media (max-width: 900px) {
  html body iframe.squire_widget { top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 100dvh !important; max-height: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
}