/* ---------- U Barbers — luxury dark mode ---------- */
:root {
  --bg: #0d0d0f;            /* neutral near-black, no brown warmth */
  --bg-deep: #07070800;
  --bg-deep: #060608;
  --cream: #f1e7d3;
  --cream-soft: #e8dcc4;
  --sand: #c9b48f;
  --taupe: #8b7964;
  --mushroom: #5a4a3a;
  --umber: #a4612a;         /* burnt umber accent */
  --line: rgba(241, 231, 211, 0.14);
  --line-strong: rgba(241, 231, 211, 0.28);

  --serif: "Cormorant Garamond", "Cormorant", "Times New Roman", serif;
  --sans:  "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* live, scroll-driven theme (defaults = dark) */
  --theme-bg: var(--bg);
  --theme-fg: var(--cream);
  --theme-fg-soft: rgba(241, 231, 211, 0.7);
  --theme-line: var(--line);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { timeline-scope: --product-view; }
html, body { background: var(--theme-bg); color: var(--theme-fg); transition: background-color 200ms linear, color 200ms linear; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  cursor: none;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------- type ---------- */
.serif  { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
.serif-i { font-family: var(--serif); font-style: italic; font-weight: 400; }
.smallcaps {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 11px;
  font-weight: 400;
}
.label { font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.28em; font-size: 10px; font-weight: 400; color: var(--theme-fg-soft); }

/* ---------- cursor ---------- */
.cursor {
  position: fixed; top: 0; left: 0; width: 10px; height: 10px;
  border-radius: 50%; background: var(--cream);
  pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 280ms cubic-bezier(.22,.61,.36,1), height 280ms cubic-bezier(.22,.61,.36,1), background-color 200ms;
  mix-blend-mode: difference;
}
.cursor.is-hover { width: 38px; height: 38px; background: var(--cream-soft); }
@media (hover: none) { .cursor { display: none; } body { cursor: auto; } }

/* ---------- nav (slim, always-visible top bar) ----------
   The bar is fixed and visible at all times so users always have
   access to navigation + booking, even while scrolling. The U mark
   on the left is also always present. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 14px 28px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  min-height: 62px;
  background: rgba(13, 13, 15, 0.62);
  border-bottom: 1px solid rgba(241, 231, 211, 0.10);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  transition: background-color 320ms ease, border-color 320ms ease,
              padding 320ms ease;
}
.nav .nav-mark { opacity: .9; transition: opacity 300ms ease; }
.nav .nav-mark:hover { opacity: 1; }

/* Slightly stronger contrast once the user starts scrolling. */
.nav.is-scrolled {
  padding: 12px 28px;
  min-height: 58px;
  background: rgba(13, 13, 15, 0.82);
  border-bottom-color: rgba(241, 231, 211, 0.14);
}
/* In the white product section, switch to a light tinted glass. */
.nav.is-light {
  background: rgba(255, 255, 255, 0.72);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
.nav.is-light.is-scrolled {
  background: rgba(255, 255, 255, 0.88);
  border-bottom-color: rgba(0, 0, 0, 0.10);
}

/* Brand wordmark on the left side of the bar. The PNG is rendered as a
   CSS mask in cream — same treatment as the hero + footer logos — so it
   stays tinted to the brand palette regardless of theme. */
.nav-mark {
  display: inline-flex; align-items: center; justify-content: flex-start;
  height: 28px;
  text-decoration: none;
  transition: opacity 300ms ease;
  opacity: .92;
}
.nav-mark:hover { opacity: 1; }
.nav-mark-img {
  display: block;
  width: 126px;   /* "U BARBERS" wordmark — 10% smaller than the prior 140px */
  height: 20px;
  background-color: var(--theme-fg, var(--cream));
  -webkit-mask: url("assets/wordmark-u-barbers.png") left center / contain no-repeat;
          mask: url("assets/wordmark-u-barbers.png") left center / contain no-repeat;
  transition: background-color 300ms ease;
}
.nav-mark:hover { opacity: 1; }

.nav > * { pointer-events: auto; }

/* Logo lives inside the hero section, positioned just above the headline
   so they read as a single composed block. Rendered via CSS mask in cream
   — same treatment as the footer logo for brand consistency. */
.hero-logo {
  position: absolute;
  /* aligned horizontally with the headline (left: 56px); shifted down
     145px total from its previous 131px baseline (80 + 50 + 15). */
  top: 276px;
  left: 61px;
  /* 10% larger than the previous 151×151 (which was already 20% off
     the original 189×189) — bumps the logo's visual weight back up
     slightly without overwhelming the headline. */
  width: 166px; height: 166px;
  z-index: 10;
  display: block;
}
.hero-logo img { display: none; }  /* keep <img> alt for a11y, but render the mask */
.hero-logo::before {
  content: "";
  position: absolute; inset: 0;
  background-color: var(--cream);
  -webkit-mask: url("assets/logo-white.png") center / contain no-repeat;
          mask: url("assets/logo-white.png") center / contain no-repeat;
}

.nav-logo {
  display: flex; align-items: center; gap: 10px;
  position: relative;
  width: 104px; height: 104px;
}
.nav-logo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  transition: opacity 600ms ease;
}
.nav-logo .logo-white { opacity: calc(1 - var(--theme-light, 0)); }
.nav-logo .logo-black { opacity: var(--theme-light, 0); }
.nav-logo span {
  font-family: var(--serif); font-size: 18px; letter-spacing: 0.05em;
  color: var(--theme-fg);
}
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a {
  font-family: var(--sans); font-size: 11px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--theme-fg);
  opacity: .78;
  transition: opacity 300ms ease;
}
.nav-links a:hover { opacity: 1; }

/* Slim the "Book Now" pill inside the nav so the bar stays narrow. */
.nav-links .btn {
  padding: 8px 18px;
  font-size: 10px;
  letter-spacing: 0.26em;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans);
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  padding: 14px 26px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--cream);
  background: transparent;
  transition: background 600ms cubic-bezier(.22,.61,.36,1), color 600ms cubic-bezier(.22,.61,.36,1), transform 600ms cubic-bezier(.22,.61,.36,1);
}
.btn:hover { background: var(--cream); color: var(--bg); }
.btn.btn-dark { color: #1c1410; }
.btn.btn-dark:hover { background: #1c1410; color: var(--cream); }

/* All main sections sit on z-index 1 with transparent bgs.
   The nav is intentionally excluded — it stays position:fixed at z-index 100. */
.hero, .services, .about, .product-outer, .insta, .foot { position: relative; z-index: 1; }
.hero, .services, .about, .insta, .product-outer { background: transparent; }

/* Make sure the hero → services run shares one continuous dark background
   (no theme transition before about, no seam between the two sections). */
.hero, .services { background: #14110d; }

/* Single drifting U — fixed, follows scroll, visible across every section. */
.ghost-u {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(280px, 46vh, 640px);
  height: auto;
  opacity: 0.05;
  z-index: 60;          /* in front of all section content */
  pointer-events: none;
  user-select: none;
  will-change: transform;
  mix-blend-mode: difference;
  transition: opacity 420ms ease, top 420ms ease;
}
/* Hero state — same low opacity as everywhere else; just swap to the
   warm sand-tinted mask so the U reads beige instead of cold gray. */
body.in-hero .ghost-u {
  opacity: 0.05;
  top: calc(50% + 20px);
  mix-blend-mode: normal;
}
/* Replace the raw white PNG with a sand-tinted mask while on hero so the
   U reads as a warm beige instead of the cool gray that the difference
   blend produces against dark brown. */
body.in-hero .ghost-u img { visibility: hidden; }
body.in-hero .ghost-u::after {
  content: "";
  position: absolute; inset: 0;
  background-color: var(--sand);
  -webkit-mask: url("assets/ghost-u.png") center / contain no-repeat;
          mask: url("assets/ghost-u.png") center / contain no-repeat;
}
.ghost-u img {
  display: block;
  width: 100%;
  height: auto;
}
/* ---------- ghost U: drifts behind everything across the whole page ---------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 760px;
  overflow: hidden;
  background: #14110d;
  isolation: isolate;
}

/* faint vertical grid hairlines like the reference */
.hero-grid-lines { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.hero-grid-lines span {
  position: absolute; top: 0; bottom: 0;
  width: 1px;
  background: rgba(241, 231, 211, 0.05);
}

/* offset video frame in the upper-right region */
.hero-video-frame {
  position: absolute;
  /* not full-bleed — sits with deliberate negative space */
  left: 28%;
  right: 6%;
  top: 22%;
  bottom: 8%;
  z-index: 2;
  overflow: hidden;
  background: #0a0805;
  box-shadow: 0 50px 120px rgba(0,0,0,.55);
}
.hero-video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(.78) saturate(.88) contrast(1.04);
}
.hero-video-veil {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 60%, rgba(0,0,0,0) 30%, rgba(10,8,5,.55) 100%);
  pointer-events: none;
}
.hero-play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 1px solid rgba(241, 231, 211, 0.55);
  background: rgba(20, 17, 13, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--cream);
  display: grid; place-items: center;
  cursor: none;
  transition: background 400ms, transform 400ms, border-color 400ms;
  z-index: 3;
}
.hero-play:hover {
  background: rgba(241, 231, 211, 0.92);
  color: #121214;
  border-color: rgba(241, 231, 211, .9);
  transform: translate(-50%, -50%) scale(1.06);
}

/* (hero-local U removed — single global drifting U used instead) */
.hero-u-mark { display: none; }

/* top-left italic stack — "EQUESTRIAN / FACILITIES"-style */
.hero-eyebrow-stack {
  position: absolute;
  top: 96px; left: 56px;
  z-index: 6;
  display: flex; flex-direction: column;
  gap: 6px;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(34px, 3.6vw, 58px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--cream);
}
.hero-eyebrow-stack span { display: block; }

/* big chic headline — vertically centered on the video, left-aligned */
.hero-headline {
  position: absolute;
  /* video frame sits between 22%–92% of hero height → center ≈ 57%; +100px shift down */
  top: calc(57% + 100px);
  transform: translateY(-50%);
  left: 56px;
  z-index: 7;             /* on top of the U */
  margin: 0;
  font-family: "Bricolage Grotesque", "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(47px, 5.95vw, 97px);
  line-height: 1.02;
  letter-spacing: 0.005em;
  color: var(--cream);
  text-transform: none;
  display: flex; flex-direction: column;
  max-width: 88vw;
  font-optical-sizing: auto;
  /* lighter optical size — at display sizes, opsz 12 reads much thinner than 96 */
  font-variation-settings: "opsz" 14;
}
.hero-headline span { display: block; }

/* "We Craft" (middle, sans) — slightly smaller for contrast */
.hero-headline span:nth-child(2) {
  font-size: 0.68em;
  letter-spacing: 0.08em;
  font-variation-settings: "opsz" 14;
  font-stretch: 100%;
}

/* italic chic serif on the outer lines (1 + 3) — sans on the middle */
.hero-headline span:nth-child(1),
.hero-headline span:nth-child(3) {
  font-family: "Cormorant Garamond", "Cormorant", serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
  padding-left: 0;
  color: var(--cream);
}

/* corner copyright (top right, rotated) */
.hero-copyright {
  position: absolute;
  top: 96px; right: 22px;
  z-index: 6;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: .75;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

/* right-edge "Booking" pill, rotated — sticks to viewport across the whole page */
.hero-side-tab {
  position: fixed;
  right: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 70;
  background: var(--cream);
  color: #121214;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  padding: 18px 10px;
  writing-mode: vertical-rl;
  transform-origin: right center;
}
.hero-side-tab span { display: block; transform: rotate(180deg); }
.hero-side-tab { text-decoration: none; transition: background 300ms ease, padding 300ms ease; }
.hero-side-tab:hover { background: var(--sand); padding-block: 26px; }

.hero-scroll-cue {
  position: absolute;
  left: 56px; bottom: 14px;
  font-family: var(--sans); font-size: 10px;
  letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--cream); opacity: .55;
  z-index: 7;
  display: flex; align-items: center; gap: 12px;
}
.hero-scroll-cue .line {
  display: block; width: 36px; height: 1px;
  background: linear-gradient(to right, var(--cream), transparent);
}

/* ---------- scroll rhythm strip (between hero & services) ---------- */
.rhythm {
  position: relative;
  height: 320vh; /* 4 panes */
}
.rhythm-stage {
  position: sticky; top: 0; height: 100vh; width: 100%;
  overflow: hidden;
  background: var(--bg-deep);
}
.rhythm-pane {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  transition: opacity 700ms cubic-bezier(.22,.61,.36,1);
}
.rhythm-frame {
  position: relative; overflow: hidden;
  background: #1c140e;
  border-right: 1px solid var(--line);
}
.rhythm-frame:last-child { border-right: none; }
.rhythm-frame .ph {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(.85) saturate(.9);
  transition: transform 1200ms cubic-bezier(.22,.61,.36,1);
}
.rhythm-frame .caption {
  position: absolute; left: 24px; bottom: 24px;
  font-family: var(--sans); font-size: 10px;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--cream); opacity: .8;
}
.rhythm-counter {
  position: absolute; top: 40px; right: 40px;
  font-family: var(--serif); font-size: 14px; letter-spacing: 0.2em;
  color: var(--cream-soft); opacity: .7;
}
.rhythm-title {
  position: absolute; left: 40px; top: 40px; right: 40px;
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--cream); opacity: .7;
}

/* ---------- services ---------- */
.services {
  padding: 140px 40px 140px;
  background: #14110d;
}
.section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "eyebrow meta"
    "title   title";
  gap: 8px 40px;
  align-items: end;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 56px;
}
.section-head .section-eyebrow {
  grid-area: eyebrow;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--sand);
  opacity: .85;
}
.section-head .meta {
  grid-area: meta;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cream-soft);
  opacity: .65;
  text-decoration: none;
  transition: opacity 300ms ease, color 300ms ease, letter-spacing 300ms ease;
}
a.section-head\:hover, .section-head a.meta:hover {
  opacity: 1;
  color: var(--sand);
  letter-spacing: 0.34em;
}
.section-head h2 {
  grid-area: title;
  font-family: "Bricolage Grotesque", "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(34px, 4.2vw, 64px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin-top: 12px;
}
.section-head h2 .it { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 400; color: var(--sand); }
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--cream);
  font-optical-sizing: auto;
}
.section-head h2 .it { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 400; color: var(--sand); }
.section-head .meta-old { font-family: var(--sans); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--cream-soft); opacity: .7; }

.service-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.service-card {
  position: relative; aspect-ratio: 3 / 7.7;
  overflow: hidden;
  background: #1c140e;
}
.service-card {
  position: relative; aspect-ratio: 3 / 5.98;
  overflow: hidden;
  background: #1c140e;
  cursor: none;
}
.service-card .img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 900ms cubic-bezier(.22,.61,.36,1), filter 900ms;
  filter: brightness(.78) saturate(.9);
}
/* per-card focal-point overrides so faces stay visible */
.service-card[data-idx="2"] .img { background-position: 78% 38%; }
.service-card[data-idx="3"] .img { background-position: 72% center; }
.service-card[data-idx="5"] .img { background-position: 60% 35%; }
.service-card .veil {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(13,13,15,.92) 0%, rgba(13,13,15,.55) 38%, rgba(13,13,15,0) 70%);
  transition: opacity 700ms cubic-bezier(.22,.61,.36,1);
}
.service-card .stripe {
  position: absolute; left: 22px; right: 22px; top: 20px;
  display: flex; justify-content: space-between; align-items: center;
}
.service-card .stripe .smallcaps {
  color: var(--cream-soft); opacity: .8;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 9px; letter-spacing: 0.32em;
}
.service-card .stripe .num {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 10px; letter-spacing: 0.22em;
  color: var(--cream); opacity: .8;
}
.service-card .body {
  position: absolute; left: 22px; right: 22px; bottom: 22px;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform 700ms cubic-bezier(.22,.61,.36,1);
}
.service-card .title {
  font-family: "Bricolage Grotesque", "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--cream);
  text-transform: none;
  transition: transform 700ms cubic-bezier(.22,.61,.36,1);
}
.service-card .desc {
  font-family: var(--sans); font-size: 12px; line-height: 1.55;
  color: var(--cream-soft); opacity: .75;
  max-width: 240px;
}
.service-card .cta-row {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 500ms cubic-bezier(.22,.61,.36,1), transform 600ms cubic-bezier(.22,.61,.36,1), max-height 600ms cubic-bezier(.22,.61,.36,1);
}
.service-card:hover .title  { transform: translateY(-40px); }
.service-card:hover .cta-row {
  opacity: 1;
  max-height: 60px;
  transform: translateY(-34px);
}
.service-card .book {
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--cream);
  padding: 11px 18px;
  border: 1px solid var(--cream);
  border-radius: 999px;
  transition: background 500ms, color 500ms;
}
.service-card .book:hover { background: var(--cream); color: var(--bg); }
.service-card .arrow { color: var(--cream); opacity: .7; font-family: var(--serif); font-size: 22px; }
.service-card:hover .img { transform: scale(1.06); filter: brightness(.7) saturate(.95); }
.service-card:hover .veil { opacity: 1; background: linear-gradient(0deg, rgba(13,13,15,.95) 0%, rgba(13,13,15,.75) 55%, rgba(13,13,15,.15) 85%); }

/* ---------- about (sticky left / asymmetric image collage right) ---------- */
.about {
  position: relative;
  /* matches the dark seam used by the .product-outer view-timeline so the
     boundary is seamless. .about also subscribes to --product-view so it
     transitions with product+trusted in lockstep on scroll. */
  background-color: var(--seam-dark, #121214);
  padding: 120px 0 160px;
  overflow-x: clip;
  z-index: 1;
  animation: product-bg-reveal linear both;
  animation-timeline: --product-view;
  animation-range: entry 3% exit 100%;
}
.about-grid {
  display: grid;
  /* Text column on the left is tight (it has its own max-width: 580px
     on .about-left); the photo collage on the right gets ~67% of the
     row so Arsalan + the 2×2 team grid can render at a bold,
     editorial scale. */
  grid-template-columns: 1fr 2fr;
  gap: 60px;
  padding: 0 56px;
  position: relative;
  align-items: start;
}

/* LEFT — sticky title + text, vertically centered in viewport */
.about-left {
  position: sticky;
  top: 0;
  align-self: start;
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 32px;
  height: 100vh;
  padding: 60px 0;
  max-width: 580px;
}
.about-eyebrow {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--sand);
  opacity: .85;
}
.about-title {
  font-family: "Bricolage Grotesque", "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 4.6vw, 76px);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--cream);
  margin: 0 0 12px 0;
  font-optical-sizing: auto;
}
.about-title em { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 400; }
.about-title .q { font-style: normal; opacity: .6; }

.about-body {
  display: flex; flex-direction: column;
  gap: 16px;
  max-width: 540px;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.005em;
  color: var(--cream-soft);
  text-wrap: pretty;
}
.about-body p {
  font-weight: 300;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 900ms cubic-bezier(.22,.61,.36,1), transform 900ms cubic-bezier(.22,.61,.36,1);
}
.about.is-in .about-body p { opacity: 1; transform: translateY(0); }
.about.is-in .about-body p:nth-child(2) { transition-delay: 100ms; }
.about.is-in .about-body p:nth-child(3) { transition-delay: 200ms; }

.about-cta {
  display: inline-flex; align-items: center;
  gap: 14px;
  width: max-content;
  margin-top: 12px;
  padding: 18px 0 16px;
  background: transparent;
  border: none;
  border-top: 1px solid rgba(241, 231, 211, 0.35);
  border-radius: 0;
  cursor: pointer;
  min-width: 220px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cream);
  transition: gap 400ms ease, border-color 400ms ease;
  text-align: left;
}
.about-cta .arrow {
  font-family: var(--serif); font-size: 16px;
  transition: transform 500ms cubic-bezier(.22,.61,.36,1);
}
.about-cta:hover { gap: 22px; border-color: var(--cream); }
.about-cta:hover .arrow { transform: translate(4px, -4px); }

/* RIGHT — editorial collage with clear visual hierarchy:
   • Arsalan (.p1) — BIG portrait, owns the left column
   • Matin   (.p2) — MEDIUM portrait, top of the right column
   • Saeed, Pouya, Amir (.p3 / .p4 / .p5) — same SMALL size, share a
     three-up row beneath Matin
   The wrappers (.ar-left / .ar-right / .ar-small-row) keep the grid math
   simple and free each card's transform for outer parallax — see the
   `--card-plx` variable below. */
.about-right {
  position: relative;
  display: flex;
  align-items: center; /* center the 2×2 column against Arsalan so the
                          right column extends both above and below
                          Arsalan, matching the reference. */
  gap: var(--ar-grid-gap, 22px);
  padding-top: 0;
}
.ar-left { flex: 1 1 0; min-width: 0; }
.ar-right {
  flex: 1 1 0;
  min-width: 0;
}
/* 2×2 editorial grid for the four supporting portraits (Matin, Saeed,
   Pouya, Amir). The right column is nudged DOWN by --ar-grid-stagger
   so the pairs feel hand-placed rather than gridded. The vars READ
   from :root (so the Tweaks panel can override) with sane fallbacks.
   `--ar-grid-gap` drives the SHARED column-gap, row-gap, and the
   Arsalan↔2×2 gap so all three spacings match exactly. */
.ar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--ar-grid-gap, 22px);
  row-gap: var(--ar-grid-gap, 22px);
  align-items: start;
}
/* Right column of the 2×2 shifts down for the editorial stagger.
   p3 (top-right) and p5 (bottom-right) live in column 2. */
.ar-grid > .about-photo.p3,
.ar-grid > .about-photo.p5 { margin-top: var(--ar-grid-stagger, 110px); }
/* Fine-tune individual top-row cards without affecting row height
   (so the bottom row stays put). `.about-photo` is already
   position: relative — we just push these two visually with `top`. */
.ar-grid > .about-photo.p2 { top: 30px; }
.ar-grid > .about-photo.p3 { top: 40px; }
.ar-grid > .about-photo.p5 { top: -35px; }

.about-photo.p1 { /* Arsalan — BIG, dominant feature */
  width: 100%;
  aspect-ratio: 5 / 8;
  z-index: 4;
}
/* Anchor the wrap toward the TOP of the card so Arsalan's face is in
   frame at the parallax baseline. Inset widened to -20% top + -44%
   bottom so the (large) inner parallax strength has room to translate
   in BOTH directions without revealing empty space at the top edge. */
.about-photo.p1 .img-wrap { inset: -20% 0 -44% 0; }
.about-photo.p1 img { object-position: 50% 12%; }

/* The four supporting portraits share one card size — deep portrait
   (25/52 ≈ 0.481 → the cards are 20% taller than the previous 15/26
   variant, which itself was 30% taller than 3/4). `min-width: 100%`
   is required because aspect-ratio + grid items shrinks them below
   the track width without it (default min-width: auto resolves to
   the intrinsic content size, not the column size). */
.about-photo.p2,
.about-photo.p3,
.about-photo.p4,
.about-photo.p5 {
  width: 100%;
  min-width: 100%;
  aspect-ratio: 25 / 52;
  z-index: 2;
}
/* Face anchoring — the new (mostly-square) supporting portraits have
   faces in the upper third; bias object-position up. */
.about-photo.p2 img,
.about-photo.p3 img,
.about-photo.p4 img,
.about-photo.p5 img { object-position: 50% 22%; }
/* Tighten the wrap overflow on the 4 small cards (default is -32%
   top/bottom, tuned for the old larger-aspect cards). With the new
   15:26 portrait cards + softened inner parallax (±7%), an oversized
   wrap forces the source image to scale up massively to cover the
   wrap and crops the subject's body too aggressively. -10% gives
   the inner parallax just enough room without that side-crop hit. */
.about-photo.p2 .img-wrap,
.about-photo.p3 .img-wrap,
.about-photo.p4 .img-wrap,
.about-photo.p5 .img-wrap { inset: -10% 0; }
.about-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #1c140e;
  opacity: 0;
  /* `--card-plx` is the outer parallax offset (driven by JS in
     updateAboutParallax — varies per-card by sign and magnitude so the
     cards drift AGAINST each other on scroll). Reveal slides up via the
     extra 60px term while not yet in view. */
  --card-plx: 0px;
  transform: translate3d(0, calc(60px + var(--card-plx)), 0);
  transition: opacity 1.1s cubic-bezier(.22,.61,.36,1);
  will-change: transform, opacity;
}
.about-photo.is-in {
  opacity: 1;
  transform: translate3d(0, var(--card-plx), 0);
}

.about-photo .img-wrap {
  position: absolute; inset: -32% 0;
  will-change: transform;
}
.about-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.94) saturate(.95);
  transition: transform 1.6s cubic-bezier(.22,.61,.36,1), filter 800ms ease;
}
/* Belt-and-braces: hide native video chrome on every <video> in case a UA
   exposes it. Together with the JS enforcement in app.js, no video can show
   a play/pause overlay. */
video::-webkit-media-controls,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-overlay-play-button,
video::-webkit-media-controls-overlay-enclosure,
video::-webkit-media-controls-enclosure,
video::-webkit-media-controls-fullscreen-button,
video::-webkit-media-controls-mute-button,
video::-webkit-media-controls-timeline,
video::-webkit-media-controls-current-time-display,
video::-webkit-media-controls-time-remaining-display,
video::-webkit-media-controls-volume-slider,
video::-internal-media-controls-overlay-cast-button {
  display: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
video { pointer-events: none; }
/* iOS: poster/overlay during loading shouldn't show play affordance.
   Solid black bg prevents any white "starting playback" flash. */
video.hero-video { background: #0a0805; }

/* Mobile-only Book now CTA under services — hidden on desktop. */
.mobile-book-cta { display: none; }
/* Mobile-only hero chrome — hidden on desktop. */
.hero-mobile-tag,
.hero-mobile-strip,
.hero-mobile-book { display: none; }
/* Mobile-only services carousel pager — hidden on desktop. */
.service-pager { display: none; }
/* Mobile-only editorial press strip — hidden on desktop (desktop keeps the .trusted-row logo lineup). */
.trusted-mobile { display: none; }

.about-photo:hover img { transform: scale(1.04); filter: brightness(1) saturate(1); }
.about-photo::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(13,13,15,.85) 0%, rgba(13,13,15,0) 38%);
  z-index: 1;
}
.about-photo figcaption {
  position: absolute; left: 16px; right: 16px; bottom: 14px;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 4px;
  color: var(--cream);
  z-index: 2;
}
.about-photo figcaption .name {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.01em;
}
.about-photo figcaption .role {
  font-family: var(--sans);
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: .8;
  white-space: nowrap;
}


/* a tiny rotated tag to add editorial life on the largest one */
.about-photo.p1::after {
  content: "Est. 2024";
  position: absolute;
  right: -14px; top: 16px;
  z-index: 3;
  background: var(--cream);
  color: #121214;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  padding: 8px 12px;
  transform: rotate(8deg);
}

/* ---------- trusted by (logo strip, dark) ---------- */
.trusted {
  position: relative;
  background-color: var(--seam-dark, #121214);
  padding: 20px 40px 260px;
  z-index: 1;
  /* Trusted shares the same view-driven dark→light→dark animation as
     .product-outer, so when product turns white the trusted strip turns
     with it (and reverses on scroll-up). */
  animation: product-bg-reveal linear both;
  animation-timeline: --product-view;
  animation-range: entry 3% exit 100%;
}
.trusted-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 24px 0 0;
}
.trusted-row img {
  display: block;
  height: 80px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  opacity: 0.35;
  filter: grayscale(1) brightness(1.1);
  transition: opacity 400ms ease, filter 400ms ease, transform 400ms ease;
}
.trusted-row img:hover {
  opacity: 0.85;
  filter: grayscale(1) brightness(1.2);
  transform: translateY(-2px);
}

@media (max-width: 900px) {
  .trusted { padding: 20px 20px 120px; }
  .trusted-row { flex-wrap: wrap; justify-content: center; gap: 32px 40px; }
  .trusted-row img { height: 60px; }
}

/* ---------- product (light mode reveal) ---------- */
.product-outer {
  position: relative;
  background-color: var(--seam-dark, #121214);
  /* Named view-timeline so siblings (e.g. .trusted) can subscribe to
     the same scroll progress and animate in lockstep. */
  view-timeline-name: --product-view;
  view-timeline-axis: block;
  animation: product-bg-reveal linear both;
  animation-timeline: --product-view;
  animation-range: entry 3% exit 100%;
}
@keyframes product-bg-reveal {
  0%   { background-color: var(--seam-dark, #121214); }
  28%  { background-color: #ffffff; }
  72%  { background-color: #ffffff; }
  100% { background-color: var(--seam-dark, #121214); }
}
@supports not (animation-timeline: view()) {
  .product-outer { background-color: #ffffff; animation: none; }
}
.product {
  padding: 380px 40px 380px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
  background: transparent;
  color: var(--theme-fg);
  transition: color 60ms linear;
}
.product .visuals {
  position: relative; min-height: 760px;
}
.product .visuals .wax,
.product .visuals .comb-img {
  position: absolute;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  will-change: transform;
}
.product .visuals .wax {
  left:  calc(var(--wax-offset-x, -4%) + 70px);
  top:   var(--wax-offset-y, -2%);
  /* Crop 3px from the LEFT edge of the wax JPG (a faint vertical seam),
     and SMOOTHLY fade the bottom edge instead of hard-clipping it — a
     soft mask gradient hides the baked-in studio shadow without
     introducing the visible cut line that `clip-path: inset(... 6% ...)`
     produced against the white product section. */
  clip-path: inset(0 0 0 3px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 78%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  width:  calc(var(--wax-size, 108%) - 160px);
  height: var(--wax-size, 108%);
  /* drop-shadow removed — the brown smear band it produced was visible
     against the white product section background. */
  z-index: 1;
  /* Parallax — wax rises gently as product scrolls through viewport. */
  animation: parallax-wax linear both;
  animation-timeline: --product-view;
  animation-range: entry 0% exit 100%;
}
.product .visuals .comb-img {
  right: -2%; bottom: calc(2% - 20px); width: 28%; height: 34%;
  z-index: 2;
  /* Parallax — comb drifts in the opposite direction for depth. */
  animation: parallax-comb linear both;
  animation-timeline: --product-view;
  animation-range: entry 0% exit 100%;
}
.product .visuals .stamp {
  position: absolute; right: 0; top: calc(6% - 10px);
  width: 180px; height: 180px;
  border: 1px solid currentColor; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--serif); font-style: italic;
  font-size: 18px;
  text-align: center;
  opacity: .7;
  z-index: 3;
  will-change: transform;
  /* Parallax — stamp drifts subtly the opposite way to wax. */
  animation: parallax-stamp linear both;
  animation-timeline: --product-view;
  animation-range: entry 0% exit 100%;
}

@keyframes parallax-wax {
  from { transform: translate3d(0,  var(--parallax-wax,  60px), 0); }
  to   { transform: translate3d(0, calc(-1 * var(--parallax-wax,  60px)), 0); }
}
/* Comb travels OPPOSITE to wax so the two images parallax against
   each other — wax rises while comb falls and vice versa. */
@keyframes parallax-comb {
  from { transform: translate3d(0, calc(-1 * var(--parallax-comb, 30px)), 0); }
  to   { transform: translate3d(0,  var(--parallax-comb, 30px), 0); }
}
@keyframes parallax-stamp {
  from { transform: translate3d(0, calc(-1 * var(--parallax-stamp, 28px)), 0); }
  to   { transform: translate3d(0,  var(--parallax-stamp, 28px), 0); }
}
.product .visuals .stamp .small {
  font-family: var(--sans); font-style: normal;
  font-size: 9px; letter-spacing: 0.36em; text-transform: uppercase;
  opacity: .9;
}
.product .content { max-width: 520px; }
.product .eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase;
  margin-bottom: 28px;
}
.product .eyebrow::before { content: ""; display:block; width: 36px; height: 1px; background: currentColor; opacity: .6; }
.product h2 {
  font-family: "Bricolage Grotesque", "Helvetica Neue", sans-serif; font-weight: 400;
  font-size: clamp(36px, 4vw, 60px);
  line-height: 1.05;
  letter-spacing: 0.01em;
  font-optical-sizing: auto;
}
.product h2 .it { font-family: "Cormorant Garamond", serif; font-style: italic; }
.product .copy {
  margin-top: 32px;
  display: flex; flex-direction: column; gap: 14px;
  font-family: var(--sans); font-size: 15px; line-height: 1.7;
  text-wrap: pretty;
  max-width: 460px;
}
.product .spec {
  margin-top: 36px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}
.product .spec .cell { padding: 18px 0; border-right: 1px solid currentColor; }
.product .spec .cell:last-child { border-right: none; padding-left: 18px; }
.product .spec .cell:not(:last-child):not(:first-child) { padding-left: 18px; }
.product .spec .k { font-family: var(--sans); font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase; opacity: .65; }
.product .spec .v { font-family: var(--serif); font-size: 26px; margin-top: 4px; letter-spacing: -0.01em; }
.product .cta { margin-top: 40px; display: flex; gap: 20px; align-items: center; }
.product .cta .quiet {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  opacity: .65;
}

/* ---------- instagram (compact strip) ---------- */
.insta {
  padding: 180px 40px 110px;
  background-color: var(--seam-dark, #121214);
  /* Same view-timeline as about + trusted + product so the bottom of
     the product fade-out is matched by an instagram fade-in. */
  animation: product-bg-reveal linear both;
  animation-timeline: --product-view;
  animation-range: entry 3% exit 100%;
}
.insta .head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 36px;
  gap: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.insta .head .label-stack {
  display: flex; flex-direction: column; gap: 10px;
}
.insta .head .label-stack .smallcaps { color: var(--sand); }
.insta .head h2 .insta-handle {
  color: inherit;
  text-decoration: none;
  transition: color 300ms ease;
}
.insta .head h2 .insta-handle:hover { color: var(--sand); }
.insta .head h2 {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(34px, 3.8vw, 56px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin: 0;
}
.insta-follow {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cream);
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid currentColor;
  transition: gap 400ms ease, color 400ms ease;
  white-space: nowrap;
}
.insta-follow .arrow { font-family: "Cormorant Garamond", serif; font-size: 14px; font-style: italic; }
.insta-follow:hover { gap: 18px; color: var(--sand); }

.mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.tile {
  position: relative; overflow: hidden;
  background: #1c140e;
  cursor: none;
  display: block;
  aspect-ratio: 1 / 1;
}
.tile .ph {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 1200ms cubic-bezier(.22,.61,.36,1), filter 800ms;
  filter: brightness(.82) saturate(.92);
}
.tile:hover .ph { transform: scale(1.05); filter: brightness(.98) saturate(1); }
.tile .meta {
  position: absolute; left: 12px; bottom: 10px; right: 12px;
  display: flex; justify-content: space-between; align-items: end;
  font-family: "Bricolage Grotesque", sans-serif; font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--cream); opacity: 0;
  transition: opacity 500ms;
  z-index: 2;
}
.tile:hover .meta { opacity: 1; }
.tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(13,13,15,.85), rgba(13,13,15,0) 50%);
  opacity: 0; transition: opacity 500ms;
}
.tile:hover::after { opacity: 1; }

/* mosaic spans — all uniform 1x1 squares in a single row */
.t1, .t2, .t3, .t4, .t5, .t6, .t7, .t8, .t9, .t10 {
  grid-column: span 1; grid-row: span 1; transform: none;
}
/* keep only the first 6 tiles for the compact strip */
.tile:nth-child(n+7) { display: none; }

.insta .foot {
  display: none;
}

/* ---------- client gallery (signage bg + masonry) ---------- */
.client-gallery {
  position: relative;
  z-index: 1;
  padding: 180px 40px 140px;
  background-color: var(--seam-dark, #121214);
  overflow: hidden;
  /* Match the about → product → instagram fade-in timing. */
  animation: product-bg-reveal linear both;
  animation-timeline: --product-view;
  animation-range: entry 3% exit 100%;
}
.client-gallery .gallery-bg {
  position: absolute;
  inset: -8% -6%;
  z-index: 0;
  pointer-events: none;
  display: grid;
  place-items: center;
  will-change: transform;
  opacity: 0.16;
}
.client-gallery .gallery-bg img {
  width: 130%;
  max-width: 1800px;
  height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 60px 90px rgba(255, 170, 60, 0.18));
}
.client-gallery .section-head {
  position: relative;
  z-index: 2;
}

.gallery-grid {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.gallery-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.gallery-item {
  break-inside: avoid;
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: hidden;
  background: #1c140e;
  border: 1px solid rgba(201, 180, 143, 0.12);
  border-radius: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.gallery-item:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }
.gallery-item img,
.gallery-item video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: brightness(.88) saturate(.95);
  transition: filter 500ms ease, transform 700ms ease;
}
.gallery-item:hover img,
.gallery-item:hover video {
  filter: brightness(1) saturate(1.05);
  transform: scale(1.04);
}
/* small "play" badge on video tiles — cues that clicking opens with sound */
.gi-badge {
  position: absolute;
  bottom: 14px; right: 14px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: rgba(13, 13, 15, 0.55);
  color: var(--cream);
  border: 1px solid rgba(241, 231, 211, 0.55);
  border-radius: 50%;
  font-size: 11px;
  letter-spacing: 0;
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  pointer-events: none;
  transition: transform 240ms ease, background 240ms ease;
  z-index: 2;
}
.gallery-item:hover .gi-badge {
  transform: scale(1.08);
  background: rgba(13, 13, 15, 0.78);
}

/* ---------- gallery lightbox ---------- */
.gallery-lightbox {
  position: fixed; inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
}
.gallery-lightbox.is-open {
  display: flex;
  animation: gl-fade 240ms ease-out both;
}
@keyframes gl-fade { from { opacity: 0; } to { opacity: 1; } }
.gl-backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 6, 4, 0.86);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 0;
  padding: 0;
  cursor: zoom-out;
}
.gl-close {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 18px);
  right: 22px;
  z-index: 3;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: rgba(20, 17, 13, 0.55);
  color: var(--cream);
  border: 1px solid rgba(241, 231, 211, 0.45);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background 240ms ease, border-color 240ms ease, transform 240ms ease;
}
.gl-close:hover { background: var(--cream); color: var(--bg); border-color: var(--cream); transform: rotate(90deg); }
.gl-stage {
  position: relative;
  z-index: 2;
  max-width: min(92vw, 1100px);
  max-height: 92vh;
  display: flex; align-items: center; justify-content: center;
  animation: gl-pop 320ms cubic-bezier(.22,.61,.36,1) both;
}
@keyframes gl-pop {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}
.gl-stage > img,
.gl-stage > video {
  display: block;
  max-width: 100%;
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #000;
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
body.gl-open { overflow: hidden; }
@media (max-width: 600px) {
  .gallery-lightbox { padding: 2vh 3vw; }
  .gl-close { top: 14px; right: 14px; width: 38px; height: 38px; font-size: 20px; }
  .gi-badge { bottom: 10px; right: 10px; width: 32px; height: 32px; font-size: 10px; }
}
@media (max-width: 1024px) {
  .client-gallery { padding: 120px 24px 100px; }
}
@media (max-width: 600px) {
  .client-gallery { padding: 80px 16px 80px; }
  .gallery-grid { gap: 10px; }
  .gallery-col { gap: 10px; }
}

/* ---------- footer ---------- */
.foot {
  position: relative;
  /* Theme-aware background — follows the body's --theme-bg so the
     footer reads dark when the page is dark and light when the page
     is in light mode (matching the user's request to invert the
     bottom copy + Instagram link contrast). Falls back to the deep
     dark when --theme-bg isn't set. */
  background: var(--theme-bg, var(--bg-deep));
  padding: var(--foot-pad-top, 0px) 40px var(--foot-pad-bottom, 28px);
  border-top: 1px solid var(--line);
}
.foot-grid {
  display: grid;
  grid-template-columns: 30fr 70fr;
  gap: 80px;
  align-items: stretch;
}
.foot h4 {
  font-family: var(--sans); font-weight: 400;
  font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--sand); opacity: .9; margin-bottom: 6px;
}
.foot .col p, .foot .col a {
  font-family: "Bricolage Grotesque", "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--cream);
  display: block;
  text-decoration: none;
}
.foot .col a:hover { color: var(--sand); }

/* LEFT info column: logo + tagline + stacked info blocks */
.foot-info {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.foot-info .logo-stack {
  position: relative;
  width: 134px; height: 134px;
}
.foot-info .logo-tinted {
  position: absolute; inset: 0;
  background-color: var(--cream);
  -webkit-mask: url("assets/logo-white.png") center / contain no-repeat;
          mask: url("assets/logo-white.png") center / contain no-repeat;
}
.foot-info .tag {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--cream-soft); opacity: .8;
  max-width: 320px;
  margin-top: -6px;
}
.foot-info .info-block { display: flex; flex-direction: column; gap: 4px; }
.foot-info .info-block p,
.foot-info .info-block a { font-size: 16px; }
.foot-info .info-block a .wa-tag {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: .7;
  vertical-align: 2px;
}

/* RIGHT map column — wider, clickable, opens Google Maps */
.foot-map-col {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--cream);
  border: 1px solid var(--line);
  background: #0a0a0c;
  overflow: hidden;
  min-height: 380px;
  transition: border-color 400ms ease;
}
.foot-map-col:hover { border-color: var(--sand); }
.foot-map {
  position: absolute; inset: 0;
  background: #0a0a0c;
}
.foot-map-col .map-cta {
  position: absolute;
  left: 18px;
  bottom: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(18, 18, 20, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cream);
  transition: background 300ms ease, color 300ms ease;
}
.foot-map-col:hover .map-cta {
  background: var(--cream);
  color: #121214;
}
.foot-map-col .map-cta .arrow {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0;
}

.foot-bottom {
  margin-top: var(--foot-bottom-gap, 24px);
  padding-top: 32px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--cream-soft); opacity: .55;
}
.foot-bottom .social { display: flex; gap: 26px; }
.foot-bottom .social a:hover { color: var(--cream); opacity: 1; }

.giant-u-watermark { display: none; }

/* ───────── Tablet (≤ 880px) ───────── */
@media (max-width: 880px) {
  .nav { padding: 8px 18px; min-height: 48px; }
  .nav-links { gap: 14px; }
  .nav-links a:not(.btn) { display: none; }

  /* Hero — restacked: logo top-left, video middle, headline bottom */
  .hero { padding: 0; min-height: 660px; }
  .hero-logo { top: 78px; left: 22px; width: 132px; height: 132px; }
  .hero-eyebrow-stack { top: 76px; left: 20px; font-size: 28px; }
  .hero-video-frame { left: 20px; right: 20px; top: 34%; bottom: 38%; }
  .hero-headline { left: 20px; right: 20px; top: auto; bottom: 5%; transform: none; font-size: clamp(46px, 12vw, 80px); }
  .hero-copyright { right: 12px; font-size: 9px; }
  .hero-side-tab { display: none; }
  .hero-grid-lines { display: none; }
  .hero-u-mark { font-size: 130vw; opacity: 0.14; }
  .hero-scroll-cue { left: 20px; }

  /* Drifting U — softer, smaller on tablet */
  .ghost-u { width: clamp(220px, 60vw, 360px); }

  .rhythm { height: 320vh; }
  .rhythm-pane { grid-template-columns: 1fr; }
  .rhythm-frame:nth-child(n+2) { display: none; }

  .services { padding: 80px 20px; }
  .service-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .section-head { grid-template-columns: 1fr; gap: 16px; }

  .about-grid { grid-template-columns: 1fr; gap: 40px; padding: 0 20px; }
  .about-grid::before { display: none; }
  .about-left { position: static; height: auto; gap: 20px; }
  .about-right { min-height: 0; display: flex; flex-direction: column; gap: 24px; padding-top: 0; }
  /* Flatten the desktop collage wrappers so each photo behaves as a
     direct child of .about-right at this breakpoint. */
  .ar-left, .ar-right, .ar-grid { display: contents; }
  .ar-grid > .about-photo.p3,
  .ar-grid > .about-photo.p5 { margin-top: 0; }
  .about-photo, .about-photo.p1, .about-photo.p2, .about-photo.p3, .about-photo.p4 {
    position: static; width: 100%; min-width: 0; aspect-ratio: 3/4; left: auto; top: auto;
  }
  .about-photo.p1::after { display: none; }

  .product { grid-template-columns: 1fr; padding: 100px 20px; gap: 40px; }
  .product .visuals { min-height: 460px; }

  .insta { padding: 80px 20px; }
  .insta .head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 110px; }

  .foot { padding: 80px 20px 40px; }
  .foot-grid { grid-template-columns: 1fr; gap: 40px; }
  .foot-info .logo-stack { width: 132px; height: 132px; }
  .foot-map-col { min-height: 280px; }
  /* Stack copyright + Instagram vertically and LEFT-align both — the
     desktop space-between with align-items: center reads as
     centered-in-column once flex-direction flips. */
  .foot-bottom { flex-direction: column; gap: 16px; align-items: flex-start; justify-content: flex-start; }
}

/* ───────── Mobile (≤ 640px) — true small-screen layout ─────────
   Restacks every section for portrait phones, simplifies the mosaic,
   collapses the asymmetric collages into clean single-column rhythms,
   keeps interactions tappable (≥ 44px hit targets). */
@media (max-width: 640px) {
  /* Type rhythm — slightly tighter base */
  body { font-size: 15px; }

  /* Nav — hidden on mobile; replaced by a single floating "Book Now" pill (.hero-mobile-book) */
  .nav { display: none !important; }

  /* Hero mobile floating Book Now — sits below the EST. 2024 pill in the hero,
     then slides up to the top-right corner once the user scrolls. Matches the
     pill styling of the service-card .book button. */
  .hero-mobile-book {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    position: fixed;
    /* Pinned to the bottom-right corner and stays there across the
       whole page (no scroll-driven repositioning). env() respects the
       iPhone home-indicator safe area on real devices. */
    bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
    right: 20px;
    top: auto;
    z-index: 120;
    /* Circular badge — fixed dimensions so border-radius:50% is a true circle. */
    width: 64px;
    height: 64px;
    padding: 0;
    border: 1px solid rgba(241,231,211,.7);
    border-radius: 50%;
    background: rgba(20,17,13,.42);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    color: var(--cream);
    font-family: var(--sans);
    font-size: 10px;
    line-height: 1.1;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    transition: background 240ms ease,
                border-color 240ms ease,
                color 240ms ease;
  }
  .hero-mobile-book .hmb-line { display: block; }
  .hero-mobile-book:active {
    background: var(--cream);
    border-color: var(--cream);
    color: var(--bg);
  }
  /* No scroll-driven repositioning — the pill lives bottom-right at all
     times. (Previous behavior nudged it to the top-right under the
     status bar after the first scroll.) */

  /* ───────── Hero (mobile) — cinematic full-bleed video, layered editorial overlay ───────── */
  .hero {
    min-height: 100svh;
    height: 100svh;
    padding: 0;
    position: relative;
    overflow: hidden;
  }
  /* Video covers the entire hero, behind everything */
  .hero-video-frame {
    position: absolute;
    inset: 0;
    left: 0; right: 0; top: 0; bottom: 0;
    width: 100%; height: 100%;
    aspect-ratio: auto;
    margin: 0;
    border-radius: 0;
    z-index: 1;
    box-shadow: none;
  }
  .hero-video { filter: brightness(.68) saturate(.88) contrast(1.06); }
  /* layered cinematic veils — top vignette + bottom legibility gradient */
  .hero-video-veil {
    background:
      linear-gradient(180deg, rgba(10,8,5,.65) 0%, rgba(10,8,5,0) 22%, rgba(10,8,5,0) 42%, rgba(10,8,5,.55) 72%, rgba(10,8,5,.95) 100%),
      radial-gradient(80% 60% at 50% 40%, rgba(0,0,0,0) 50%, rgba(10,8,5,.35) 100%);
  }
  /* Logo — small, top-left over the video */
  .hero-logo {
    position: absolute;
    top: 72px; left: 20px;
    transform: none;
    width: 131px; height: 131px;
    margin: 0;
    z-index: 6;
    opacity: .95;
  }
  /* "Est. 2024 — Dubai" floating chip top-right */
  .hero-mobile-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    top: 84px; right: 20px;
    z-index: 6;
    padding: 7px 13px 7px 11px;
    border: 1px solid rgba(241,231,211,.28);
    border-radius: 999px;
    background: rgba(20,17,13,.42);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    color: var(--cream);
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }
  .hero-mobile-tag .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--sand);
    box-shadow: 0 0 0 3px rgba(201, 180, 143, 0.18);
    animation: heroDotPulse 2.6s ease-in-out infinite;
  }
  @keyframes heroDotPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(201,180,143,.35); }
    50%     { box-shadow: 0 0 0 6px rgba(201,180,143,0); }
  }
  /* Editorial layered headline, anchored bottom-left */
  .hero-headline {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 78px;
    top: auto;
    transform: none;
    margin: 0;
    z-index: 7;
    max-width: 100%;
    font-size: clamp(44px, 13.6vw, 72px);
    line-height: 0.96;
    letter-spacing: -0.005em;
    text-align: left;
    text-shadow: 0 2px 24px rgba(0,0,0,.35);
  }
  .hero-headline span:nth-child(2) {
    font-size: 0.58em;
    letter-spacing: 0.06em;
    padding-left: 14px;
    opacity: .96;
  }
  .hero-headline span:nth-child(1),
  .hero-headline span:nth-child(3) {
    font-style: italic;
  }
  /* Auto-scrolling marquee strip at the bottom of the hero */
  .hero-mobile-strip {
    display: block;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 6;
    padding: 14px 0;
    border-top: 1px solid rgba(241,231,211,.12);
    background: linear-gradient(180deg, rgba(20,17,13,0) 0%, rgba(20,17,13,.65) 100%);
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  }
  .hero-mobile-strip-track {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    white-space: nowrap;
    padding-left: 22px;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--cream-soft);
    opacity: .82;
    animation: heroMarquee 36s linear infinite;
    will-change: transform;
  }
  .hero-mobile-strip-track > span:nth-child(even) {
    color: var(--sand);
    opacity: .9;
    letter-spacing: 0;
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 12px;
  }
  @keyframes heroMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  .hero-copyright { display: none; }
  .hero-scroll-cue { display: none; }
  /* Tone the grid hairlines down so they don't fight the video */
  .hero-grid-lines span { background: rgba(241, 231, 211, 0.03); }

  /* Drifting U — smaller still, sits behind hero content */
  .ghost-u { width: clamp(180px, 70vw, 280px); }
  body.in-hero .ghost-u { top: calc(50% + 60px); }

  /* ───────── Services (mobile) — horizontal snap carousel of editorial cards ───────── */
  .services { padding: 72px 0 80px; }
  /* Unify section title spacing on mobile: 22px between eyebrow and h2.
     Use a single approach — eyebrow has margin-bottom, h2 has no top margin
     — so the visual gap matches across services, about, trusted, product. */
  .services .section-head {
    padding: 0 20px 28px;
    grid-template-columns: 1fr;
    gap: 22px;
    margin-bottom: 28px;
  }
  .services .section-head .meta { display: none; }
  .section-head h2 { font-size: clamp(34px, 8.5vw, 52px); }

  .service-grid {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78vw;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    padding: 4px 20px 20px;
    margin: 0 -2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .service-grid::-webkit-scrollbar { display: none; }

  .service-card {
    scroll-snap-align: center;
    scroll-snap-stop: always;
    aspect-ratio: auto;
    min-height: 0;
    height: 72vh;
    max-height: 560px;
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transform: scale(0.92);
    opacity: .56;
    filter: saturate(.7);
    transition:
      transform 540ms cubic-bezier(.22,.61,.36,1),
      opacity   540ms cubic-bezier(.22,.61,.36,1),
      filter    540ms cubic-bezier(.22,.61,.36,1);
    box-shadow: 0 30px 60px -30px rgba(0,0,0,.6);
  }
  .service-card.is-active {
    transform: scale(1);
    opacity: 1;
    filter: saturate(1);
    box-shadow: 0 50px 90px -30px rgba(0,0,0,.75);
  }
  /* Kids Hair Style — keep focal point higher on mobile */
  .service-card[data-idx="4"] .img { background-position: center calc(50% - 30px) !important; }

  /* Veil — always slightly stronger on mobile for legibility */
  .service-card .veil {
    opacity: 1;
    background: linear-gradient(0deg,
      rgba(13,13,15,.92) 0%,
      rgba(13,13,15,.72) 28%,
      rgba(13,13,15,.18) 58%,
      rgba(13,13,15,0)   80%);
  }
  .service-card .stripe {
    left: 18px; right: 18px; top: 18px;
  }
  .service-card .stripe .smallcaps {
    padding: 5px 10px;
    border: 1px solid rgba(241,231,211,.35);
    border-radius: 999px;
    background: rgba(20,17,13,.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 8.5px;
    letter-spacing: 0.3em;
  }
  .service-card .stripe .num {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 22px;
    letter-spacing: 0;
    opacity: .95;
  }

  .service-card .body {
    left: 20px; right: 20px; bottom: 20px;
    gap: 12px;
    transform: none;
  }
  .service-card .title {
    font-size: 28px;
    line-height: 1.04;
    letter-spacing: -0.005em;
  }
  /* Show description + arrow CTA on mobile (instead of hover-only desktop behaviour) */
  .service-card .desc {
    display: block;
    font-size: 12.5px;
    line-height: 1.5;
    max-width: 100%;
    opacity: .82;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .service-card .cta-row {
    display: flex !important;
    opacity: 1;
    max-height: none;
    transform: none;
    margin-top: 4px;
    align-items: center;
    justify-content: space-between;
  }
  .service-card .book {
    display: inline-block !important;
    padding: 10px 16px;
    border: 1px solid rgba(241,231,211,.7);
    border-radius: 999px;
    background: rgba(20,17,13,.32);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 9.5px;
    letter-spacing: 0.26em;
  }
  .service-card .arrow {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 26px;
    opacity: 1;
    color: var(--sand);
    transform: translateX(0);
    transition: transform 360ms ease;
  }
  .service-card.is-active .arrow { transform: translateX(4px); }

  /* Tap state — gentle press */
  .service-card:active { transform: scale(0.98) !important; transition: transform 140ms ease; }
  .service-card.is-active:active { transform: scale(0.98) !important; }

  /* Pager — editorial 01 / —— / 05 */
  .service-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 8px 20px 0;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--cream);
  }
  .service-pager .pg-current {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 22px;
    letter-spacing: 0;
    color: var(--cream);
    min-width: 28px;
    text-align: right;
  }
  .service-pager .pg-total {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.24em;
    color: var(--cream-soft);
    opacity: .6;
    min-width: 28px;
    text-align: left;
  }
  .service-pager .pg-track {
    position: relative;
    flex: 1;
    max-width: 180px;
    height: 1px;
    background: rgba(241,231,211,.18);
    overflow: hidden;
  }
  .service-pager .pg-fill {
    position: absolute; inset: 0;
    background: var(--sand);
    transform-origin: left center;
    transform: scaleX(0.2);
    transition: transform 480ms cubic-bezier(.22,.61,.36,1);
  }

  /* Under-grid "Book Now" CTA is removed on mobile — the floating hero-mobile-book covers booking everywhere */
  .mobile-book-cta { display: none !important; }

  /* ───────── About (mobile) — editorial 2×2 inspired by desktop:
     Arsalan as a wide hero portrait at the top, then the four
     supporting team members in a 2×2 grid below with the right
     column gently staggered down for editorial rhythm. ───────── */
  .about { padding: 60px 0 60px; }
  /* Flatten about-grid into a flex column so we can reorder the CTA below the photos */
  .about-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 20px;
  }
  /* Promote text children of .about-left into the grid's flex row so we can
     re-order the CTA to appear AFTER .about-right. */
  .about-left { display: contents; }
  .about-eyebrow,
  .about-title,
  .about-body { margin: 0; }
  /* Match services' eyebrow→title gap (22px on all sections). */
  .about-eyebrow { order: 1; margin-bottom: 22px !important; }
  .about-title   { order: 2; margin-bottom: 18px !important; }
  .about-body    { order: 3; margin-bottom: 18px !important; }
  .about-right   { order: 4; margin-top: 18px !important; }
  .about-cta     { order: 5 !important; margin-top: 36px !important; }

  .about-title { font-size: clamp(40px, 12vw, 68px); line-height: 1; }
  .about-body { font-size: 15px; }

  /* .about-right becomes a horizontal scroll-snap CAROUSEL of all 5
     portraits — every card shares the SAME HEIGHT; widths vary per
     card via aspect-ratio so Arsalan reads as the lead while the
     four supporting portraits are slimmer. The section keeps a
     compact, fixed height and gains a more editorial feel via tilt,
     shadow, and a saturation reveal on touch/hover. */
  .about-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 20px 20px 28px !important;
    margin: 0 -20px !important;
    height: 320px !important;
    min-height: 0 !important;
    position: relative !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding: 0 20px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
  }
  .about-right::-webkit-scrollbar { display: none !important; }
  /* Flatten the desktop wrappers so each photo becomes a direct flex
     child of the scroll container. */
  .ar-left, .ar-right, .ar-grid { display: contents !important; }
  /* Reset desktop stagger / per-card offsets — every card sits flush. */
  .about-photo.p2,
  .about-photo.p3,
  .about-photo.p4,
  .about-photo.p5 { margin-top: 0 !important; top: 0 !important; }

  /* Every card fills the container height; width is derived from each
     card's aspect-ratio. Editorial tilt + shadow + transition apply
     to every photo for a coordinated cinematic feel. */
  .about-right > .about-photo,
  .ar-left > .about-photo,
  .ar-right > .about-photo,
  .ar-grid > .about-photo {
    height: 100% !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    scroll-snap-align: start !important;
    box-shadow: 0 18px 36px -16px rgba(0, 0, 0, 0.7),
                0 2px 0 rgba(241, 231, 211, 0.04) inset !important;
    transition:
      transform 480ms cubic-bezier(.22,.61,.36,1),
      box-shadow 480ms cubic-bezier(.22,.61,.36,1),
      filter   520ms cubic-bezier(.22,.61,.36,1) !important;
  }
  /* Editorial tilt — every other card leans the opposite way so the
     row reads as a hand-arranged collage rather than a flat grid.
     Tilt is applied via CSS custom property `--tilt` consumed by the
     parallax transform rule below (combined transform so parallax +
     tilt + hover-scale all live on one `transform` declaration). */
  .about-photo.p1 { --tilt: -1.5deg; }
  .about-photo.p2 { --tilt:  1.0deg; }
  .about-photo.p3 { --tilt: -1.0deg; }
  .about-photo.p4 { --tilt:  1.2deg; }
  .about-photo.p5 { --tilt: -1.0deg; }
  /* Untouched cards live with a soft b&w wash; the focused / hovered
     card snaps back to full color, scales slightly, and lifts via a
     deeper shadow. Saturate/grayscale runs on the inner <img> so the
     caption + numeral overlays stay readable in cream. */
  .about-photo img {
    transition: filter 520ms cubic-bezier(.22,.61,.36,1),
                transform 520ms cubic-bezier(.22,.61,.36,1) !important;
    filter: grayscale(.15) brightness(.92) saturate(.9) !important;
  }
  .about-photo:hover,
  .about-photo:focus-visible,
  .about-photo:active {
    --tilt: 0deg;
    --scale: 1.05;
    box-shadow: 0 28px 60px -18px rgba(0, 0, 0, 0.75),
                0 0 0 1px rgba(241, 231, 211, 0.18) inset !important;
    z-index: 6 !important;
  }
  .about-photo:hover img,
  .about-photo:focus-visible img,
  .about-photo:active img {
    filter: grayscale(0) brightness(1.02) saturate(1.06) !important;
  }

  /* Arsalan — lead card, the WIDEST aspect (taller per width but
     not as narrow as the others), so at the shared 320px height
     Arsalan renders ~228px wide while the supporting cards are ~190px. */
  .about-photo.p1 {
    aspect-ratio: 5 / 7 !important;
    z-index: 2 !important;
  }
  /* The four supporting cards — narrower aspect so they're visibly
     slimmer than Arsalan at the same shared height. */
  .about-photo.p2,
  .about-photo.p3,
  .about-photo.p4,
  .about-photo.p5 {
    aspect-ratio: 3 / 5 !important;
    z-index: 1 !important;
  }

  /* Reset desktop per-photo absolute positioning + grid placement.
     NOTE: do NOT clobber `flex`, `width`, or `max-width` here — the
     carousel rules above (.about-photo.p1 / .p2–.p5) set those to
     drive Arsalan-as-lead-card hierarchy. We just need to neutralize
     the absolute/grid placement leftovers from the desktop layout. */
  .about-photo,
  .about-photo.p1,
  .about-photo.p2,
  .about-photo.p3,
  .about-photo.p4,
  .about-photo.p5 {
    position: relative !important;
    display: block !important;
    left: auto !important;
    top: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    grid-area: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  /* Reveal animation + per-card deep parallax via --plx CSS var.
     Parallax must follow scroll instantly (no transition on transform),
     so the reveal is opacity-only on mobile. The selector list mirrors the
     reset above so this rule’s specificity isn’t beaten by .about-photo.pN. */
  .about-photo,
  .about-photo.p1,
  .about-photo.p2,
  .about-photo.p3,
  .about-photo.p4,
  .about-photo.p5 {
    --plx: 0px;
    opacity: 0;
    /* Combined transform: parallax translate + per-card tilt + hover scale.
       --tilt is set per-card above (-1.5°..+1.2°); --scale is bumped to
       1.05 on hover/focus/active for the lift-up effect. Fallbacks keep
       the transform inert when those vars aren't set.
       Transition for transform+box-shadow lives in the carousel rule
       above so all five cards share one timing curve. */
    transform: translate3d(0, var(--plx), 0) rotate(var(--tilt, 0deg)) scale(var(--scale, 1)) !important;
    transition: opacity 720ms cubic-bezier(.22,.61,.36,1);
  }
  .about-photo.is-in { opacity: 1 !important; }

  /* Tame the image — fit inside the card, no parallax overflow */
  .about-photo .img-wrap { position: absolute; inset: 0 !important; transform: none !important; }
  .about-photo img { transform: none !important; width: 100%; height: 100%; object-fit: cover; }
  /* Face anchoring — supporting portraits sit a touch higher in frame */
  .about-photo.p2 img,
  .about-photo.p3 img,
  .about-photo.p4 img,
  .about-photo.p5 img { object-position: 50% 28% !important; }

  /* Top→bottom legibility veil */
  .about-photo::before {
    background: linear-gradient(180deg, rgba(13,13,15,0) 38%, rgba(13,13,15,.32) 70%, rgba(13,13,15,.88) 100%);
  }

  /* Italic Roman numeral, top-right of each photo */
  .about-photo.p1::after,
  .about-photo::after {
    display: block !important;
    position: absolute;
    top: 8px; right: 10px; left: auto; bottom: auto;
    transform: none;
    padding: 0;
    background: transparent;
    color: var(--cream);
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    text-shadow: 0 1px 14px rgba(0,0,0,.55);
    opacity: .94;
    z-index: 3;
    font-size: 18px;
  }
  .about-photo.p1::after { content: "Est. 2024"; font-family: var(--sans); font-style: normal; font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase; padding: 5px 9px; background: var(--cream); color: #121214; text-shadow: none; opacity: .95; top: 14px; right: 14px; transform: rotate(-4deg); border-radius: 1px; }
  /* Roman numerals are visible again on the supporting cards now that
     the carousel gives each card a uniform, comfortable size. */
  .about-photo.p2::after { content: "II"; font-size: 16px; }
  .about-photo.p3::after { content: "III"; font-size: 16px; }
  .about-photo.p4::after { content: "IV";  font-size: 16px; }
  .about-photo.p5::after { content: "V";   font-size: 16px; }

  /* Caption — Arsalan gets the full name/role treatment; the four
     supporting cards have smaller captions sized for the carousel. */
  .about-photo figcaption { left: 14px; right: 14px; bottom: 12px; gap: 2px; }
  .about-photo.p1 figcaption .name { font-size: 22px; line-height: 1.05; }
  .about-photo figcaption .role,
  .about-photo .role { white-space: normal; }
  .about-photo.p1 figcaption .role { font-size: 10px; letter-spacing: 0.22em; line-height: 1.2; }
  .about-photo.p2 figcaption,
  .about-photo.p3 figcaption,
  .about-photo.p4 figcaption,
  .about-photo.p5 figcaption { left: 10px; right: 10px; bottom: 10px; }
  .about-photo.p2 figcaption .name,
  .about-photo.p3 figcaption .name,
  .about-photo.p4 figcaption .name,
  .about-photo.p5 figcaption .name { font-size: 15px; line-height: 1.05; }
  .about-photo.p2 figcaption .role,
  .about-photo.p3 figcaption .role,
  .about-photo.p4 figcaption .role,
  .about-photo.p5 figcaption .role { font-size: 9px; letter-spacing: 0.18em; }

  .about-cta { min-width: 0; width: 100%; padding: 16px 22px; }

  /* (Mobile-only color-transition overrides removed — all sections that
     subscribe to --product-view now use the desktop range + keyframes in
     lockstep so there's no visible seam where one ends and the next begins.) */
  .trusted { padding: 32px 0 340px !important; }
  .trusted .section-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 22px !important;
    padding: 0 20px 24px !important;
    margin-bottom: 20px !important;
    border-bottom: none !important;
  }
  /* Clear desktop grid-area + h2 margin so flex-column gap is the SOLE gap. */
  .trusted .section-head .section-eyebrow,
  .trusted .section-head h2,
  .trusted .section-head .meta {
    grid-area: auto !important;
    margin: 0 !important;
  }
  .trusted .section-head .section-eyebrow { font-size: 10px; letter-spacing: 0.32em; }
  .trusted .section-head h2 {
    font-size: clamp(34px, 8.5vw, 52px);
    line-height: 1;
  }
  /* Hide the static desktop logo row on mobile; replaced by the marquee below */
  .trusted .trusted-row { display: none !important; }

  .trusted-mobile {
    display: block !important;
    position: relative;
    padding: 0;
  }
  /* Marquee container — generous vertical breathing room so logos sit
     comfortably inside, with edge-fade so they slide in/out cleanly.
     The track is auto-scrolled by JS at constant speed, and the user can
     grab/drag it 1:1; the loop continues seamlessly regardless. */
  .trusted-mobile-marquee {
    position: relative;
    overflow: hidden;
    padding: 72px 0;
    border-top: 1px solid rgba(241, 231, 211, 0.10);
    border-bottom: 1px solid rgba(241, 231, 211, 0.10);
    background: linear-gradient(180deg, rgba(241,231,211,.025), rgba(241,231,211,0) 50%, rgba(241,231,211,.025));
    mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    touch-action: pan-x;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
  }
  .trusted-mobile-marquee.is-dragging { cursor: grabbing; }
  .trusted-mobile-track {
    display: inline-flex !important;
    align-items: center;
    gap: 56px;
    white-space: nowrap;
    padding-left: 56px;
    /* JS drives the transform now — no CSS keyframe animation. */
    animation: none !important;
    will-change: transform;
  }
  @keyframes trustedMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  .trusted-mobile-track img {
    display: block;
    height: 44px;
    width: auto;
    object-fit: contain;
    opacity: .82;
    filter: grayscale(1) brightness(1.05) contrast(.95);
    flex-shrink: 0;
  }
  .trusted-mobile-track .dot {
    color: var(--sand);
    font-size: 8px;
    opacity: .5;
    flex-shrink: 0;
  }
  @media (prefers-reduced-motion: reduce) {
    .trusted-mobile-track { animation: none; }
  }

  /* (Duplicate trusted-mobile rules removed — the canonical version is the
     block above starting at .trusted-mobile { display: block !important; }
     which gives the marquee its 144px vertical padding.) */
  .trusted-mobile-foot { display: none !important; }

  /* Product — mobile order: TITLE (eyebrow + h2) → images → text (copy + spec) → CTA */
  /* gap:0 so the eyebrow→title rhythm is driven solely by explicit
     margins (matching .about-grid, which also uses gap:0). */
  .product {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 200px 20px 80px;
    gap: 0;
  }
  /* Promote .content children into the .product flex column so we can
     interleave them with .visuals via `order`. */
  .product .content { display: contents; }
  .product .eyebrow { order: 1; margin-top: 60px; margin-bottom: 8px; }
  .product h2      { order: 2; margin-bottom: 4px; }
  .product .visuals{ order: 3; margin: 30px 0 32px; }
  .product .copy   { order: 4; margin-top: 8px; }
  .product .spec   { order: 5; margin-top: 44px; }
  .product .cta    { order: 6; margin-top: 48px; }

  .product .visuals {
    min-height: 480px;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: transparent;
    /* Strong opposing scroll-parallax between wax + comb so they drift
       visibly AGAINST each other. Stamp parallax tuned so the circle sits
       just under the title as the section enters view, then drifts down to
       the middle of the image area by the time the section exits. */
    --parallax-wax: 200px;
    --parallax-comb: -140px;
    --parallax-stamp: 50px;
  }
  .product .visuals .wax {
    left: 0 !important;
    top: 6% !important;
    right: auto !important;
    width: 100% !important;
    height: 78% !important;
    background-size: contain !important;
    background-position: center !important;
    /* Kill the desktop drop-shadow on mobile — combined with overflow:hidden
       it creates a smear band along the bottom of the visuals box. */
    filter: none !important;
  }
  .product .visuals .comb-img {
    right: -4% !important;
    bottom: 0 !important;
    left: auto !important;
    top: auto !important;
    width: 38% !important;
    height: 26% !important;
    background-size: contain !important;
    background-position: center !important;
    filter: none !important;
  }
  .product .visuals .stamp {
    width: 110px;
    height: 110px;
    /* Natural position ~30% higher than before. With --parallax-stamp: 50px:
         entry (progress 0%)  → top ≈17px  (tucked under the title)
         middle (progress 50%) → top ≈67px  (natural)
         exit (progress 100%) → top ≈117px (upper-middle of the image area) */
    top: 67px !important;
    bottom: auto !important;
    right: 8px !important;
    left: auto !important;
  }
  .product .visuals .stamp .small { font-size: 10px; letter-spacing: 0.3em; }
  /* Align product titles + spec to the same gutter as About/Services on mobile.
     The eyebrow uses a leading hairline decoration on desktop; hide it on
     mobile so the eyebrow TEXT itself starts flush at the section gutter,
     matching .about-eyebrow / .section-eyebrow. */
  /* Match services' eyebrow→title gap (single 22px). */
  .product .eyebrow {
    display: block !important;
    margin: 0 0 22px !important;
    padding: 0 !important;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.36em;
    text-transform: uppercase;
  }
  .product .eyebrow::before { display: none !important; }
  .product h2 {
    font-size: clamp(40px, 12vw, 68px);
    line-height: 1;
    letter-spacing: 0.01em;
    margin: 0 !important;
    padding: 0;
  }
  .product .copy { font-size: 14px; margin-top: 24px; }
  /* Spec table — full width across the column, even tap targets */
  .product .spec {
    margin-top: 52px;
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
  }
  .product .spec .cell {
    padding: 18px 12px;
    border-right: 1px solid currentColor;
  }
  .product .spec .cell:first-child { padding-left: 0; }
  .product .spec .cell:last-child { padding-right: 0; border-right: none; }
  .product .spec .v { font-size: 20px; }
  .product .cta { margin-top: 52px; flex-direction: column; align-items: stretch; gap: 12px; }
  .product .cta .btn { width: 100%; padding: 16px 22px; }

  /* Instagram mosaic — neat 2-column grid (cycle through 6 cells max) */
  .insta { padding: 60px 20px 80px; }
  .insta .head h2 { font-size: clamp(34px, 9vw, 48px); }
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; gap: 8px; }
  .mosaic .tile { aspect-ratio: 1 / 1; grid-column: auto !important; grid-row: auto !important; }
  /* Cap visible tiles to 6 on mobile so the section doesn't overrun */
  .mosaic .tile:nth-child(n+7) { display: none; }
  .mosaic .tile .meta { font-size: 10px; letter-spacing: 0.22em; opacity: 1; }

  /* Footer — single column, smaller logo */
  .foot { padding: 64px 20px 32px; }
  .foot-info .logo-stack { width: 116px; height: 116px; }
  .foot-info .tag { font-size: 13px; }
  .foot-map-col { min-height: 220px; }
  .foot-bottom { font-size: 11px; gap: 12px; }
  /* Keep the copyright line on a single row at mobile width, and
     present it uppercase to match the rest of the footer rhythm
     (matches the user's request: "© 2026 U BARBERS. ALL RIGHTS RESERVED."). */
  .foot-bottom .foot-copy {
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 10px;
  }

  /* Tap-state niceties — quick scale-down on press for tactile feedback */
  .btn:active,
  .service-card:active,
  .tile:active,
  .insta-follow:active,
  .about-cta:active,
  .nav-mark:active { transform: scale(0.97); transition: transform 120ms ease; }
}

/* ───────── Extra-small phones (≤ 380px) ───────── */
@media (max-width: 380px) {
  .hero-logo { width: 108px; height: 108px; top: 64px; }
  .hero-headline { font-size: clamp(40px, 13vw, 56px); bottom: 72px; }
  .hero-mobile-tag { font-size: 10px; padding: 6px 11px 6px 9px; top: 76px; }
  .about-right { grid-template-columns: 1fr; }
}

/* ───────────── JOIN US — application modal ───────────── */
.join-modal {
  position: fixed; inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.join-modal.is-open { display: flex; }
.join-modal[aria-hidden="false"] { display: flex; }

.join-backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 8, 10, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: join-fade 400ms ease both;
}
.join-sheet {
  position: relative;
  width: min(880px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #14110d;
  border: 1px solid rgba(241, 231, 211, 0.12);
  color: var(--cream);
  padding: 56px 56px 40px;
  animation: join-rise 500ms cubic-bezier(.22,.61,.36,1) both;
  scrollbar-width: thin;
  scrollbar-color: rgba(241,231,211,.2) transparent;
}
.join-sheet::-webkit-scrollbar { width: 8px; }
.join-sheet::-webkit-scrollbar-thumb { background: rgba(241,231,211,.2); }

@keyframes join-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes join-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.join-close {
  position: absolute; top: 18px; right: 22px;
  width: 38px; height: 38px;
  background: transparent;
  border: 1px solid rgba(241, 231, 211, 0.25);
  border-radius: 50%;
  color: var(--cream);
  font-size: 22px; line-height: 1;
  cursor: pointer;
  transition: border-color 300ms ease, color 300ms ease, transform 300ms ease;
}
.join-close:hover { border-color: var(--cream); transform: rotate(90deg); }

.join-head { margin-bottom: 32px; }
.join-eyebrow {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--sand);
  opacity: .85;
  margin-bottom: 16px;
}
.join-head h2 {
  font-family: "Bricolage Grotesque", "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1;
  letter-spacing: 0.01em;
  margin: 0 0 14px 0;
}
.join-head h2 em {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 400;
  color: var(--sand);
}
.join-head h2 .q { font-style: normal; opacity: .55; }
.join-sub {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--cream-soft);
  opacity: .8;
  max-width: 540px;
}

/* form grid */
.join-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 28px;
}
.field {
  display: flex; flex-direction: column;
  gap: 8px;
  position: relative;
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.field.span-2 { grid-column: 1 / -1; }
.field .lbl {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sand);
  opacity: .85;
}
.field .lbl .hint {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--cream-soft);
  margin-left: 4px;
  opacity: .7;
}

/* native text inputs */
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"] {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(241, 231, 211, 0.22);
  padding: 10px 0 12px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 16px;
  color: var(--cream);
  letter-spacing: 0.01em;
  outline: none;
  transition: border-color 300ms ease;
}
.field input::placeholder { color: rgba(241,231,211,.35); }
.field input:focus { border-color: var(--cream); }
.field input:user-invalid { border-color: #c46a4a; }

/* select with custom caret */
.select-wrap {
  position: relative;
}
.select-wrap select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(241, 231, 211, 0.22);
  padding: 10px 28px 12px 0;
  appearance: none;
  -webkit-appearance: none;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 16px;
  color: var(--cream);
  letter-spacing: 0.01em;
  outline: none;
  cursor: pointer;
  transition: border-color 300ms ease;
}
.select-wrap select:focus { border-color: var(--cream); }
.select-wrap select option { background: #14110d; color: var(--cream); }
.select-wrap .caret {
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--sand);
  font-size: 10px;
}

/* phone */
.phone-row {
  display: flex; align-items: stretch;
  gap: 14px;
  border-bottom: 1px solid rgba(241, 231, 211, 0.22);
  transition: border-color 300ms ease;
}
.phone-row:focus-within { border-color: var(--cream); }
.phone-row input { border-bottom: none !important; flex: 1; }
.ccode {
  display: inline-flex; align-items: center;
  gap: 8px;
  padding: 10px 12px 12px 0;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 16px;
  color: var(--cream);
  white-space: nowrap;
}
.ccode .flag { font-size: 18px; line-height: 1; }
.ccode .dial { letter-spacing: 0.02em; }
.ccode .caret { font-size: 10px; opacity: .65; }

/* dropdown lists (country code + nationality) */
.ccode-pop {
  position: absolute;
  z-index: 5;
  left: 0;
  top: 100%;
  margin-top: 4px;
  width: min(360px, 100%);
  background: #1a1612;
  border: 1px solid rgba(241, 231, 211, 0.18);
  display: none;
}
.ccode-pop.is-open { display: block; }
.ccode-search {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(241, 231, 211, 0.14);
  padding: 12px 16px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--cream);
  outline: none;
}
.ccode-search::placeholder { color: rgba(241,231,211,.4); }
.ccode-list,
.combo-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(241,231,211,.2) transparent;
}
.combo-list {
  position: absolute;
  z-index: 5;
  left: 0; right: 0;
  top: 100%;
  margin-top: 4px;
  background: #1a1612;
  border: 1px solid rgba(241, 231, 211, 0.18);
  display: none;
}
.combo-list.is-open { display: block; }
.ccode-list li,
.combo-list li {
  padding: 9px 16px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--cream);
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  transition: background 200ms ease, color 200ms ease;
}
.ccode-list li .dial { color: var(--cream-soft); opacity: .7; margin-left: auto; font-size: 12px; }
.ccode-list li[aria-selected="true"],
.combo-list li[aria-selected="true"],
.ccode-list li:hover,
.combo-list li:hover { background: rgba(241,231,211,.08); color: var(--cream); }
.combo-list .empty {
  padding: 12px 16px;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 14px;
  color: var(--cream-soft);
  opacity: .6;
  cursor: default;
}

/* combo field — searchable nationality input */
.combo-field .combo-list { top: 100%; }
.combo-field { position: relative; }

/* chip multi-select */
.chip-field { padding: 0; border: none; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip {
  position: relative;
  cursor: pointer;
}
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-flex; align-items: center;
  padding: 9px 16px;
  border: 1px solid rgba(241, 231, 211, 0.22);
  border-radius: 999px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--cream);
  background: transparent;
  transition: background 280ms ease, border-color 280ms ease, color 280ms ease;
  user-select: none;
}
.chip:hover span { border-color: var(--cream); }
.chip input:checked + span {
  background: var(--cream);
  color: #14110d;
  border-color: var(--cream);
}
.other-input {
  margin-top: 12px;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(241, 231, 211, 0.22);
  padding: 10px 0 12px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 15px;
  color: var(--cream);
  outline: none;
}
.other-input:focus { border-color: var(--cream); }

/* actions */
.join-actions {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(241, 231, 211, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.join-status {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cream-soft);
  opacity: .55;
}
.join-status.is-error { color: #d8896a; opacity: 1; }
.join-status.is-success { color: var(--sand); opacity: 1; }
.btn-apply {
  display: inline-flex; align-items: center;
  gap: 14px;
  padding: 16px 28px;
  background: var(--cream);
  color: #14110d;
  border: 1px solid var(--cream);
  border-radius: 0;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 360ms ease, color 360ms ease, transform 360ms ease, opacity 360ms ease;
}
.btn-apply:hover:not(:disabled) {
  background: transparent;
  color: var(--cream);
  transform: translateY(-2px);
}
.btn-apply:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* success state — replace form contents */
.join-thanks {
  text-align: center;
  padding: 36px 20px 24px;
}
.join-thanks h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 400;
  font-size: 32px;
  margin-bottom: 12px;
}
.join-thanks h3 em {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: var(--sand);
}
.join-thanks p {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 15px;
  color: var(--cream-soft);
  opacity: .8;
  line-height: 1.6;
  max-width: 460px;
  margin: 0 auto;
}

/* lock body scroll when modal open */
body.join-locked { overflow: hidden; }

@media (max-width: 720px) {
  .join-sheet { padding: 40px 24px 28px; }
  .join-grid { grid-template-columns: 1fr; gap: 18px; }
  .field.span-2 { grid-column: 1; }
  .join-head h2 { font-size: clamp(28px, 8vw, 40px); }
  .join-actions { flex-direction: column; align-items: stretch; }
  .btn-apply { justify-content: center; }
}

/* ─────────────────────────────────────────────
   Accessibility — skip link, focus rings, motion
   ───────────────────────────────────────────── */

/* Skip-to-content link — hidden until keyboard-focused */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10000;
  padding: 10px 18px;
  background: var(--cream);
  color: #121214;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid #121214;
  transform: translateY(-200%);
  transition: transform 200ms ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--sand);
  outline-offset: 2px;
}

/* Visible focus ring for keyboard users on interactive elements
   that don't already define their own. Uses :focus-visible so mouse
   clicks don't paint a ring. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-links a:focus-visible,
.hero-side-tab:focus-visible,
.service-card .book:focus-visible,
.about-cta:focus-visible,
.insta-follow:focus-visible,
.tile:focus-visible,
.foot a:focus-visible,
.foot-map-col:focus-visible {
  outline: 2px solid var(--sand);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Form fields already have their own :focus border — make sure
   keyboard focus is still visible by adding a soft outline. */
.field input:focus-visible,
.select-wrap select:focus-visible,
.other-input:focus-visible,
.ccode:focus-visible {
  outline: 2px solid var(--sand);
  outline-offset: 2px;
}

/* Reduced-motion: respect users who opt out of animation.
   Disables smooth scrolling, parallax transforms, the drifting U
   motion (the U itself stays visible), hover scale, and transitions. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Kill animations & long transitions globally, but keep instant
     state changes so the UI still responds. */
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Hold the drifting U perfectly still */
  .ghost-u { transform: translate(-50%, -50%) !important; }

  /* No hover scale on service / mosaic / about photos */
  .service-card:hover .img,
  .tile:hover .ph,
  .about-photo:hover .img-wrap { transform: none !important; filter: none !important; }
}