/* ============================================================
   ELEMENT Barbershop — Styles
   Mobile-first · Bauhaus · Archivo
   ============================================================ */

/* ── 1. TOKENS ────────────────────────────────────────────── */
:root {
  --cream:          #f5f0e8;
  --near-black:     #1a1a1a;
  --primary-red:    #E63329;
  --primary-blue:   #1B4FD8;
  --primary-yellow: #F5C200;
  --black:          #000000;
  --white:          #ffffff;
  --gray-mid:       #6b6b6b;
  --gray-light:     #e2ddd3;

  --nav-height: clamp(58px, 7vw, 68px);

  /* Shared content grid — every standard section uses these.
     Full-bleed bands (hero) are deliberate exceptions. */
  --content-max: 1320px;
  --content-pad: clamp(1.25rem, 5vw, 4rem);

  --text-xs:   clamp(0.7rem,  1.2vw, 0.8rem);
  --text-sm:   clamp(0.85rem, 1.5vw, 0.95rem);
  --text-base: clamp(1rem,    1.8vw, 1.1rem);
  --text-lg:   clamp(1.1rem,  2vw,   1.3rem);
  --text-hero: clamp(2.6rem,  6.5vw, 4.4rem);

  --sp-xs:  clamp(0.4rem,  1vw,  0.6rem);
  --sp-sm:  clamp(0.75rem, 2vw,  1.1rem);
  --sp-md:  clamp(1rem,    2.5vw, 1.5rem);
  --sp-lg:  clamp(1.5rem,  4vw,  2.5rem);
  --sp-xl:  clamp(2rem,    5vw,  4rem);

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --shadow-card: 0 12px 40px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-nav:  0 1px 0 rgba(0,0,0,0.06), 0 4px 20px rgba(0,0,0,0.07);

  --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── 2. RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* clip (not hidden!) at the root: kills horizontal document scroll from
     edge-bleeding shapes WITHOUT creating a scroll container, so the
     sticky nav keeps working. body-level clip alone doesn't propagate. */
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

body {
  font-family: 'Archivo', sans-serif;
  background: var(--cream);
  color: var(--near-black);
  line-height: 1.5;
  /* `clip` (not `hidden`): overflow-x: hidden turns body into a scroll
     container, which silently BREAKS position: sticky on the nav.
     `clip` cuts overflow without creating a scroll container. */
  overflow-x: hidden;
  overflow-x: clip;
}
body.menu-open { overflow: hidden; }

img { display: block; max-width: 100%; height: auto; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

:focus-visible {
  outline: 3px solid var(--primary-blue);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── 3. LAYOUT ────────────────────────────────────────────── */
.container {
  width: min(100%, var(--content-max));
  margin-inline: auto;
  padding-inline: var(--content-pad);
}

/* ── 4. BUTTONS ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.85em 1.5em;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--transition), background var(--transition),
              box-shadow var(--transition), color var(--transition),
              border-color var(--transition);
}
.btn__arrow { transition: transform var(--transition); }

.btn--primary {
  background: var(--primary-blue);
  color: var(--white);
  border-color: var(--primary-blue);
}
.btn--primary:hover, .btn--primary:focus-visible {
  background: #1340b0;
  border-color: #1340b0;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(27,79,216,0.38);
}
.btn--primary:hover .btn__arrow,
.btn--primary:focus-visible .btn__arrow { transform: translateX(4px); }

/* ── 5. NAVIGATION ────────────────────────────────────────── */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  transition: background var(--transition), box-shadow var(--transition);
}
.site-header.scrolled {
  background: rgba(245, 240, 232, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-nav);
}

.nav {
  display: flex;
  align-items: center;
  height: var(--nav-height);
  transition: height var(--transition);
  gap: var(--sp-md);
  /* Full-width, padded like the HERO text column (not the centered container)
     so the logo aligns with the headline's left edge at every width */
  width: 100%;
  max-width: none;
  padding-inline: clamp(1.25rem, 5vw, 4rem);
}

.nav__logo { display: flex; align-items: center; flex-shrink: 0; }
.nav__logo-svg {
  height: clamp(24px, 3.5vw, 33px);
  width: auto;
  transition: opacity var(--transition);
}
.nav__logo:hover .nav__logo-svg { opacity: 0.75; }

/* Desktop-only shape clusters — hidden on mobile */
.seam-tl, .peek-tr { display: none; }

/* Hidden clip-path definition — never participates in layout */
.hero__clip-def { position: absolute; width: 0; height: 0; pointer-events: none; }

/* Subtext-row wrapper is transparent by default (desktop): the <p> flows as
   a normal hero__content child. Mobile turns it into a flex row. The mobile
   cream shape cluster is hidden everywhere except the mobile block. */
.hero__sub-row { display: contents; }
.hero__shapes  { display: none; }

.nav__links {
  display: none;
  align-items: center;
  gap: var(--sp-lg);
  margin-inline-start: auto;
}
.nav__link {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--near-black);
  position: relative;
  padding-block: 0.25em;
  transition: color var(--transition);
}
.nav__link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 2px;
  background: var(--primary-blue);
  transition: width var(--transition);
}
.nav__link:hover, .nav__link:focus-visible { color: var(--primary-blue); }
.nav__link:hover::after, .nav__link:focus-visible::after { width: 100%; }

.nav__cta { display: none; }

/* Hamburger with Bauhaus bars inside a bordered box */
.nav__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 12px 11px;
  margin-inline-start: auto;
  border: 1.5px solid rgba(0,0,0,0.18);
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.nav__hamburger:hover { background: rgba(0,0,0,0.04); }

.hamburger__bar {
  display: block;
  height: 2.5px;
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition), width var(--transition);
}
.hamburger__bar--red    { background: var(--primary-red);    width: 100%; }
.hamburger__bar--blue   { background: var(--primary-blue);   width: 100%; }
.hamburger__bar--yellow { background: var(--primary-yellow); width: 65%; }

.nav__hamburger[aria-expanded="true"] .hamburger__bar--red {
  transform: translateY(7.5px) rotate(45deg); width: 100%;
}
.nav__hamburger[aria-expanded="true"] .hamburger__bar--blue {
  opacity: 0; transform: scaleX(0);
}
.nav__hamburger[aria-expanded="true"] .hamburger__bar--yellow {
  transform: translateY(-7.5px) rotate(-45deg); width: 100%;
}

/* ── 6. MOBILE MENU ───────────────────────────────────────── */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--cream);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  pointer-events: none;
}
.mobile-menu:not([hidden]) {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.mobile-menu[hidden] { display: block !important; }

.mobile-menu__shapes {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 0;
}
.mm-shape { position: absolute; }
.mm-shape--red-circle {
  bottom: -50px; right: -50px;
  width: clamp(140px, 32vw, 200px); height: clamp(140px, 32vw, 200px);
  border-radius: 50%; background: var(--primary-red);
}
.mm-shape--blue-rect {
  bottom: 60px; right: -20px;
  width: clamp(70px, 16vw, 100px); height: clamp(90px, 20vw, 130px);
  background: var(--primary-blue);
}
.mm-shape--yellow-circle {
  bottom: -10px; right: clamp(90px, 22vw, 150px);
  width: clamp(55px, 12vw, 80px); height: clamp(55px, 12vw, 80px);
  border-radius: 50%; background: var(--primary-yellow);
}
.mm-shape--black-rect {
  bottom: -10px; right: clamp(80px, 20vw, 140px);
  width: clamp(30px, 7vw, 50px); height: clamp(30px, 7vw, 50px);
  background: var(--black);
}

.mobile-menu__inner {
  position: relative; z-index: 1;
  min-height: 100dvh;
  padding: 0 clamp(1.5rem, 6vw, 3rem) clamp(2rem, 8vw, 4rem);
  display: flex; flex-direction: column;
}

.mobile-menu__header {
  display: flex; align-items: center;
  justify-content: space-between;
  height: var(--nav-height); flex-shrink: 0;
}
.mobile-menu__brand { display: flex; flex-direction: column; gap: 3px; }
.mobile-menu__logo {
  height: clamp(36px, 6vw, 46px);
  width: auto; object-fit: contain;
}
.mobile-menu__sub {
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.14em; color: var(--primary-blue);
}
.mobile-menu__close {
  width: clamp(46px, 10vw, 56px); height: clamp(46px, 10vw, 56px);
  background: var(--primary-blue); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 700;
  border-radius: var(--radius-sm); flex-shrink: 0;
  transition: background var(--transition), transform var(--transition);
}
.mobile-menu__close:hover { background: #1340b0; transform: scale(0.95); }

.mobile-menu__nav-label {
  display: flex; align-items: center; gap: 0.8rem;
  margin-block: var(--sp-lg) var(--sp-sm);
  font-size: var(--text-xs); font-weight: 800;
  letter-spacing: 0.18em; color: var(--primary-blue);
}
.nav-label__shapes { display: flex; align-items: center; gap: 6px; }
.shape-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.shape-dot--red    { background: var(--primary-red); }
.shape-dot--blue   { background: var(--primary-blue); border-radius: 0; }
.shape-dot--yellow {
  background: var(--primary-yellow); border-radius: 0;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  width: 10px; height: 10px;
}

.mobile-menu__list { flex: 1; }

.mobile-menu__link {
  display: flex; align-items: center; gap: var(--sp-sm);
  padding-block: var(--sp-sm);
  text-decoration: none; color: var(--near-black);
  transition: color var(--transition);
}
.mobile-menu__link:hover, .mobile-menu__link:focus-visible { color: var(--primary-blue); }

.menu-link__num {
  font-size: var(--text-sm); font-weight: 800;
  min-width: 2.5ch; opacity: 0.7;
  transition: opacity var(--transition);
}
.mobile-menu__link:hover .menu-link__num { opacity: 1; }

.menu-link__text {
  font-size: clamp(2rem, 8.5vw, 3.5rem);
  font-weight: 900; line-height: 1.1; letter-spacing: -0.02em;
}

.menu-divider {
  height: 1px; background: var(--gray-light);
  position: relative; display: flex;
  justify-content: center; align-items: center;
}
.divider-mark {
  display: block; position: absolute;
  top: 50%; transform: translateY(-50%);
}
.divider-mark--red   { width: 8px; height: 8px; border-radius: 50%; background: var(--primary-red); }
.divider-mark--blue  { width: 10px; height: 10px; background: var(--primary-blue); }
.divider-mark--yellow{
  width: 10px; height: 10px; background: var(--primary-yellow);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.mobile-menu__cta {
  display: flex; justify-content: center;
  width: 100%; margin-block: var(--sp-md);
  padding-block: 1.05em; font-size: var(--text-base);
}

.mobile-menu__contacts { display: flex; flex-direction: column; }
.menu-contact {
  display: flex; align-items: center; gap: var(--sp-sm);
  padding-block: var(--sp-sm);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--near-black); text-decoration: none;
  transition: color var(--transition);
}
.menu-contact:hover { color: var(--primary-blue); }
.menu-contact__icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1.5px solid var(--gray-light);
  border-radius: var(--radius-md); flex-shrink: 0;
}
.menu-contact__icon svg { width: 19px; height: 19px; }
.menu-contact__icon--yellow { border-color: var(--primary-yellow); }
.menu-contact__icon--yellow svg { stroke: var(--primary-yellow); }
.menu-contact__sub { font-size: var(--text-xs); font-weight: 400; color: var(--gray-mid); }
.menu-contact-divider { border: none; border-top: 1px solid var(--gray-light); }

/* ── 7. HERO — MOBILE ─────────────────────────────────────── */
.hero {
  display: flex;
  flex-direction: column;
  padding-block-start: var(--nav-height);
  position: relative;
}

.hero__content {
  display: flex; flex-direction: column;
  gap: var(--sp-md);
  padding: var(--sp-lg) clamp(1.25rem, 5vw, 4rem) var(--sp-md);
  position: relative;
}

.hero__eyebrow {
  font-size: var(--text-xs); font-weight: 800;
  letter-spacing: 0.18em; color: var(--primary-blue);
}

.hero__headline {
  font-size: var(--text-hero); font-weight: 800;
  line-height: 1.0; letter-spacing: -0.025em; color: var(--near-black);
}
.hero__highlight { font-style: normal; color: var(--primary-red); }
.hero__period    { color: var(--primary-blue); }

.hero__sub {
  font-size: var(--text-base); color: var(--gray-mid);
  max-width: 44ch; line-height: 1.6;
}

/* ── CTA block ── */
.hero__ctas {
  display: flex; flex-direction: column;
  align-items: center; gap: var(--sp-sm);
}

/* Primary button */
.hero__cta-primary {
  display: inline-flex; align-items: center; gap: 0.45em;
  width: 100%; justify-content: center;
  padding: 0.9em 1.5em;
  font-family: inherit; font-size: var(--text-sm); font-weight: 700;
  background: var(--primary-blue); color: var(--white);
  border: 2px solid var(--primary-blue);
  border-radius: var(--radius-sm); text-decoration: none;
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}
.hero__cta-primary:hover, .hero__cta-primary:focus-visible {
  background: #1340b0; border-color: #1340b0;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(27,79,216,0.38);
}
.hero__cta-primary .btn__arrow { transition: transform var(--transition); display: inline-block; }
.hero__cta-primary:hover .btn__arrow { transform: translateX(4px); }

/* Mobile secondary: plain text link with arrow */
.hero__cta-secondary {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: inherit; font-size: var(--text-sm); font-weight: 700;
  color: var(--primary-blue);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  background: none; border: none; padding: 0;
  cursor: pointer;
  transition: color var(--transition), gap var(--transition);
}
.hero__cta-secondary:hover, .hero__cta-secondary:focus-visible {
  color: #1340b0; gap: 0.6em;
}
.hero__cta-secondary .btn__arrow { display: inline-block; }

/* Reviews */
.hero__reviews {
  display: flex; align-items: center;
  gap: 0.5rem; flex-wrap: wrap;
}
.reviews__stars  { color: var(--primary-yellow); font-size: 1.2rem; letter-spacing: -1px; }
.reviews__score  { font-size: var(--text-lg); font-weight: 900; }
.reviews__divider{ color: var(--gray-light); }
.reviews__count  { font-size: var(--text-sm); color: var(--gray-mid); }

/* Desktop corner accent hidden on mobile */
.hero__corner-accent { display: none; }

/* ── IMAGE WRAP ── */
.hero__image-wrap {
  position: relative;
  margin-inline: clamp(1.25rem, 5vw, 4rem);
  margin-block-end: var(--sp-xl);
  overflow: visible;
}

/* Clip just the photo; shapes can overflow */
.hero__img-clip {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 2;
}

/* <picture> is layout-transparent — the img itself fills the clip box */
.hero__img-clip picture { display: contents; }

.hero__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 38%;
  display: block;
}

/* ── BAUHAUS SHAPES ── */
.bauhaus--red-circle,
.bauhaus--yellow-circle,
.bauhaus--blue-rect {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

/* Mobile shapes */
.bauhaus--red-circle {
  top: -22px; right: -18px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: var(--primary-red);
}
.bauhaus--yellow-circle {
  top: 36%; left: -18px;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--primary-yellow);
}
.bauhaus--blue-rect {
  bottom: 20%; right: -10px;
  width: 11px; height: 64px;
  background: var(--primary-blue);
  border-radius: 0;
}

/* ── 7b. INFO STRIP (below hero, all screen sizes) ────────── */
.info-strip {
  background: var(--white);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);     /* soft separation, no colored borders */
}
.info-strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 2rem;
  min-height: 76px;
  padding-block: 0.85rem;
  /* Align to the HERO text column's left edge (hero is full-bleed with its own
     padding scale — not the centered container), so the strip lines up with
     the "PREMIUM BARBERSHOP" label above. */
  width: 100%;
  max-width: none;
  margin: 0;
  padding-inline: clamp(1.25rem, 5vw, 4rem);
}
@media (min-width: 860px) {
  .info-strip__inner { padding-inline: clamp(1.25rem, 4vw, 4rem); }
}
@media (min-width: 1300px) {
  .info-strip__inner { padding-inline-start: clamp(3rem, 5vw, 6rem); }
}
.info-strip__item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.info-strip__link { color: inherit; text-decoration: none; cursor: pointer; }
.info-strip__link .info-strip__value { transition: color var(--transition); }
.info-strip__link:hover .info-strip__value,
.info-strip__link:focus-visible .info-strip__value { color: var(--primary-blue); }

/* Subtle "opens in maps" affordance: small blue arrow after the address */
.info-strip__link .info-strip__value::after {
  content: '↗';
  display: inline-block;
  margin-inline-start: 0.4em;
  font-size: 0.8em;
  font-weight: 700;
  color: var(--primary-blue);
  transition: transform var(--transition);
}
.info-strip__link:hover .info-strip__value::after,
.info-strip__link:focus-visible .info-strip__value::after {
  transform: translate(2px, -2px);
}

.info-strip__icon {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%; flex-shrink: 0;
}
.info-strip__icon svg { width: 16px; height: 16px; }
.info-strip__icon--blue { background: rgba(27, 79, 216, 0.1); }
.info-strip__icon--blue svg { stroke: var(--primary-blue); }
.info-strip__icon--red  { background: rgba(230, 51, 41, 0.1); }
.info-strip__icon--red svg  { stroke: var(--primary-red); }

.info-strip__label { font-size: var(--text-xs); font-weight: 600; color: var(--gray-mid); letter-spacing: 0.02em; }
.info-strip__value { font-size: var(--text-base); font-weight: 700; letter-spacing: -0.01em; }
.info-strip__sub   { font-size: var(--text-xs); color: var(--gray-mid); }
/* Compact text used only by the phone-width card (enabled <860px) */
.info-strip__sub--mobile { display: none; }

/* Vertical divider between items — only when they sit side by side */
@media (min-width: 640px) {
  /* ~64px total gap: 32px each side of the hairline divider */
  .info-strip__item + .info-strip__item {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    padding-inline-start: 2rem;
  }
  .info-strip__inner { gap: 0.75rem 0; }
  .info-strip__item:first-child { padding-inline-end: 2rem; }
}

/* ── 7c. ≥1280px: the SAME component becomes a floating card ──
   One markup, two layouts. The card straddles the text/image seam
   (image starts at 52%): ~45px past the seam, the rest on the cream.
   Anchored low over the floor/radiator band of the photo. */
@media (min-width: 1280px) {
  main { position: relative; }

  .info-strip {
    position: absolute;
    /* Straddle the seam (~25px past it), but never closer than 460px to the
       left viewport edge — keeps a ≥40px gap to the CTA buttons at 1280px */
    left: max(calc(52% - 275px), 460px);
    bottom: 9%;
    z-index: 10;
    border-radius: var(--radius-sm);  /* same radius as the buttons */
    box-shadow: 0 14px 40px rgba(26, 26, 26, 0.14), 0 2px 8px rgba(26, 26, 26, 0.05);
  }
  .info-strip__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 0;
    width: auto;
    max-width: 320px;
    padding: 1.1rem 1.4rem;
  }
  .info-strip__item {
    padding-block: 0.75rem;
  }
  .info-strip__item:first-child {
    padding-block-start: 0;
    padding-inline-end: 0;
  }
  .info-strip__item + .info-strip__item {
    border-left: none;
    padding-inline-start: 0;
    padding-block-end: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);  /* divider goes horizontal */
  }
}

/* ── 8. STICKY BAR ────────────────────────────────────────── */
.sticky-bar {
  display: flex;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 800;
  padding: var(--sp-xs) clamp(1.25rem, 5vw, 4rem);
  padding-block-end: max(var(--sp-xs), env(safe-area-inset-bottom));
  background: var(--cream);
  border-top: 1px solid var(--gray-light);
}
.sticky-bar__btn {
  width: 100%; justify-content: center; padding-block: 0.95em;
}

/* ── 9. DESKTOP (860px+) ──────────────────────────────────── */
@media (min-width: 860px) {

  /* Nav: solid cream bar on its own row — hero starts below it */
  .site-header {
    position: sticky;
    top: 0;
    inset: auto;
    background: var(--cream);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
  }
  .site-header.scrolled {
    background: var(--cream);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.05);
  }
  /* Condense slightly once scrolled — quiet "we've left the top" signal */
  .site-header.scrolled .nav {
    height: calc(var(--nav-height) - 10px);
  }

  /* Match the hero text column's desktop padding scale */
  .nav { padding-inline: clamp(1.25rem, 4vw, 4rem); }

  /* Generous, even spacing — no separators, the whitespace is the rhythm */
  .nav__links   { display: flex; gap: clamp(2rem, 3.2vw, 3rem); }

  /* CTA: compact in the bar, clearly separated from the link group */
  .nav__cta {
    display: inline-flex;
    padding: 0.7em 1.4em;
    margin-inline-start: clamp(0.75rem, 2.5vw, 2.25rem);
  }
  .nav__hamburger { display: none; }
  .sticky-bar   { display: none; }

  /* Hero: deliberate FULL-BLEED band — image runs to the viewport edge.
     Inner content still aligns to the shared grid via its own padding.
     Nav + hero together fill exactly one viewport; can grow on short screens. */
  .hero {
    flex-direction: row;
    align-items: stretch;
    min-height: calc(100vh - var(--nav-height));
    padding-block-start: 0;
    overflow: hidden;
  }

  /* Left content column — text gets ~52% */
  .hero__content {
    flex: 0 0 52%;
    justify-content: center;
    gap: clamp(0.75rem, 2vh, 1.5rem);
    padding: var(--sp-lg) clamp(1.25rem, 4vw, 4rem) var(--sp-lg);
    overflow: hidden;
  }

  /* Desktop secondary CTA: outline button */
  .hero__cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.85em 1.5em;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--primary-blue);
    background: transparent;
    border: 2px solid var(--primary-blue);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: transform var(--transition), background var(--transition),
                color var(--transition), box-shadow var(--transition), gap var(--transition);
  }
  .hero__cta-secondary:hover, .hero__cta-secondary:focus-visible {
    background: var(--primary-blue); color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(27,79,216,0.28);
    gap: 0.65em;
  }

  /* CTAs row */
  .hero__ctas {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-sm);
  }
  .hero__cta-primary {
    width: auto;
    justify-content: flex-start;
  }

  /* Bauhaus corner cluster — anchored to bottom-left corner of the content,
     matching the mockup: blue triangle, red rectangle, black square, yellow circle */
  .hero__corner-accent {
    display: block;
    position: absolute;
    bottom: 0; left: 0;
    width: 150px; height: 120px;
    pointer-events: none; z-index: 2;
  }
  .corner-triangle {
    position: absolute;
    bottom: 56px; left: 0;
    width: 58px; height: 58px;
    background: var(--primary-blue);
    clip-path: polygon(0 0, 0 100%, 100% 100%);
  }
  .corner-rect {
    position: absolute;
    bottom: 0; left: 58px;
    width: 40px; height: 78px;
    background: var(--primary-red);
  }
  .corner-square {
    position: absolute;
    bottom: 0; left: 0;
    width: 58px; height: 56px;
    background: var(--near-black);
  }
  .corner-circle {
    position: absolute;
    bottom: 0; left: 86px;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--primary-yellow);
  }

  /* Right image column — tall area, full hero height */
  .hero__image-wrap {
    flex: 0 0 48%;
    margin: 0;
    overflow: visible;
  }
  .hero__img-clip {
    position: absolute;
    inset: 0;
    border-radius: 0;
    aspect-ratio: unset;
    overflow: hidden;
  }
  .hero__img {
    /* IMPORTANT — do not "fix" this: the chair + Bauhaus posters live on the
       image's LEFT side; 25% keeps them in frame and crops the window side.
       The ceiling is already trimmed out of the FILE (robust across screen
       sizes — object-position % can't do that on screens with no vertical
       crop). The 60% is only a bottom bias for ultrawide/short viewports;
       posters stay safe since the file's top edge now sits just above them. */
    object-position: 25% 60%;
  }

  /* Mobile shape set: removed on desktop */
  .bauhaus--yellow-circle,
  .bauhaus--blue-rect,
  .bauhaus--red-circle { display: none; }

  /* Top-left seam cluster: red bar + yellow circle + blue vertical bar */
  /* Top-left seam cluster — EXPERIMENT:
     wider red rect flush to the nav's bottom edge, larger yellow circle
     sitting on top of it, wider blue rect below and slightly right.

     PREVIOUS VERSION (reference — restore by swapping the blocks):
     .seam-tl        { top: 30px; left: 0; width: 50px; height: 180px; }
     .seam-tl__red   { top: 0;    left: -22px; width: 44px; height: 44px; }
     .seam-tl__yellow{ top: 30px; left: -4px;  width: 40px; height: 40px; }
     .seam-tl__blue  { top: 62px; left: -13px; width: 26px; height: 88px; }
  */
  .seam-tl {
    display: block;
    position: absolute;
    top: 0; left: 5px;                /* flush with the nav's bottom edge;
                                         red's right edge touches the image's left edge */
    width: 90px; height: 240px;
    pointer-events: none; z-index: 4;
  }
  .seam-tl__red {
    position: absolute;
    top: 0; left: -47px;              /* right edge stays on the image's left edge */
    width: 42px; height: 95px;        /* hangs from the nav line */
    background: var(--primary-red);
  }
  .seam-tl__yellow {
    position: absolute;
    top: 59px; left: -48px;           /* test: nudged right */
    width: 60px; height: 60px;
    border-radius: 50%;
    background: var(--primary-yellow);
    z-index: 2;                       /* dot stays above the blue rect */
  }
  .seam-tl__blue {
    position: absolute;
    top: 98px; left: -30px;           /* under the dot; centered on the image's left edge */
    width: 51px; height: 110px;
    background: var(--primary-blue);
    z-index: 1;
  }

  /* Top-right: corner framing device — the red circle bleeds off the image's
     right edge (clipped = attached to the boundary), the blue bar overlaps
     the circle's lower-left, chaining the cluster to the photograph. */
  .peek-tr {
    display: block;
    position: absolute;
    top: 24px; right: 0;
    width: 70px; height: 160px;
    pointer-events: none; z-index: 4;
  }
  .peek-tr__red {
    position: absolute;
    top: 0; right: -9px;              /* nudged left, still cut by the edge */
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--primary-red);
    z-index: 2;                       /* circle stays on top of the bar */
  }
  .peek-tr__blue {
    position: absolute;
    top: 38px; right: 0;              /* flush with the screen's right edge */
    width: 26px; height: 84px;
    background: var(--primary-yellow);  /* yellow bar (class name kept for HTML stability) */
  }

}

/* ── 9m. MOBILE HERO (<860px) — desktop untouched ─────────── */
@media (max-width: 859px) {

  /* A touch more height in the mobile bar so the logo + hamburger breathe
     from the top edge (was 58px). Propagates to the hero's top offset too. */
  :root { --nav-height: clamp(64px, 18vw, 70px); }

  /* Logo: lighter presence in the mobile bar (refined, not dominant);
     scales down on ≤360px screens so it never collides with the hamburger */
  .nav__logo-svg { height: clamp(24px, 7.5vw, 28px); }

  /* Natural height: content + full photo, no forced viewport stretching.
     The ENTIRE interior (posters, chair, couch) fits the first scroll. */
  .hero { min-height: 0; }
  .hero__content {
    justify-content: flex-start;
    gap: var(--sp-sm);
    /* Text indented 17px to make room for the red editorial rule on the left */
    padding-block: var(--sp-md) var(--sp-sm);
    padding-inline-start: calc(clamp(1.25rem, 5vw, 4rem) + 17px);
  }
  /* Red vertical rule — Bauhaus editorial anchor. Ends at the CTA's
     bottom edge (not the rating): bottom = content padding + rating row
     height + the gap/margin above it */
  .hero__content::before {
    content: '';
    position: absolute;
    left: clamp(1.25rem, 5vw, 4rem);
    top: calc(var(--sp-md) + 3px);
    bottom: calc(var(--sp-sm) * 2 + 2.55rem);  /* tracks the rating row + its 0.9rem margin */
    width: 3px;
    background: var(--primary-red);
  }

  /* Deeper blue than the brand blue — the eyebrow needs more contrast
     against the cream on phone screens */
  .hero__eyebrow { color: #1340b0; }

  /* Headline owns the screen, like the mockup. Tight 0.95 leading stacks
     the three lines editorial-style and trims height without losing impact */
  .hero__headline { font-size: clamp(2.5rem, 10.5vw, 3.7rem); line-height: 0.95; }

  /* Small pause before the CTA (it's the screen's only action).
     Darker charcoal than the desktop gray: phones get read in sunlight */
  .hero__sub {
    margin-block-end: 0.3rem;
    color: #4d4d4d;
  }
  /* Editorial: each tagline on its own line (desktop keeps them inline) */
  .hero__sub span { display: block; }

  /* Mobile flow has ONE action — secondary link is desktop-only */
  .hero__cta-secondary { display: none; }

  /* The single CTA carries the screen: taller, larger type */
  .hero__cta-primary {
    padding-block: 1.05em;
    font-size: var(--text-base);
  }

  /* Reviews: ONE centered line with air above — the rating is the hero's
     quiet closing note, sitting OUTSIDE the red rule (which ends at the CTA) */
  .hero__reviews {
    justify-content: flex-start;   /* left-aligned to the content grid, not centered */
    margin-block-start: 0.9rem;
    gap: 0.6rem;
  }
  .reviews__stars { font-size: 1.15rem; letter-spacing: 0.16em; }
  .reviews__score { font-size: 1.1rem; }
  .reviews__count { font-size: var(--text-sm); }

  /* Image: full-bleed width, box ~12% shorter than the photo's native
     aspect — the MAXIMUM crop that keeps poster tops AND the chair base
     in frame (deeper cuts slice into one or the other). The trim comes
     mostly off the top (bare wall), so sofa + cushions sit higher in
     the first viewport. */
  .hero__image-wrap {
    margin-inline: 0;
    margin-block-end: 0;
    margin-block-start: 0.45rem;        /* short pause after the rating row — keeps the photo high in the viewport */
  }
  .hero__img-clip {
    border-radius: 0;
    /* Taller box = near-full frame, so the couch sits HIGH and stays clear
       of the floating info card that overlaps the bottom floor strip */
    aspect-ratio: 1000 / 850;
    /* Soft top sweep — gentle concave curve (left dips ~13%, eases up to
       the right edge). SVG path so it scales responsively; falls back to
       a straight diagonal where url() clip-paths aren't supported. */
    clip-path: polygon(0 13%, 100% 0, 100% 100%, 0 100%);
    clip-path: url(#hero-img-curve);
  }
  .hero__img {
    /* Near-centered: only a few px crop top & bottom — whole interior shows */
    object-position: center 50%;
  }

  /* Info CARD below the photo — ONE slim row: hours | address.
     Deliberately AFTER the image, not overlapping it — an overlay card
     (mockup style) would sit on top of the couch; below the photo it
     reads just as designed and hides nothing. */
  .info-strip {
    background: transparent;
    box-shadow: none;
    padding-inline: clamp(1.25rem, 5vw, 4rem);
    /* Subtle float: negative top margin lifts the card so it overlaps ONLY
       the photo's bottom floor strip (~half the card sits over the photo,
       half on the cream below). In-flow — no absolute positioning, so it
       can't drift on different screen sizes. */
    position: relative;
    z-index: 5;
    /* Lighter overlap (~24px) so the card uncovers more of the couch — it
       still clearly floats, just covers only the floor strip now */
    margin-block: -1.5rem var(--sp-lg);
  }
  .info-strip__inner {
    flex-wrap: wrap;                /* ultra-narrow screens: items stack gracefully */
    align-items: center;
    justify-content: space-evenly;  /* no divider — the even air separates the items */
    gap: 0.5rem 0;
    min-height: 0;
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
    padding: 0.75rem 0.5rem;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(26, 26, 26, 0.10), 0 2px 6px rgba(26, 26, 26, 0.05);
  }
  /* Sized so BOTH items fit one row at 360px wide — that's why the value
     font is fixed 0.8rem here, not var(--text-sm) */
  .info-strip__item { gap: 0.45rem; }
  .info-strip__item:first-child { padding-inline-end: 0; }
  .info-strip__item + .info-strip__item {
    border-left: none;
    padding-inline-start: 0;
  }
  /* Outlined icon chips — Bauhaus line style instead of tinted fills */
  .info-strip__icon { width: 34px; height: 34px; border: 2px solid; }
  .info-strip__icon svg { width: 15px; height: 15px; }
  .info-strip__icon--blue { background: transparent; border-color: var(--primary-blue); }
  .info-strip__icon--red  { background: transparent; border-color: var(--primary-red); }
  .info-strip__label { display: none; }
  .info-strip__value { font-size: 0.8rem; line-height: 1.3; white-space: nowrap; }
  .info-strip__sub   { font-size: 0.68rem; line-height: 1.3; white-space: nowrap; }
  /* Compact text swap: hide the long desktop strings, show the short ones */
  .info-strip__days, .info-strip__city { display: none; }
  .info-strip__sub--mobile { display: block; }
}

/* No strip on tablets (860–1279) — desktop gets the floating card,
   phones get the compact band below the photo. */
@media (min-width: 860px) and (max-width: 1279px) {
  .info-strip { display: none; }
}

/* ── 9m-2. MOBILE HERO continued (<860px) ─────────────────── */
@media (max-width: 859px) {

  /* Old floating mobile shapes off — composed clusters take over */
  .bauhaus--yellow-circle,
  .bauhaus--blue-rect,
  .bauhaus--red-circle { display: none; }

  /* Shapes moved OFF the photo, onto the cream beside the subtext — cleaner
     and more premium (Bauhaus reads best on flat ground, not over a photo).
     The transition cluster (.peek-tr) stays hidden on mobile via the base
     display:none rule; desktop still uses it untouched.

     Flex row: subtext takes the left, the cluster sits in the right cream
     pocket. align-items:center keeps the cluster level with the taglines —
     no magic offsets, so it can't drift across screen widths. */
  .hero__sub-row {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
  }
  .hero__sub-row .hero__sub { flex: 1 1 auto; min-width: 0; }

  /* Self-contained accent: red circle + black square (optically ~12% smaller,
     since pure black is heavier) + small yellow square. ~76px wide so the
     longest tagline still fits beside it down to 360px. */
  .hero__shapes {
    display: block;
    position: relative;
    flex: 0 0 auto;
    width: 76px; height: 92px;
    margin-inline-end: clamp(0px, 1.5vw, 8px);
    pointer-events: none;
  }
  .hero__shapes-circle {
    position: absolute;
    top: 0; left: 4px;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--primary-red);
    z-index: 2;
  }
  .hero__shapes-square {
    position: absolute;
    top: 30px; right: 0;
    width: 40px; height: 40px;
    background: var(--near-black);
    z-index: 1;
  }
  .hero__shapes-dot {
    position: absolute;
    top: 68px; right: 6px;
    width: 20px; height: 20px;
    background: var(--primary-yellow);
    z-index: 1;
  }

  /* Bottom shape cluster removed — the photo exits clean into the info card */
  .seam-tl { display: none; }

  /* Sticky book bar: hidden on load, slides up once the hero CTA scrolls
     out of view (class toggled by IntersectionObserver in script.js) */
  .sticky-bar {
    transform: translateY(110%);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .sticky-bar.visible { transform: translateY(0); }
}

/* ── 9t. PORTRAIT TABLETS (≥860px, portrait) ──────────────── */
/* iPad Pro-class screens hit the desktop layout but are far taller than
   wide — a 100vh hero balloons to ~1300px and squeezes the photo into a
   sliver. Cap the height; real desktops are landscape and never match. */
@media (min-width: 860px) and (orientation: portrait) {
  .hero { min-height: min(78vh, 880px); }
}

/* ── 10. LARGE SCREEN ─────────────────────────────────────── */
@media (min-width: 1300px) {
  .hero__content    { flex-basis: 52%; padding-inline-start: clamp(3rem, 5vw, 6rem); }
  .hero__image-wrap { flex-basis: 48%; }
  .nav              { padding-inline-start: clamp(3rem, 5vw, 6rem); }
}