@charset "UTF-8";
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./assets/inter-latin.woff2") format("woff2");
}
@font-face {
  font-family: Syne;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("./assets/syne-latin.woff2") format("woff2");
}
:root {
  color-scheme: dark;
  --bg: #0e0e0e;
  --text: #fafafa;
  --muted: #a3a3a3;
  --line: #383838;
  --surface: #171717;
  --soft: #202020;
  --icon-filter: brightness(0) invert(1);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fff;
  --text: #050505;
  --muted: #666;
  --line: #d2d2d2;
  --surface: #fff;
  --soft: #f2f2f2;
  --icon-filter: brightness(0);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
svg { display: block; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--text); outline-offset: 6px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: -80px; left: 16px; z-index: 10;
  padding: 16px; background: var(--text); color: var(--bg);
}
.skip-link:focus { top: 16px; }
.site-header {
  display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center;
  height: 84px; padding: 20px 40px; max-width: 1800px; margin: auto;
}
.wordmark {
  width: fit-content; font-size: 1.75rem; letter-spacing: -.07em;
  font-weight: 800; font-style: italic; line-height: 1.3;
}
.wordmark span { margin-left: 1px; }
.site-header nav { justify-self: center; }
.nav-home {
  display: block; padding: 7px 0 4px; border-bottom: 1px solid var(--text);
  font-size: .75rem; line-height: 1.5; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
}
.icon-button {
  display: grid; place-items: center; width: 44px; height: 44px;
  background: transparent; color: var(--muted); border-radius: 50%;
}
.icon-button:hover { background: var(--soft); color: var(--text); }
.theme-toggle { justify-self: end; }
.moon-icon { display: none; }
[data-theme="light"] .moon-icon { display: block; }
[data-theme="light"] .sun-icon { display: none; }
.hero {
  position: relative; height: max(620px, calc(calc(100 * var(--svh, 1svh)) - 84px));
  display: flex; flex-direction: column; align-items: center;
  padding: 32px 24px 0; overflow: clip;
}
.hero-copy { position: relative; flex: none; z-index: 2; text-align: center; }
h1 {
  margin: 0; font-family: Syne, Inter, sans-serif;
  font-size: clamp(3rem, 7vw, 10.5rem); font-weight: 800;
  line-height: .95; letter-spacing: -.055em; text-transform: uppercase;
}
.intro {
  font-size: 1.0625rem; line-height: 1.625; font-weight: 400;
  margin: 12px 0 0; color: var(--muted);
}
.hero-actions { display: flex; gap: 12px; justify-content: center; margin-top: 20px; }
.pill {
  display: flex; align-items: center; gap: 11px;
  padding: 6px 6px 6px 13px; min-height: 44px;
  border: 1px solid var(--line); background: var(--bg); border-radius: 999px;
  font-size: .5625rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; white-space: nowrap;
  transition: border-color .2s, transform .2s;
}
.pill:hover { border-color: var(--muted); transform: translateY(-2px); }
.action-icon { width: 20px; height: 20px; color: var(--muted); }
.arrow-circle {
  width: 27px; height: 27px; border-radius: 50%;
  background: var(--text); color: var(--bg); display: grid; place-items: center;
  font-size: 1.0625rem; font-weight: 400; letter-spacing: 0;
}
.portrait-stage {
  position: relative; flex: 1; min-height: 0; margin-top: 24px;
  width: 100%; z-index: 1; pointer-events: none;
}
.portrait-stage.has-corridor {
  width: max(100vw, 640px); container-type: inline-size;
  margin-top: 16px; margin-bottom: 24px; /* was 32/48: Maaz a little closer (Ahmad, 2026-09-26) */
}
.portrait-corridor {
  position: absolute; inset: 0;
  perspective: 30cqw; perspective-origin: 50% 52%;
}
.corridor-rails { position: absolute; inset: 0; transform-style: preserve-3d; }
.corridor-card {
  padding: 0; border: 0; color: inherit;
  position: absolute; left: 50%; top: 52%;
  width: 18cqw; height: 25cqw; margin-left: -9cqw; margin-top: -12.5cqw;
  overflow: hidden; border-radius: .4cqw; backface-visibility: hidden;
  background: #111;
}
.corridor-preview { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.has-corridor > .portrait-image { z-index: 2; pointer-events: none; }
.hero-background {
  position: absolute; z-index: 0; inset: -12px; pointer-events: none;
  opacity: .3; filter: blur(6px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 70%, transparent 100%);
}
.hero-background img, .hero-background video {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover;
}
.hero-scroll.is-ready { height: max(1023px, calc(165 * var(--svh, 1svh))); }
.hero-scroll.is-ready > .hero { position: sticky; top: 0; height: max(620px, calc(100 * var(--svh, 1svh))); }
.portrait-stage[data-paused="true"] .corridor-card { animation-play-state: paused !important; }
.stream-toggle {
  position: absolute; z-index: 3; bottom: 20px; right: 40px;
  min-height: 44px; padding: 10px 15px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); background: var(--bg);
  font-size: .6875rem; letter-spacing: .04em;
}
.stream-toggle:hover { color: var(--text); border-color: var(--muted); }
.portrait-placeholder {
  height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.portrait-initials { font-size: 10rem; font-weight: 800; letter-spacing: -.1em; opacity: .06; }
.placeholder-caption { font-size: .75rem; color: var(--muted); }
.portrait-image {
  display: block; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  height: min(calc(67 * var(--svh, 1svh)), 100%); width: auto; max-width: none;
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}
.eyebrow {
  margin: 0; font-size: .625rem; font-weight: 600; line-height: 1.5;
  letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.brands { padding: 8px 24px 62px; text-align: center; max-width: 1120px; margin: auto; }
.brand-list {
  display: flex; align-items: center; justify-content: center; gap: 44px;
  flex-wrap: wrap; margin-top: 28px; min-height: 44px;
}
.pending-brands { margin: 0; font-size: .875rem; color: var(--muted); }
.brand-list img { max-width: 140px; height: 34px; object-fit: contain; }
.brand-name { font-size: 1.25rem; font-weight: 600; letter-spacing: -.025em; }
.site-footer {
  max-width: 1120px; margin: 0 auto; padding: 40px 24px 26px;
  border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: center;
}
.footer-contact { font-size: 1.125rem; font-weight: 500; letter-spacing: -.025em; }
.footer-contact span[aria-hidden] { margin-left: 6px; }
.footer-contact:hover { text-decoration: underline; text-underline-offset: 5px; }
.socials { display: flex; gap: 8px; align-items: center; margin-top: 18px; }
.social-icon {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; color: var(--text);
}
a.social-icon:hover { background: var(--soft); }
.social-icon svg, .brand-icon { width: 20px; height: 20px; }
.brand-icon { filter: var(--icon-filter); }
.pending-social { color: var(--muted); opacity: .58; cursor: default; }
.footer-bottom {
  width: 100%; display: flex; justify-content: space-between;
  align-items: center; gap: 20px; margin-top: 52px;
}
.footer-bottom p { font-size: .75rem; color: var(--muted); }
.footer-wordmark { font-size: 1.4375rem; }
dialog {
  width: min(460px, calc(100% - 32px)); padding: 42px 32px 32px;
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--surface); color: var(--text); box-shadow: 0 24px 100px #0006;
}
dialog::backdrop { background: #0009; backdrop-filter: blur(8px); }
.dialog-close { position: absolute; right: 10px; top: 10px; font-size: 1.75rem; font-weight: 300; }
dialog h2 { font-size: 1.875rem; font-weight: 600; letter-spacing: -.035em; margin: 16px 0; }
dialog p:not(.eyebrow) { font-size: 1rem; line-height: 1.7; color: var(--muted); margin: 0 0 26px; }
.dialog-link {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--line); padding-top: 20px; font-size: .9375rem;
}
.dialog-link:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 700px) {
  .site-header { height: 76px; padding: 16px 22px; }
  .wordmark { font-size: 1.5625rem; }
  .hero { padding: 54px 20px 0; height: max(580px, calc(calc(100 * var(--svh, 1svh)) - 76px)); }
  h1 { font-size: clamp(2rem, 8.8vw, 3.5rem); letter-spacing: -.045em; }
  .intro { margin-top: 17px; font-size: 1rem; max-width: 340px; }
  .hero-actions { gap: 10px; margin-top: 22px; }
  .pill { gap: 9px; padding-left: 11px; font-size: .5625rem; letter-spacing: .13em; }
  .action-icon { width: 18px; height: 18px; }
  .arrow-circle { width: 25px; height: 25px; }
  .portrait-image { height: min(calc(64 * var(--svh, 1svh)), 100%); }
  .stream-toggle { right: 20px; bottom: 12px; }
  .brands { padding: 8px 20px 45px; }
  .site-footer { margin: 0 22px; padding: 30px 0 22px; }
  .footer-bottom { margin-top: 35px; }
  .brand-list { gap: 24px; }
  .brand-list img { max-width: 110px; height: 28px; }
}
@media (max-width: 360px) {
  .hero { padding-top: 40px; }
  .hero-actions { gap: 10px; }
  .action-icon { display: none; }
  .pill { gap: 8px; padding-left: 12px; letter-spacing: .12em; }
  .intro { max-width: 265px; }
  .portrait-image { height: min(calc(59 * var(--svh, 1svh)), 100%); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-scroll.is-ready { height: auto; }
  .hero-scroll.is-ready > .hero { position: relative; height: max(620px, calc(calc(100 * var(--svh, 1svh)) - 84px)); }
  *, *::before, *::after { transition: none !important; }
}

/* ---------------------------------------------------------------- Sharp With Maaz additions */

/* Hero heights use --svh: one hundredth of the screen height, measured by app.js when the page opens.
   Instagram's in-app browser (and phones generally) grow and shrink the page as toolbars hide on
   scroll, which made Maaz resize while scrolling; on touch screens --svh only changes when the width
   does (rotating the phone). Without the script it falls back to the browser's own svh. */

/* Maaz and the chair: transparent frames (like the original site's cut-out portrait). The frames are
   trimmed to where he actually moves; the chair's pedestal sits 63.36% across, so that point goes on
   the page centre and the chair turns on the spot under the title. The cards stream out behind him. */
.maaz-portrait {
  display: block; position: absolute; left: 50%; bottom: 0; transform: translateX(-63.36%);
  height: min(calc(70 * var(--svh, 1svh)), 100%); width: auto; max-width: none; z-index: 2; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 93%, transparent 100%);
}
.has-corridor > .portrait-corridor { z-index: 1; }
.media-note {
  position: absolute; z-index: 3; left: 40px; bottom: 20px; margin: 0;
  font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); opacity: .75;
}
.ig-handle { display: inline-flex; gap: 8px; align-items: baseline; }
.ig-handle:hover { text-decoration: underline; text-underline-offset: 5px; }
.owner-link { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom p { text-align: right; line-height: 1.6; }
.intro { margin-left: auto; margin-right: auto; }
@media (max-width: 700px) {
  /* Phones: as tall as the space under the buttons allows, never wider than the screen (the frame
     then scales down inside its box, anchored at the bottom). Centring the frame rather than the
     pedestal keeps his side-on legs on screen. */
  .maaz-portrait {
    height: min(calc(66 * var(--svh, 1svh)), 100%); width: auto; max-width: 90vw;
    object-fit: contain; object-position: 50% 100%; transform: translateX(-57%);
  }
  .media-note { left: 20px; bottom: 16px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-bottom p { text-align: left; }
}

/* Booking, inside the site's own dialog. */
dialog.booking-dialog { width: min(560px, calc(100% - 24px)); padding: 38px 28px 28px; max-height: calc(100svh - 24px); overflow: auto; }
.booking h2 { margin: 12px 0 6px; }
.booking .booking-lead { margin: 0 0 22px; font-size: .9375rem; }
.booking-step { display: grid; gap: 10px; }
.choice {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; width: 100%;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: transparent;
  text-align: left; transition: border-color .2s, background .2s;
}
.choice:hover, .choice:focus-visible { border-color: var(--muted); background: var(--soft); }
.choice-name { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; }
.choice-meta { font-size: .8125rem; color: var(--muted); grid-column: 1; }
.choice-price { grid-row: 1 / span 2; grid-column: 2; font-size: .9375rem; font-weight: 600; }
.days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x proximity; }
.day {
  flex: none; width: 64px; padding: 10px 0; border: 1px solid var(--line); border-radius: 14px;
  background: transparent; display: grid; gap: 2px; justify-items: center; scroll-snap-align: start;
}
.day small { font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.day strong { font-size: 1.25rem; font-weight: 600; letter-spacing: -.03em; }
.day[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.day[aria-pressed="true"] small { color: var(--bg); opacity: .7; }
.day:disabled { opacity: .35; cursor: not-allowed; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 6px; }
.slot {
  padding: 12px 0; border: 1px solid var(--line); border-radius: 999px; background: transparent;
  font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.slot:hover, .slot:focus-visible { border-color: var(--text); }
.tz-note, .field-note { font-size: .75rem; color: var(--muted); margin: 4px 0 0; }
.empty-note { font-size: .9375rem; color: var(--muted); margin: 8px 0; }
.form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field label { font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea {
  width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 1rem;
}
.field textarea { min-height: 84px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--text); outline-offset: 1px; }
.field [aria-invalid="true"] { border-color: #e5484d; }
.field-error { font-size: .8125rem; color: #ff6b6b; margin: 0; }
[data-theme="light"] .field-error { color: #c62828; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.summary {
  display: grid; gap: 4px; padding: 16px 18px; border-radius: 14px; background: var(--soft); margin-bottom: 4px;
}
.summary strong { font-size: 1.0625rem; letter-spacing: -.02em; }
.summary span { font-size: .875rem; color: var(--muted); }
.booking-actions { display: flex; gap: 10px; justify-content: space-between; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border-radius: 999px; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.btn-primary { background: var(--text); color: var(--bg); }
.btn-primary:disabled { opacity: .5; cursor: progress; }
.btn-quiet { background: transparent; border: 1px solid var(--line); }
.btn-quiet:hover { border-color: var(--muted); }
.back-link { background: none; padding: 8px 0; font-size: .8125rem; color: var(--muted); }
.back-link:hover { color: var(--text); }
.notice { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); font-size: .875rem; color: var(--muted); margin: 0 0 14px; }
.notice.error { border-color: #e5484d; color: var(--text); }
.done-mark { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: var(--bg); font-size: 1.5rem; margin-bottom: 6px; }

/* Generated room background, kept soft behind the original subject and cards. */
.room-backdrop {
  opacity: .29;
  filter: blur(8px);
  background: radial-gradient(ellipse at 62% 70%, #b68c5633, transparent 65%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 94%, transparent 100%);
}
.room-backdrop img { object-fit: cover; object-position: 50% 50%; }
.portrait-stage.has-corridor::after {
  content: '';
  position: absolute;
  z-index: 1;
  left: 50%; bottom: -2px;
  width: clamp(110px, 14vw, 200px);
  height: clamp(12px, 2vw, 24px);
  transform: translateX(-50%);
  background: radial-gradient(ellipse, #0005 0%, #0002 40%, transparent 74%);
  filter: blur(5px);
  pointer-events: none;
}
.maaz-portrait { -webkit-mask-image: none; mask-image: none; }
@media (max-width: 700px) {
  .room-backdrop img { object-position: 80% 50%; }
  .portrait-stage.has-corridor::after { left: calc(50% + 6.6vw); }
}

/* Keep the full-viewport hero without the former scroll runway. */
.hero.autoplay-hero { height: max(620px, calc(100 * var(--svh, 1svh))); }

/* Fit the hero below the 76px phone header so the chair base remains visible. */
@media (max-width: 700px) {
  .hero.autoplay-hero { height: max(580px, calc(calc(100 * var(--svh, 1svh)) - 76px)); } /* the 580px floor keeps Maaz visible on a phone held sideways */
}

/* Reveal the same room's floor under the pedestal; its texture stays aligned with the backdrop. */
.hero.autoplay-hero::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: -12px;
  pointer-events: none;
  background: url('./assets/maaz-room-candidate-01.png') 50% 50% / cover no-repeat;
  opacity: .36;
  filter: blur(8px) brightness(1.15);
  -webkit-mask-image: radial-gradient(ellipse clamp(110px, 16vw, 220px) clamp(48px, 7vw, 90px) at 50% calc(100% - 36px), #000 0%, transparent 100%);
  mask-image: radial-gradient(ellipse clamp(110px, 16vw, 220px) clamp(48px, 7vw, 90px) at 50% calc(100% - 36px), #000 0%, transparent 100%);
}
@media (max-width: 700px) {
  .hero.autoplay-hero::after {
    background-position: 80% 50%;
    -webkit-mask-image: radial-gradient(ellipse 110px 48px at calc(50% + 6.6vw) calc(100% - 36px), #000 0%, transparent 100%);
    mask-image: radial-gradient(ellipse 110px 48px at calc(50% + 6.6vw) calc(100% - 36px), #000 0%, transparent 100%);
  }
}
:root[data-theme="light"] .hero.autoplay-hero::after { opacity: .16; }

/* Switched off on Ahmad's word (2026-09-26): the hero's "AI-generated film" caption, the pause
   button, the "Latest cuts @sharpwithmaaz" strip (so the hero runs straight down to the footer's top
   line) and the footer's "The hero film is AI-generated" note. Delete a selector to bring that piece
   back. The pause logic still runs, so visitors who ask their device to reduce motion get a still
   page. With .ai-note off there is no AI disclosure on the page, which the LTX-2 licence requires
   while the chair film is shown (Ahmad's decision, made knowing that). */
.media-note, .stream-toggle, .brands, .ai-note { display: none !important; }