:root { --body: Inter, "Segoe UI", Arial, sans-serif; --demo-notice-height: 36px; --demo-nav-height: 68px; }

* { box-sizing: border-box; }
html::after { content: ""; position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 3px; pointer-events: none; background: linear-gradient(90deg, #2a6df4, #bdf65b); opacity: 0; transform: scaleX(.15); transform-origin: left; transition: opacity .12s ease, transform .35s ease; }
html.page-transitioning::after { opacity: 1; transform: scaleX(.82); }
html.page-transitioning body { opacity: .985; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--demo-notice-height) + var(--demo-nav-height) + 16px); }
body { margin: 0; font-family: var(--body); -webkit-font-smoothing: antialiased; transition: opacity .12s ease; }
body, h1, h2, h3, p, blockquote, figure { margin-top: 0; }
a { color: inherit; text-decoration: none; }
a:active:not(.demo-back),button:active { transform: scale(.97); }
@keyframes demo-button-activated { 50% { filter: brightness(1.18); } }
.demo-button-activated { animation: demo-button-activated .3s ease; }

@media (prefers-reduced-motion: reduce) {
  html::after, body { transition: none; }
  .demo-button-activated { animation: none; }
}
img { display: block; max-width: 100%; }
.wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.demo-notice { position: sticky; z-index: 100; top: 0; min-height: var(--demo-notice-height); display: grid; place-items: center; padding: 4px 52px; color: #fff; background: rgba(18,18,18,.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 4px 14px rgba(0,0,0,.08); font-size: 10px; font-weight: 750; text-align: center; letter-spacing: .05em; }
.demo-back { position: absolute; left: max(12px,calc((100% - 1180px)/2)); top: 50%; width: 28px; height: 28px; display: grid; place-items: center; color: currentColor; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.24); border-radius: 9px; transform: translateY(-50%); transition: transform .2s ease,background .2s ease,border-color .2s ease; }
.demo-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.demo-back:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.55); transform: translate(-2px,-50%); }
.demo-back:focus-visible { outline: 3px solid rgba(255,255,255,.25); outline-offset: 2px; }
.demo-header { position: sticky; z-index: 90; top: var(--demo-notice-height); left: 0; width: 100%; margin-bottom: calc(-1 * var(--demo-nav-height)); -webkit-backdrop-filter: blur(8px) saturate(115%); backdrop-filter: blur(8px) saturate(115%); box-shadow: 0 6px 18px rgba(0,0,0,.07); }
.demo-nav { min-height: var(--demo-nav-height); display: flex; align-items: center; justify-content: space-between; gap: 28px; border-bottom: 1px solid rgba(255,255,255,.25); }
.demo-brand { font-size: 22px; font-weight: 850; letter-spacing: -.035em; }
.demo-brand small { display: block; margin-top: 2px; font: 700 8px var(--body); letter-spacing: .24em; text-transform: uppercase; opacity: .72; }
.demo-menu { display: flex; align-items: center; gap: 28px; font-size: 12px; font-weight: 750; }
.demo-menu .pill { padding: 12px 18px; border: 1px solid currentColor; }
.kicker { margin: 0 0 20px; font-size: 11px; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.btn { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; padding: 0 22px; font-size: 12px; font-weight: 850; }
.block { padding-block: 110px; }
.stars { letter-spacing: .14em; }
.demo-footer { padding-block: 34px; }
.footer-row { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.footer-row p { margin: 0; font-size: 10px; opacity: .68; }

/* Restaurant — éditorial, chaleureux et organique */
.restaurant-site { color: #6e211d; background: #f4ecdc; }
.restaurant-site .demo-notice { background: rgba(122,33,29,.78); }
.restaurant-site .demo-notice a { color: #f4c88e; }
.restaurant-header { color: #fff8eb; background: rgba(62,19,16,.52); }
.restaurant-header .demo-brand { font: 600 25px Georgia, serif; letter-spacing: .08em; }
.restaurant-header .demo-menu .pill { border-radius: 99px; }
.restaurant-hero { position: relative; min-height: 820px; display: flex; align-items: center; overflow: hidden; color: #fff9ed; background: #4f1b18; }
.restaurant-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.restaurant-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(47,13,10,.88) 0%, rgba(74,22,17,.62) 43%, rgba(35,14,10,.08) 76%), linear-gradient(0deg, rgba(30,10,8,.34), transparent 55%); }
.restaurant-hero-content { position: relative; z-index: 2; padding-top: 118px; }
.restaurant-script { margin-bottom: -6px; color: #f2c88f; font: italic 34px Georgia, serif; }
.restaurant-hero-content .kicker { color: #f4c88e; }
.restaurant-hero h1 { max-width: 720px; margin: 0 0 24px; font: 500 clamp(58px, 7.3vw, 98px)/.9 Georgia, "Times New Roman", serif; letter-spacing: -.06em; }
.restaurant-hero-content > p:not(.kicker):not(.restaurant-script) { max-width: 570px; margin-bottom: 32px; font-size: 17px; line-height: 1.75; }
.restaurant-site .btn { color: #7a211d; background: #fff4df; border-radius: 99px; }
.restaurant-text-link { display: inline-flex; gap: 28px; padding: 16px 5px; border-bottom: 1px solid rgba(255,255,255,.45); font-size: 12px; font-weight: 800; }
.restaurant-hours { position: absolute; z-index: 3; right: 0; bottom: 0; min-width: 275px; display: grid; gap: 7px; padding: 28px 40px; color: #fff8eb; background: #a3322b; }
.restaurant-hours span { margin-bottom: 5px; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.restaurant-hours b { font: 500 18px Georgia, serif; }
.restaurant-intro { display: grid; grid-template-columns: .55fr 2fr .65fr .65fr; gap: 35px; align-items: start; padding-block: 70px; border-bottom: 1px solid rgba(110,33,29,.18); }
.restaurant-intro > p { font-size: 10px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.restaurant-intro blockquote { margin-bottom: 0; font: 500 clamp(27px, 3vw, 41px)/1.2 Georgia, serif; }
.restaurant-intro div { display: grid; gap: 6px; }
.restaurant-intro b { font: 600 18px Georgia, serif; }
.restaurant-intro span { color: #806760; font-size: 11px; }
.restaurant-menu { color: #fff8eb; background: #7a211d; }
.restaurant-menu .kicker, .restaurant-quotes .kicker { color: #efbd7d; }
.restaurant-menu-head { display: grid; grid-template-columns: 1.2fr .8fr; gap: 90px; align-items: end; margin-bottom: 65px; }
.restaurant-menu h2, .restaurant-story h2, .restaurant-quotes h2, .restaurant-contact h2 { margin: 0; font: 500 clamp(44px, 5.5vw, 72px)/.98 Georgia, serif; letter-spacing: -.045em; }
.restaurant-menu-head > p { max-width: 480px; margin: 0; color: #e3c4b5; line-height: 1.75; }
.restaurant-dishes { border-top: 1px solid rgba(255,255,255,.24); }
.restaurant-dishes article { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; padding-block: 29px; border-bottom: 1px solid rgba(255,255,255,.24); }
.restaurant-dishes small { color: #efbd7d; font-size: 9px; font-weight: 850; letter-spacing: .17em; text-transform: uppercase; }
.restaurant-dishes h3 { margin: 6px 0 6px; font: 500 32px Georgia, serif; }
.restaurant-dishes p { margin: 0; color: #e4c9bd; font-size: 13px; }
.restaurant-dishes article > b { font: 500 25px Georgia, serif; }
.restaurant-story { display: grid; grid-template-columns: 1.05fr .95fr; gap: 90px; align-items: center; }
.restaurant-story figure { margin-bottom: 0; }
.restaurant-story figure img { width: 100%; height: 620px; object-fit: cover; object-position: 62% center; }
.restaurant-story figcaption { padding-top: 12px; color: #806760; font: italic 13px Georgia, serif; }
.restaurant-story .kicker { color: #a3322b; }
.restaurant-story > div > p:not(.kicker) { margin: 25px 0 32px; color: #806760; line-height: 1.8; }
.restaurant-points { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(110,33,29,.18); }
.restaurant-points li { display: flex; gap: 18px; padding-block: 17px; border-bottom: 1px solid rgba(110,33,29,.18); font: 600 16px Georgia, serif; }
.restaurant-points span { color: #a3322b; font: 800 10px var(--body); }
.restaurant-quotes { color: #fff8eb; background: #291714; }
.restaurant-quote-grid { display: grid; grid-template-columns: 1.35fr .8fr .8fr; gap: 45px; align-items: start; }
.restaurant-quote-grid article { padding-top: 8px; }
.restaurant-quote-grid .stars { margin-bottom: 20px; color: #efbd7d; }
.restaurant-quote-grid blockquote { margin-bottom: 22px; font: 500 21px/1.45 Georgia, serif; }
.restaurant-quote-grid article p { color: #bdaaa3; font-size: 11px; }
.restaurant-contact { padding-block: 120px; text-align: center; }
.restaurant-contact .restaurant-script { margin-bottom: 10px; color: #a3322b; }
.restaurant-contact p:not(.restaurant-script) { margin: 25px 0; color: #806760; }
.restaurant-contact .btn { color: #fff8eb; background: #a3322b; }
.restaurant-site .demo-footer { color: #fff8eb; background: #7a211d; border-top: 1px solid rgba(255,255,255,.16); }

/* Barber — sombre, cinématographique et minimal */
.barber-site { color: #eee8dc; background: #0f0e0c; }
.barber-site .demo-notice { background: rgba(8,8,7,.78); }
.barber-site .demo-notice a { color: #c69b5d; }
.barber-header { color: #f4eee4; background: rgba(8,8,7,.56); }
.barber-header .demo-nav { margin-left: calc(55% + 55px); width: calc(45% - 75px); }
.barber-header .demo-brand { font-family: Georgia, serif; }
.barber-header .demo-menu a:not(.pill) { display: none; }
.barber-header .pill { color: #c69b5d; }
.barber-hero { position: relative; min-height: 820px; display: grid; grid-template-columns: 55% 45%; overflow: hidden; background: #0f0e0c; }
.barber-photo { min-width: 0; }
.barber-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 63% center; filter: saturate(.76) contrast(1.04); }
.barber-hero-copy { display: flex; align-items: flex-start; justify-content: center; flex-direction: column; padding: 150px 9vw 70px 70px; }
.barber-index { margin-bottom: 32px; color: #7f776d; font: 750 10px var(--body); letter-spacing: .18em; }
.barber-site .kicker { color: #c69b5d; }
.barber-hero h1 { margin: 0 0 28px; font: 600 clamp(63px, 7vw, 100px)/.84 Georgia, serif; letter-spacing: -.06em; }
.barber-hero-copy > p:not(.kicker):not(.barber-index) { max-width: 480px; margin-bottom: 31px; color: #afa69a; font-size: 16px; line-height: 1.75; }
.barber-site .btn { color: #17130f; background: #c69b5d; }
.barber-arrow { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid #4f4941; border-radius: 50%; }
.barber-vertical { position: absolute; right: 17px; bottom: 35px; margin: 0; color: #777067; font-size: 9px; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; writing-mode: vertical-rl; }
.barber-strip { display: grid; grid-template-columns: repeat(3, 1fr) 1.45fr; border-top: 1px solid #2a2723; border-bottom: 1px solid #2a2723; }
.barber-strip > * { min-height: 105px; display: flex; justify-content: center; flex-direction: column; padding: 25px 38px; border-right: 1px solid #2a2723; }
.barber-strip span { color: #777067; font-size: 9px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.barber-strip b { margin-top: 7px; font: 500 22px Georgia, serif; }
.barber-strip > a { align-items: center; flex-direction: row; gap: 22px; color: #17130f; background: #c69b5d; font-size: 12px; font-weight: 850; }
.barber-services { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; }
.barber-services-title { position: sticky; top: 30px; align-self: start; }
.barber-services h2, .barber-studio h2, .barber-reviews h2, .barber-contact h2 { margin: 0; font: 500 clamp(45px, 5vw, 70px)/.94 Georgia, serif; letter-spacing: -.045em; }
.barber-services-title > p:last-child { max-width: 390px; margin-top: 24px; color: #8e867c; line-height: 1.7; }
.barber-service-list { border-top: 1px solid #37332e; }
.barber-service-list article { display: grid; grid-template-columns: 45px 1fr auto; gap: 22px; align-items: center; min-height: 150px; border-bottom: 1px solid #37332e; }
.barber-service-list article > span { color: #c69b5d; font-size: 10px; font-weight: 850; }
.barber-service-list h3 { margin: 0 0 8px; font: 500 31px Georgia, serif; }
.barber-service-list p { margin: 0; color: #8e867c; font-size: 13px; }
.barber-service-list article > b { color: #c69b5d; font: 500 21px Georgia, serif; }
.barber-studio { color: #191613; background: #e8e0d2; }
.barber-studio-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 100px; align-items: center; }
.barber-studio-photo { position: relative; }
.barber-studio-photo img { width: 100%; height: 660px; object-fit: cover; object-position: 66% center; filter: grayscale(.18) sepia(.08); }
.barber-studio-photo span { position: absolute; right: -35px; bottom: 45px; width: 210px; padding: 24px; color: #17130f; background: #c69b5d; font: 500 18px/1.4 Georgia, serif; }
.barber-studio .kicker { color: #8d642d; }
.barber-studio-grid > div:last-child > p:not(.kicker):not(.barber-index) { margin: 27px 0; color: #6f675d; line-height: 1.8; }
.barber-rules { margin: 0; padding: 0; list-style: none; }
.barber-rules li { display: flex; gap: 18px; padding-block: 15px; border-bottom: 1px solid rgba(25,22,19,.17); font-weight: 750; }
.barber-rules b { color: #8d642d; font-size: 10px; }
.barber-reviews { background: #151310; }
.barber-review-head { display: grid; grid-template-columns: 1.4fr .6fr; gap: 70px; align-items: end; padding-bottom: 52px; border-bottom: 1px solid #37332e; }
.barber-review-head p { margin: 0; color: #c69b5d; text-align: right; }
.barber-review-list { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.barber-review-list blockquote { margin: 0; padding-block: 42px; color: #ddd4c7; font: 500 25px/1.4 Georgia, serif; border-bottom: 1px solid #37332e; }
.barber-review-list span { display: block; margin-top: 18px; color: #777067; font: 750 10px var(--body); }
.barber-contact { display: grid; grid-template-columns: 1.3fr .7fr; gap: 80px; align-items: end; padding: 90px max(40px, calc((100vw - 1180px) / 2)); color: #17130f; background: #c69b5d; }
.barber-contact > div > p { font-size: 10px; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
.barber-contact aside { padding: 28px; border: 1px solid rgba(23,19,15,.28); }
.barber-contact aside p { margin-bottom: 10px; font-size: 12px; }
.barber-contact .btn { width: 100%; margin-top: 12px; color: #eee8dc; background: #17130f; }
.barber-site .demo-footer { border-top: 1px solid #2a2723; }

/* Garage — technique, structuré et industriel */
.garage-site { color: #09243d; background: #eef2f5; }
.garage-site .demo-notice { background: rgba(240,108,47,.82); }
.garage-site .demo-notice a { color: #09243d; }
.garage-header { color: #fff; background: rgba(9,36,61,.58); }
.garage-header .demo-brand { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 9px; font-size: 19px; letter-spacing: .04em; }
.garage-header .demo-brand span { grid-row: 1 / 3; width: 42px; height: 42px; display: grid; place-items: center; color: #fff; background: #f06c2f; }
.garage-header .demo-brand small { grid-column: 2; }
.garage-header .pill { color: #fff; background: #f06c2f; border-color: #f06c2f; }
.garage-hero { position: relative; min-height: 790px; display: flex; align-items: center; overflow: hidden; color: #fff; background: #071e34; }
.garage-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.garage-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,20,34,.96) 0%, rgba(5,20,34,.83) 42%, rgba(5,20,34,.16) 78%), linear-gradient(0deg, rgba(5,20,34,.45), transparent 55%); }
.garage-grid-overlay { position: absolute; z-index: 1; inset: 0; opacity: .17; background-image: linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px); background-size: 64px 64px; }
.garage-hero-copy { position: relative; z-index: 3; padding-top: 100px; }
.garage-status { width: fit-content; display: flex; align-items: center; gap: 9px; padding: 9px 12px; margin-bottom: 30px; color: #b9c8d5; background: rgba(5,20,34,.65); border: 1px solid rgba(255,255,255,.18); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.garage-status i { width: 7px; height: 7px; background: #62d488; border-radius: 50%; box-shadow: 0 0 0 4px rgba(98,212,136,.14); }
.garage-site .kicker { color: #f06c2f; }
.garage-hero h1 { max-width: 850px; margin: 0 0 25px; font-size: clamp(58px, 7.3vw, 98px); font-weight: 900; line-height: .88; letter-spacing: -.065em; text-transform: uppercase; }
.garage-hero h1 span { color: transparent; -webkit-text-stroke: 1.5px #fff; }
.garage-hero-copy > p:not(.kicker):not(.garage-status) { max-width: 600px; margin-bottom: 32px; color: #c2d0db; font-size: 16px; line-height: 1.7; }
.garage-site .btn { color: #fff; background: #f06c2f; }
.garage-site .btn.ghost { background: rgba(7,30,52,.54); border: 1px solid rgba(255,255,255,.38); }
.garage-hero-code { position: absolute; z-index: 3; right: 28px; bottom: 26px; color: rgba(255,255,255,.6); font: 750 9px monospace; letter-spacing: .17em; writing-mode: vertical-rl; }
.garage-facts { color: #fff; background: #071e34; border-top: 4px solid #f06c2f; }
.garage-facts .wrap { display: grid; grid-template-columns: repeat(3, 1fr); }
.garage-facts article { display: grid; grid-template-columns: auto 1fr; gap: 19px; padding: 29px 35px; border-right: 1px solid rgba(255,255,255,.13); }
.garage-facts article > span { color: #f06c2f; font: 800 10px monospace; }
.garage-facts b { font-size: 17px; text-transform: uppercase; }
.garage-facts p { margin: 5px 0 0; color: #9fb1c0; font-size: 11px; }
.garage-services { background: #eef2f5; }
.garage-section-head { display: grid; grid-template-columns: 1.25fr .75fr; gap: 80px; align-items: end; margin-bottom: 55px; }
.garage-section-head .kicker { grid-column: 1 / -1; margin-bottom: -52px; }
.garage-section-head h2, .garage-method h2, .garage-proof h2, .garage-contact h2 { margin: 0; font-size: clamp(43px, 5.2vw, 70px); font-weight: 900; line-height: .94; letter-spacing: -.055em; text-transform: uppercase; }
.garage-section-head > p { margin: 0; color: #687785; line-height: 1.75; }
.garage-service-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #b8c4ce; border-left: 1px solid #b8c4ce; }
.garage-service-grid article { min-height: 305px; display: flex; flex-direction: column; padding: 32px; background: #fff; border-right: 1px solid #b8c4ce; border-bottom: 1px solid #b8c4ce; }
.garage-service-grid header { display: flex; align-items: center; justify-content: space-between; color: #687785; font: 800 10px monospace; }
.garage-service-grid header span { width: 42px; height: 42px; display: grid; place-items: center; color: #fff; background: #09243d; }
.garage-service-grid h3 { margin: auto 0 12px; font-size: 27px; text-transform: uppercase; }
.garage-service-grid p { margin-bottom: 24px; color: #687785; font-size: 13px; line-height: 1.65; }
.garage-service-grid a { color: #f06c2f; font-size: 11px; font-weight: 850; text-transform: uppercase; }
.garage-service-grid .garage-emergency { color: #fff; background: #f06c2f; }
.garage-service-grid .garage-emergency header, .garage-service-grid .garage-emergency p, .garage-service-grid .garage-emergency a { color: #fff; }
.garage-service-grid .garage-emergency header span { color: #f06c2f; background: #fff; }
.garage-method { color: #fff; background: #071e34; }
.garage-method .wrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: 100px; }
.garage-method ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.18); }
.garage-method li { display: grid; grid-template-columns: 60px 1fr; gap: 20px; padding-block: 27px; border-bottom: 1px solid rgba(255,255,255,.18); }
.garage-method li > span { color: #f06c2f; font: 800 11px monospace; }
.garage-method h3 { margin: 0 0 8px; text-transform: uppercase; }
.garage-method li p { margin: 0; color: #9fb1c0; font-size: 13px; line-height: 1.6; }
.garage-proof .wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; }
.garage-proof-cards { display: grid; gap: 15px; }
.garage-proof-cards blockquote { margin: 0; padding: 32px; color: #fff; background: #09243d; font-size: 18px; font-weight: 700; line-height: 1.5; }
.garage-proof-cards span { display: block; margin-top: 18px; color: #f06c2f; font: 750 10px var(--body); }
.garage-contact { padding-block: 80px; color: #fff; background: #f06c2f; }
.garage-contact .wrap { display: grid; grid-template-columns: 1.3fr .7fr; gap: 75px; align-items: end; }
.garage-contact > .wrap > div > p { font-size: 10px; font-weight: 850; letter-spacing: .14em; }
.garage-contact aside { padding: 25px; border: 1px solid rgba(255,255,255,.45); }
.garage-contact aside p { margin-bottom: 9px; font-size: 12px; }
.garage-contact .btn { width: 100%; margin-top: 12px; color: #fff; background: #09243d; }
.garage-site .demo-footer { color: #fff; background: #071e34; border-top: 1px solid rgba(255,255,255,.13); }

@media (max-width: 980px) {
  .demo-menu a:not(.pill) { display: none; }
  .restaurant-intro { grid-template-columns: 1fr 1fr; }
  .restaurant-intro blockquote { grid-column: 1 / -1; grid-row: 2; }
  .restaurant-story, .restaurant-quote-grid, .barber-services, .barber-studio-grid, .garage-method .wrap, .garage-proof .wrap { grid-template-columns: 1fr; }
  .restaurant-story figure { order: 2; }
  .restaurant-quote-grid { gap: 30px; }
  .barber-header .demo-nav { margin-left: auto; width: min(1180px, calc(100% - 40px)); }
  .barber-header .demo-brand { visibility: hidden; }
  .barber-strip { grid-template-columns: repeat(3, 1fr); }
  .barber-strip > a { grid-column: 1 / -1; min-height: 68px; }
  .barber-services-title { position: static; }
  .barber-studio-photo span { right: 20px; }
  .garage-section-head { grid-template-columns: 1fr; gap: 22px; }
  .garage-section-head .kicker { grid-column: auto; margin-bottom: 0; }
}

@media (max-width: 720px) {
  :root { --demo-notice-height: 40px; --demo-nav-height: 60px; }
  .wrap { width: min(100% - 28px, 1180px); }
  .demo-notice { font-size: 9px; }
  .demo-menu .pill { padding: 10px 12px; }
  .block { padding-block: 75px; }
  .footer-row { align-items: flex-start; flex-direction: column; }

  .restaurant-hero { min-height: 760px; align-items: flex-end; }
  .restaurant-hero > img { object-position: 61% center; }
  .restaurant-hero-shade { background: linear-gradient(0deg, rgba(47,13,10,.95) 0%, rgba(47,13,10,.68) 58%, rgba(35,14,10,.12) 100%); }
  .restaurant-hero-content { padding: 170px 0 120px; }
  .restaurant-hero h1 { font-size: 58px; }
  .restaurant-hours { left: 0; right: auto; min-width: 245px; padding: 18px 25px; }
  .restaurant-intro { gap: 28px; padding-block: 55px; }
  .restaurant-menu-head { grid-template-columns: 1fr; gap: 25px; }
  .restaurant-story { gap: 45px; }
  .restaurant-story figure img { height: 430px; }
  .restaurant-contact { padding-block: 85px; }

  .barber-hero { min-height: 870px; display: flex; align-items: flex-end; }
  .barber-photo { position: absolute; inset: 0; }
  .barber-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #0f0e0c 5%, rgba(15,14,12,.8) 45%, rgba(15,14,12,.05) 78%); }
  .barber-photo img { object-position: 62% 20%; }
  .barber-hero-copy { position: relative; z-index: 2; padding: 330px 28px 70px; }
  .barber-hero h1 { font-size: 62px; }
  .barber-vertical { display: none; }
  .barber-strip { grid-template-columns: 1fr; }
  .barber-strip > * { min-height: 82px; border-bottom: 1px solid #2a2723; }
  .barber-strip > a { grid-column: auto; }
  .barber-service-list article { grid-template-columns: 30px 1fr; }
  .barber-service-list article > b { grid-column: 2; }
  .barber-studio-photo img { height: 450px; }
  .barber-review-head, .barber-review-list, .barber-contact { grid-template-columns: 1fr; }
  .barber-review-head p { text-align: left; }
  .barber-contact { padding: 70px 24px; }

  .garage-hero { min-height: 750px; align-items: flex-end; }
  .garage-hero > img { object-position: 67% center; }
  .garage-hero::after { background: linear-gradient(0deg, rgba(5,20,34,.97) 0%, rgba(5,20,34,.78) 58%, rgba(5,20,34,.15) 100%); }
  .garage-hero-copy { padding: 190px 0 75px; }
  .garage-hero h1 { font-size: 55px; }
  .garage-facts .wrap { grid-template-columns: 1fr; }
  .garage-facts article { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.13); }
  .garage-service-grid { grid-template-columns: 1fr; }
  .garage-method .wrap { gap: 45px; }
  .garage-contact .wrap { grid-template-columns: 1fr; gap: 35px; }
}