/* Shear & Co. Barbers — built in the motion-kit Parlour pack (dark-glass local service).
   The room is the background: one blurred, dimmed shop interior behind the whole page, frosted glass floating
   over it, and one green only where you book. Below: self-hosted fonts, the Parlour pack verbatim (minus the
   Google Fonts import), then this page's layer (ribbon offset, ?shot poster, chairs, time chips). */
@font-face{font-family:"Almarai";font-style:normal;font-weight:300;font-display:swap;src:url("../../fonts/examples/almarai-300-normal.woff2") format("woff2")}
@font-face{font-family:"Almarai";font-style:normal;font-weight:400;font-display:swap;src:url("../../fonts/examples/almarai-400-normal.woff2") format("woff2")}
@font-face{font-family:"Almarai";font-style:normal;font-weight:700;font-display:swap;src:url("../../fonts/examples/almarai-700-normal.woff2") format("woff2")}
@font-face{font-family:"Almarai";font-style:normal;font-weight:800;font-display:swap;src:url("../../fonts/examples/almarai-800-normal.woff2") format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url("../../fonts/examples/instrument-serif-400-normal.woff2") format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url("../../fonts/examples/instrument-serif-400-italic.woff2") format("woff2")}

/* Parlour style pack — tokens, type, chrome and booking components.
   Design category: dark-glass local service (book-now hospitality: barbershops, salons, studios, clinics).
   Reconstructed design language (an Amsterdam barbershop's treatments page, studied October 2026). Original code; no assets from the source site.
   Concept in one line: the room is the background — one blurred, dimmed photo of the shop behind everything, frosted glass floating over it, and green only where you book. */


:root {
  /* Palette. Near-black glass over a warm photo; white text in opacity steps; one green for "book". */
  --bg: #1a1a1a;                        /* body, shown only before the backdrop paints */
  --espresso: rgba(26, 22, 18, .8);     /* the pill nav: warm, not neutral */
  --slab: rgba(16, 16, 16, .85);        /* booking card: the most opaque glass */
  --glass: rgba(255, 255, 255, .04);    /* panels and option tiles */
  --glass-2: rgba(255, 255, 255, .03);  /* nested panels */
  --line: rgba(255, 255, 255, .08);     /* panel borders */
  --line-2: rgba(255, 255, 255, .12);   /* slab and option borders */
  --line-3: rgba(255, 255, 255, .06);   /* rows */
  --scrim: rgba(0, 0, 0, .75);          /* over the backdrop photo */
  --ink: #fff;
  --ink-72: rgba(255, 255, 255, .72);   /* lead paragraphs */
  --ink-60: rgba(255, 255, 255, .6);    /* nav links, body copy */
  --ink-40: rgba(255, 255, 255, .4);    /* prices, micro labels */
  --ink-25: rgba(255, 255, 255, .25);   /* chevrons */
  --ink-20: rgba(255, 255, 255, .2);    /* row numbers */
  --ghost: rgba(255, 255, 255, .04);    /* footer wordmark */
  --green: #2e7d32;                     /* filled CTAs */
  --green-2: #4caf50;                   /* eyebrows, live dot, hover text, selected rings */
  --glow: rgba(46, 125, 50, .35);       /* CTA hover halo */

  /* Stand-in "photos" (CSS only). Swap for real photography: see README §7. */
  --room:
    radial-gradient(16% 24% at 13% 22%, rgba(255, 190, 115, .9), transparent 70%),
    radial-gradient(11% 16% at 37% 12%, rgba(255, 214, 160, .75), transparent 70%),
    radial-gradient(5% 30% at 61% 38%, rgba(200, 40, 36, .7), transparent 70%),
    radial-gradient(4% 28% at 64% 40%, rgba(70, 100, 210, .55), transparent 70%),
    radial-gradient(28% 40% at 86% 68%, rgba(70, 110, 58, .7), transparent 70%),
    radial-gradient(40% 30% at 30% 92%, rgba(130, 76, 40, .65), transparent 70%),
    linear-gradient(180deg, #2c2219 0%, #1d1712 55%, #110e0b 100%);
  --portrait:
    radial-gradient(22% 18% at 52% 34%, rgba(214, 160, 120, .85), transparent 72%),
    radial-gradient(42% 46% at 50% 92%, rgba(232, 228, 220, .55), transparent 70%),
    radial-gradient(16% 22% at 18% 18%, rgba(255, 190, 120, .7), transparent 70%),
    radial-gradient(12% 30% at 84% 26%, rgba(190, 40, 40, .55), transparent 70%),
    linear-gradient(160deg, #3a2b1f, #17120e);

  /* Fonts. Both are free Google Fonts, same as the source. */
  --f-sans: "Almarai", "Helvetica Neue", Arial, sans-serif;        /* everything */
  --f-serif: "Instrument Serif", "Times New Roman", serif;          /* treatment names on tiles, the wordmark */

  /* Layout */
  --max: 1240px;
  --pad: clamp(16px, 4vw, 56px);
  --r-slab: 22px; --r-panel: 16px; --r-opt: 14px; --r-btn: 12px; --r-foot: 48px;

  /* Motion. Expo-out for anything that travels; Material standard for colour; the nav morph is deliberately slow. */
  --e-expo: cubic-bezier(.16, 1, .3, 1);
  --e-quart: cubic-bezier(.25, 1, .5, 1);
  --e-spring: cubic-bezier(.34, 1.56, .64, 1);
  --e-std: cubic-bezier(.4, 0, .2, 1);
  --d-hover: .3s; --d-btn: .4s; --d-rise: .8s; --d-open: .5s;
}

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font: 400 16px/1.5 var(--f-sans); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
::selection { color: #fff; background: rgba(46, 125, 50, .3); }
:focus-visible { outline: 2px solid var(--green-2); outline-offset: 3px; border-radius: 6px; }

/* Film grain: 2% fractal noise over everything. It is what stops flat glass from looking digital. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .02;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ── Backdrop: one photo of the room, scaled 1.05, blurred 12px, under a 75% black scrim. Fixed for the whole page. */
.backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.backdrop__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); filter: blur(12px); background: var(--room); }
.backdrop::after { content: ""; position: absolute; inset: 0; background: var(--scrim); }
.page { position: relative; z-index: 1; }

/* ── Type */
.eyebrow { font-size: 11px; font-weight: 700; line-height: 1.5; text-transform: uppercase; letter-spacing: .22em; color: var(--green-2); }
.label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; color: var(--ink-40); }
.display { font-size: clamp(44px, 4.8vw, 66px); font-weight: 400; line-height: 1.04; letter-spacing: -.02em; max-width: 16ch; }
.h-sec { font-size: clamp(28px, 2.6vw, 36px); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; }
.h-giant { font-size: clamp(32px, 5vw, 56px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; text-align: center; }
.lead { font-size: 17px; line-height: 1.625; color: var(--ink-72); max-width: 25em; }
.body { font-size: 15px; line-height: 1.7; color: var(--ink-60); }
.body + .body { margin-top: 1em; }
.serif { font-family: var(--f-serif); font-weight: 400; }
.num { font-variant-numeric: tabular-nums; }

/* Underline that grows from the left in green, 1px, 2px below the text. */
.slide { position: relative; }
.slide::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: var(--green); transition: width var(--d-hover) ease-out; }
.slide:hover::after, .slide:focus-visible::after { width: 100%; }

/* ── Buttons */
.btn-glow {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 56px; padding: 0 28px; border-radius: 999px; background: var(--green); color: #fff;
  font-size: 13.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .15em;
  transition: transform var(--d-btn) var(--e-expo), box-shadow var(--d-btn) var(--e-expo), background-color var(--d-btn) var(--e-expo);
}
.btn-glow:hover { transform: translateY(-1px); box-shadow: 0 0 20px var(--glow), 0 4px 16px rgba(0, 0, 0, .3); }
.btn-glow:active { transform: translateY(0) scale(.98); transition-duration: .1s; }
.btn-glow svg { width: 16px; height: 16px; transition: transform var(--d-btn) var(--e-expo); }
.btn-glow:hover svg { transform: translateX(3px); }
.btn-glow--sm { height: 48px; font-size: 13px; }
.btn-glow--block { display: flex; width: 100%; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .2); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  transition: border-color var(--d-hover) var(--e-std), color var(--d-hover) var(--e-std);
}
.btn-ghost:hover { border-color: var(--green-2); color: var(--green-2); }

/* ── Chips (rating, hours) */
.chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .1); background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: 12.5px; color: var(--ink-60);
}
.chip b { color: #fff; font-weight: 700; }
.chip svg { width: 14px; height: 14px; color: var(--green-2); flex: none; }
.stars { color: var(--green-2); letter-spacing: .12em; font-size: 12px; }

/* Live status: green dot with a slow ring. The only looping thing in the chrome, because it is live data. */
.live { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--green-2); }
.live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 rgba(76, 175, 80, .5); animation: live 2.4s ease-out infinite; }
.live.is-closed { color: var(--ink-40); }
.live.is-closed i { animation: none; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, .5); } 70%, 100% { box-shadow: 0 0 0 8px rgba(76, 175, 80, 0); } }

/* ── Liquid-glass rim: a 1.4px gradient border (bright top and bottom, clear sides) cut out with a mask. */
.rim { position: relative; }
.rim::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.25) 0%, rgba(255,255,255,.08) 20%, transparent 40%, transparent 60%, rgba(255,255,255,.08) 80%, rgba(255,255,255,.25) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box exclude, linear-gradient(#fff 0 0);
}

/* ── Nav: full-width transparent bar at the top → floating espresso pill after 40px of scroll.
   The morph is slow on purpose (width 2s, top 1.2s, radius 1.8s, all expo-out): it settles rather than snaps. */
.nav {
  position: fixed; left: 50%; top: 0; z-index: 50; width: 100%; max-width: 100%; height: 64px;
  transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 var(--pad); border-radius: 0; background: transparent;
  transition: max-width 2s var(--e-expo), top 1.2s var(--e-expo), height 1.2s var(--e-expo), padding 1.2s var(--e-expo),
    border-radius 1.8s var(--e-expo), background-color 1.2s, backdrop-filter 1.2s, box-shadow 1.5s;
}
.nav.rim::before { opacity: 0; transition: opacity 1.2s; }
.is-pill .nav {
  top: 12px; max-width: min(92%, 860px); height: 56px; padding: 0 8px 0 18px; border-radius: 999px;
  background: var(--espresso); backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
}
.is-pill .nav.rim::before { opacity: 1; }
.nav__mark { display: grid; justify-items: center; line-height: 1; flex: none; }
.nav__mark b { font: 400 26px/1 var(--f-serif); text-transform: uppercase; letter-spacing: .04em; }
.nav__mark small { font-size: 7px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--ink-60); margin-top: 3px; }
.nav__links { display: flex; gap: clamp(18px, 2.4vw, 32px); }
.nav__links a { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .15em; color: var(--ink-60); transition: color var(--d-hover) var(--e-std); }
.nav__links a:hover, .nav__links a[aria-current] { color: #fff; }
.nav__end { display: flex; align-items: center; gap: 10px; flex: none; }
.nav__lang { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.nav__book {
  display: inline-flex; align-items: center; height: 40px; padding: 0 22px; border-radius: var(--r-btn);
  border: 1px solid rgba(255, 255, 255, .3); font-size: 14px; font-weight: 600;
  transition: background-color .6s var(--e-expo), border-color .6s var(--e-expo), border-radius 1.2s var(--e-expo), box-shadow var(--d-btn) var(--e-expo);
}
.nav__book:hover { box-shadow: 0 0 20px var(--glow); }
.is-pill .nav__book { background: var(--green); border-color: transparent; border-radius: 999px; }
.nav__burger { display: none; width: 40px; height: 40px; border-radius: 50%; place-items: center; }
.nav__burger span, .nav__burger span::before { display: block; width: 18px; height: 1.5px; background: #fff; transition: transform var(--d-btn) var(--e-expo); }
.nav__burger span::before { content: ""; transform: translateY(6px); }
.is-menu .nav__burger span { transform: translateY(3px) rotate(45deg); }
.is-menu .nav__burger span::before { transform: rotate(-90deg); }

/* Mobile menu: a full-screen espresso blur, links rising in on a stagger. */
.menu {
  position: fixed; inset: 0; z-index: 40; display: grid; place-content: center; gap: 22px; text-align: center;
  background: rgba(15, 13, 11, .95); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
  opacity: 0; pointer-events: none; transition: opacity var(--d-open) var(--e-std);
}
.menu a { font-size: 30px; letter-spacing: -.02em; opacity: 0; transform: translateY(16px); transition: opacity .6s var(--e-expo), transform .6s var(--e-expo); transition-delay: calc(var(--i, 0) * 60ms + 80ms); }
.is-menu .menu { opacity: 1; pointer-events: auto; }
.is-menu .menu a { opacity: 1; transform: none; }

/* ── Reveal: rise 24px and fade, .8s expo-out, staggered 70ms inside [data-stagger]. */
.rise { opacity: 0; transform: translateY(24px); transition: opacity var(--d-rise) var(--e-expo), transform var(--d-rise) var(--e-expo); transition-delay: calc(var(--i, 0) * 70ms); }
.rise.is-in { opacity: 1; transform: none; }

/* ── Layout */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: clamp(80px, 12vh, 140px) 0; }

/* Hero: a sharper photo of the chair on top of the blurred room, darkened from the left so copy sits on it. */
.hero { position: relative; min-height: 100svh; display: grid; align-items: center; padding: 110px 0 72px; }
.hero__photo { position: absolute; inset: 0; z-index: -1; overflow: hidden;
  -webkit-mask: linear-gradient(180deg, #000 70%, transparent); mask: linear-gradient(180deg, #000 70%, transparent); }
.hero__photo > * { width: 100%; height: 100%; object-fit: cover; background: var(--portrait); background-size: 120% 100%; background-position: 70% 50%; filter: blur(2px); }
.hero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.35) 100%); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: clamp(32px, 6vw, 96px); align-items: center; }
.hero__copy > * + * { margin-top: 22px; }
.hero__copy .eyebrow { margin-top: 28px; }
.hero__copy .display { margin-top: 10px; }

/* ── Booking slab: the most opaque glass on the page, with a deep drop shadow and a 1px top highlight. */
.slab {
  border-radius: var(--r-slab); border: 1px solid var(--line-2); background: var(--slab); padding: clamp(16px, 2vw, 24px);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55), inset 0 1px 1px rgba(255, 255, 255, .09);
}
.slab__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.slab__head h2 { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.slab h3 { font-size: 17px; font-weight: 700; margin: 22px 0 12px; }
.slab .label { display: block; margin: 22px 0 10px; }
.slab__note { display: flex; gap: 8px; margin-top: 14px; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.45); }
.slab__note svg { width: 13px; height: 13px; flex: none; margin-top: 2px; }
.slab__fine { margin-top: 14px; text-align: center; font-size: 11.5px; color: rgba(255,255,255,.35); }
.slab__fine a { color: rgba(255,255,255,.55); }
.slab .btn-glow { margin-top: 16px; }

/* Option tiles (shops). Selected = green ring + faint green wash. */
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt {
  display: grid; gap: 2px; padding: 14px; border-radius: var(--r-opt); border: 1px solid var(--line-2); background: var(--glass);
  transition: border-color var(--d-hover) var(--e-std), background-color var(--d-hover) var(--e-std);
}
.opt:hover { border-color: rgba(255, 255, 255, .25); }
.opt b { font-size: 15px; font-weight: 700; }
.opt span { font-size: 12px; color: rgba(255, 255, 255, .45); }
.opt em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--green-2); }
.opt[aria-pressed="true"] { border-color: rgba(76, 175, 80, .75); background: rgba(46, 125, 50, .12); }
a.opt { grid-template-columns: 1fr auto; align-items: center; }
a.opt svg { width: 14px; height: 14px; color: var(--ink-40); transition: transform var(--d-hover) var(--e-expo), color var(--d-hover); }
a.opt:hover svg { transform: translateX(3px); color: var(--green-2); }

/* Treatment tiles: name in the serif, duration in micro caps, price heavy. One tile may carry a photo. */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tile {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 112px; padding: 10px 12px;
  border-radius: var(--r-opt); border: 1px solid rgba(255, 255, 255, .1);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.01)); text-align: left;
  transition: border-color var(--d-hover) var(--e-std), transform var(--d-btn) var(--e-expo);
}
.tile:hover { border-color: rgba(255, 255, 255, .25); transform: translateY(-2px); }
.tile[aria-pressed="true"] { border-color: rgba(76, 175, 80, .85); box-shadow: inset 0 0 0 1px rgba(76, 175, 80, .35); }
.tile__badge { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 999px; background: var(--green); font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.tile__name { position: relative; font: 400 18px/1.1 var(--f-serif); }
.tile__meta { position: relative; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-40); margin: 2px 0 6px; }
.tile__price { position: relative; font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tile__price s { font-size: 12px; font-weight: 400; color: var(--ink-40); margin-right: 4px; }
.tile__price .deal { color: var(--green-2); }
.tile__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--portrait); background-size: 220% 140%; background-position: 50% 30%; }
.tile--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.8)); }
.tile--photo > :not(.tile__photo) { z-index: 1; }

/* ── Split (experience): image card left, copy right. */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.photo-card { aspect-ratio: 4 / 5; border-radius: var(--r-slab); overflow: hidden; border: 1px solid var(--line); }
.photo-card > * { width: 100%; height: 100%; object-fit: cover; background: var(--portrait); transition: transform 1.2s var(--e-expo); }
.photo-card:hover > * { transform: scale(1.03); }
.split .h-sec { margin: 12px 0 22px; }

/* ── Glass panel + price list */
.panel {
  max-width: 768px; margin: 48px auto 0; padding: clamp(22px, 4vw, 40px); border-radius: var(--r-panel);
  border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
.rule { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 3px; color: rgba(255,255,255,.3); }
.rule::before, .rule::after { content: ""; height: 1px; background: var(--line); }
.rule:not(:first-child) { margin-top: 28px; }

.row { border-bottom: 1px solid var(--line-3); }
.row:last-child, .row:has(+ .rule) { border-bottom: 0; }
.row__btn { display: grid; grid-template-columns: 56px 1fr auto 24px; align-items: baseline; gap: 32px; width: 100%; padding: 24px 0; }
.row__no { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink-20); }
.row__name { font-size: 16px; font-weight: 600; transition: color var(--d-hover) var(--e-std); }
.row__price { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink-40); }
.row__chev { width: 16px; height: 16px; align-self: center; color: var(--ink-25); transition: color var(--d-hover) var(--e-std), transform var(--d-open) var(--e-expo); }
.row__btn:hover .row__name, .row__btn[aria-expanded="true"] .row__name { color: var(--green-2); }
.row__btn:hover .row__chev { color: rgba(255, 255, 255, .5); }
.row__btn[aria-expanded="true"] .row__chev { transform: rotate(180deg); color: var(--green-2); }
/* Height animates with the grid 0fr → 1fr trick: no measuring, no JS heights. */
.row__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d-open) var(--e-expo); }
.row__body > div { overflow: hidden; min-height: 0; }
.row__btn[aria-expanded="true"] + .row__body { grid-template-rows: 1fr; }
.sub { margin: 0 0 24px 88px; padding: 20px; border-radius: var(--r-panel); border: 1px solid var(--line); background: var(--glass-2); }
.sub .label { display: block; margin-bottom: 12px; }
.sub p { margin-top: 12px; font-size: 12px; color: rgba(255,255,255,.4); }

/* ── Reviews marquee: two glass rows drifting in opposite directions, 78s / 84s, paused on hover or focus. */
.marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee + .marquee { margin-top: 16px; }
.marquee__track { display: flex; gap: 16px; width: max-content; animation: marquee 78s linear infinite; }
.marquee--rev .marquee__track { animation-name: marquee-rev; animation-duration: 84s; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes marquee-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.quote { width: 320px; flex: none; padding: 20px 22px; border-radius: var(--r-panel); border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.quote p { margin: 10px 0 14px; font-size: 14px; line-height: 1.6; color: var(--ink-72); }
.quote cite { font-style: normal; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; color: var(--ink-40); }

/* ── Closing CTA */
.cta { text-align: center; max-width: 640px; margin: 0 auto; }
.cta p { margin: 18px auto 28px; font-size: 15px; line-height: 1.7; color: var(--ink-60); }

/* ── Footer: rounded top, black glass, and the wordmark at 20vw in 4% white behind the columns. */
.foot {
  position: relative; overflow: hidden; margin-top: 40px; padding: 72px var(--pad) 32px;
  border-top: 1px solid rgba(255, 255, 255, .1); border-radius: var(--r-foot) var(--r-foot) 0 0;
  background: rgba(0, 0, 0, .6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.foot__ghost {
  position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%); z-index: 0; pointer-events: none; user-select: none;
  font-size: 20vw; font-weight: 700; line-height: 1; letter-spacing: .15em; text-transform: uppercase; color: var(--ghost); white-space: nowrap;
}
.foot__cols { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; min-height: 260px; }
.foot__brand b { font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.foot__brand p { margin-top: 14px; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.5); max-width: 22em; }
.foot h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; color: rgba(255,255,255,.7); margin-bottom: 18px; }
.foot ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.foot li a { font-size: 13px; color: rgba(255,255,255,.5); transition: color var(--d-hover) var(--e-std); }
.foot li a:hover { color: #fff; }
.foot__legal { position: relative; z-index: 1; max-width: var(--max); margin: 48px auto 0; display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,.3); }

/* ── Mobile dock: a frosted bottom bar with the book button, shown once the hero has scrolled away. */
.dock {
  position: fixed; inset: auto 0 0; z-index: 40; display: none; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, .1);
  background: rgba(14, 14, 14, .95); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  transform: translateY(100%); transition: transform var(--d-open) var(--e-expo);
}
.dock small { display: block; font-size: 11px; color: var(--ink-40); text-transform: uppercase; letter-spacing: .12em; }
.dock b { font-size: 17px; }
.is-docked .dock { transform: none; }

/* ── Responsive */
@media (max-width: 960px) {
  .nav__links { display: none; }
  .nav__burger { display: grid; }
  .hero__grid, .split { grid-template-columns: 1fr; }
  .hero { padding-top: 96px; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .nav__book { display: none; }
  .row__btn { grid-template-columns: 1fr auto 20px; gap: 16px; padding: 20px 0; }
  .row__no { display: none; }
  .sub { margin-left: 0; }
  .opts { grid-template-columns: 1fr; }
  .foot { border-radius: 32px 32px 0 0; }
  .foot__cols { grid-template-columns: 1fr; }
  .dock { display: flex; }
  .page { padding-bottom: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; transition-delay: 0s !important; animation: none !important; }
  .rise { opacity: 1; transform: none; }
}

/* ───────────── Shear & Co. page layer ───────────── */
:root{--rib:32px}
html{scroll-padding-top:110px}
/* the G7 ribbon sits above the nav; the pill drops below it */
.nav{top:var(--rib)}
.is-pill .nav{top:calc(var(--rib) + 12px)}
html.shot{--rib:0px}
.nav__mark b{font-size:24px}
.nav__mark b em{font-style:italic;text-transform:none;color:var(--green-2)}
.display em{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:0}

/* booking: the slab is a demonstration form */
.slab .times{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 22px}
.slab .ex-chip{height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2);background:var(--glass);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-72);transition:border-color .3s var(--e-std),background-color .3s var(--e-std),color .3s var(--e-std)}
.slab .ex-chip:hover{border-color:rgba(255,255,255,.3);color:#fff}
.slab .ex-chip[aria-pressed="true"]{border-color:rgba(76,175,80,.8);background:rgba(76,175,80,.1);color:#fff}
.slab .opts--four{grid-template-columns:1fr 1fr}
.slab [data-note]:empty{display:none}
.slab [data-note]{margin-top:12px;padding:12px 14px;border-radius:12px;border:1px solid rgba(76,175,80,.4);background:rgba(76,175,80,.08);font-size:13px;line-height:1.5;color:var(--ink-72)}

/* the chairs: three glass cards, each with a stand-in portrait and the next free slot */
.chairs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:48px}
.chair{position:relative;border-radius:22px;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);overflow:hidden;transition:transform .8s var(--e-expo),border-color .3s var(--e-std)}
.chair:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.16)}
.chair__ph{aspect-ratio:4/3;background:var(--portrait);background-size:150% 120%;transition:transform 1.2s var(--e-expo)}
.chair:nth-child(2) .chair__ph{background-position:20% 40%;filter:hue-rotate(-12deg)}
.chair:nth-child(3) .chair__ph{background-position:90% 60%;filter:saturate(.8)}
.chair:hover .chair__ph{transform:scale(1.03)}
.chair__body{padding:22px 22px 24px}
.chair__no{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-40)}
.chair h3{margin-top:8px;font:400 34px/1 var(--f-serif)}
.chair p{margin-top:10px;font-size:14.5px;line-height:1.6;color:var(--ink-60)}
.chair .live{margin-top:16px}
.chair .live span{font-variant-numeric:tabular-nums}

/* ?shot — the 600×780 poster: the hero and slab, nothing else */
.shot .hero{min-height:0;padding:84px 0 24px}
.shot .hero__grid{grid-template-columns:1fr;gap:22px}
.shot .lead,.shot .hero__copy .chip:last-child,.shot .slab__note,.shot .slab__fine,.shot .dock{display:none}

@media (max-width:960px){.chairs{grid-template-columns:1fr}}
.hero{padding-top:calc(110px + var(--rib))}
@media (max-width:960px){.hero{padding-top:calc(96px + var(--rib))}}
.center{text-align:center;margin-top:40px}
.reviews .h-giant{margin-bottom:40px}