/* ──────
✦ TOKENS ✦
─────── */
:root {
  --black      : #000000;
  --panel      : #070707;
  --text       : #f4f1ec;
  --muted      : rgba(255, 255, 255, 0.58);
  --hairline   : rgba(255, 255, 255, 0.12);
  --accent      : #22d3ee;   /* Cyan */
  --accent-glow : 34, 211, 238;

  /* Metallic cyan, with a white highlight for headings */
  --metal-accent-text: linear-gradient(100deg, #0e7490 0%, #22d3ee 32%, #ffffff 50%, #22d3ee 68%, #0e7490 100%);

  /* Hero photo darkness, and the light wash of accent color over it */
  --hero-grade: contrast(1.05) brightness(0.55);
  --hero-tint : linear-gradient(rgba(var(--accent-glow), 0.12), rgba(var(--accent-glow), 0.12));

  /* Glass */
  --glass-fill  : linear-gradient(135deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.03) 100%);
  --glass-border: rgba(255, 255, 255, 0.17);
  --glass-blur  : blur(18px) saturate(165%);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 10px 34px rgba(0, 0, 0, 0.38);

  --radius-pill : 999px;
  --radius-panel: 20px;
  --radius-image: 14px;

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body   : "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --nav-height: 90px;
  --ease      : cubic-bezier(0.22, 1, 0.36, 1);
  --fade-ease : cubic-bezier(0.37, 0, 0.3, 1);   /* Even and gentle, for scroll fades */
}


/* ──────
✦ GLOBAL ✦
─────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
  background: var(--black);
  scroll-padding-top: 24px;
}
body {
  margin     : 0;
  overflow-x : clip;
  color      : var(--text);
  background : var(--black);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, dl, dd, ol, ul {
  margin : 0;
  padding: 0;
}
ol, ul {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
em {
  font-style: italic;
  color: var(--accent);
  background: var(--metal-accent-text);
  background-size: 220% 100%;
  background-position: 30% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
::selection {
  color: var(--text);
  background: #0e7490;
}
[hidden] {
  display: none !important;
}


/* ─────────
✦ SCROLLBAR ✦
────────── */
::-webkit-scrollbar {
  width: 6px;                 /* Ultra thin */
  background: transparent;    /* No track */
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);   /* Low contrast floating bar */
  border: 2px solid transparent;           /* Appears even thinner */
  border-radius: 50px;
  background-clip: padding-box;
}
::-webkit-scrollbar-button {
  display: none;
}
@supports not selector(::-webkit-scrollbar) {
  html {                      /* Firefox equivalent */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
  }
}


/* ─────────────
✦ SMOOTH SCROLL ✦
Lenis base styles
────────────── */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}


/* ─────────────────
✦ SECTION CONTAINERS ✦
Primary: full width up to 1700px, then stays centered.
Inner  : 90% of the primary, giving 5% margins.
────────────────── */
.primarycontainer {
  position: relative;
  display : flex;
  justify-content: center;
  align-items    : center;

  width    : 100%;
  max-width: 1700px;
  margin-inline: auto;
}
@media (max-width: 750px) {
  .primarycontainer {
    /* min-marg: 600px  max-marg: 750px  max-size: 75px scaling to 0 */
    padding-inline: max(0px, min(75px, calc(0.5 * (100vw - 600px))));
  }
}
.innercontainer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 90%;
}
.sectionspace {
  margin-block: max(7.5%, 72px);
}


/* ──────────
✦ TYPOGRAPHY ✦
─────────── */
.label {
  display: block;
  color  : var(--muted);
  font-size     : 11px;
  font-weight   : 400;
  letter-spacing: 0.24em;
  line-height   : 1.7;
  text-transform: uppercase;
}
.label__num {
  margin-right: 1.4em;
  color: var(--accent);
}
.heading {
  margin-top : clamp(18px, 2vw, 30px);
  font-family: var(--font-display);
  font-size  : clamp(40px, 5.4vw, 88px);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.02;
}
.body-copy {
  max-width: 50ch;
  color    : var(--muted);
  font-size: 15px;
}
.text-underline {
  position: relative;
}
.text-underline::after {
  content : "";
  position: absolute;
  left    : 0;
  right   : 0;
  bottom  : -4px;
  height  : 1px;
  background: currentColor;
  transform : scaleX(0);
  transform-origin: right;
  transition: transform 450ms var(--ease);
}
.text-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
.text-link {
  display: inline-block;
  color  : var(--accent);
  font-size     : 11px;
  font-weight   : 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.text-link::after {
  transform: scaleX(1);
  transform-origin: left;
}
.text-link:hover::after {
  transform: scaleX(0.35);
}


/* ───────
✦ BUTTONS ✦
──────── */
/* Accent: a solid rounded block with an arrow and a soft glow. */
.button {
  display : inline-flex;
  align-items: center;
  justify-content: center;
  gap     : 12px;
  min-height: 50px;
  padding : 13px 26px;
  border  : 1px solid rgba(var(--accent-glow), 0.34);
  border-radius: 14px;
  color   : #fff;
  background: linear-gradient(100deg, #0b5a70 0%, #0e7490 58%, #118aa8 100%);   /* The deep end of the heading gradient */
  box-shadow: 0 10px 30px rgba(14, 116, 144, 0.34);
  font-family   : var(--font-body);
  font-size     : 15px;
  font-weight   : 600;
  letter-spacing: 0.005em;
  line-height   : 1.3;
  text-align    : center;
  white-space   : nowrap;
  cursor: pointer;
  transition: background-color 250ms var(--ease), border-color 250ms var(--ease), box-shadow 250ms var(--ease), color 250ms var(--ease);
}
.button::before {
  content: "";    /* Arrow icon, drawn in the button's text color */
  flex   : none;
  width  : 19px;
  height : 19px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M13 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M13 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 300ms var(--ease);
}
.button:hover {
  border-color: rgba(var(--accent-glow), 0.7);
  background: linear-gradient(100deg, #0d6880 0%, #1084a3 58%, #1398b8 100%);
  box-shadow: 0 12px 38px rgba(14, 116, 144, 0.55);
}
.button:hover::before {
  transform: translateX(3px);
}

/* Secondary: quiet dark outline, with the arrow after the text */
.button--ghost {
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.86);
  background: rgba(10, 10, 12, 0.6);
  box-shadow: none;
  font-weight: 500;
}
.button--ghost::before {
  order: 1;
}
.button--ghost:hover {
  border-color: rgba(255, 255, 255, 0.36);
  color: #fff;
  background: rgba(26, 26, 30, 0.8);
  box-shadow: none;
}
.button--small {
  min-height: 36px;
  padding: 7px 16px;
  border-radius: 10px;
  font-size: 13px;
  box-shadow: none;
}
.button--small::before {
  content: none;
}


/* ────────────────
✦ NAVIGATION BAR ✦
──────────────── */
.nohighlight {
  user-select      : none;
  -webkit-user-drag: none;
}
.nv-text1 {
  font-family   : var(--font-body);
  font-weight   : 400;
  font-size     : 11px;
  letter-spacing: 1px;
  line-height   : 21.5253px;
  color         : rgb(255, 255, 255);
}
.navbar {
  position: relative;

  width : 100%;
  height: var(--nav-height);

  box-sizing: border-box;       /* Makes padding inside instead of outside */
}
.navcontent {
  --page-pad: 0px;   /* Matches the primary container's side padding */

  position   : absolute;
  display    : flex;
  align-items: center;

  width  : 100%;
  max-width: 1700px;            /* Sets maximum width */
  top    : 1px;
  left   : 0;
  right  : 0;
  bottom : 1px;   /* Used instead of margin */
  padding: 0 calc(var(--page-pad) + 0.05 * (min(100%, 1700px) - 2 * var(--page-pad)));   /* Same 5% margins as the inner container */
  margin : 0 auto;

  box-sizing: border-box;
}
@media (max-width: 750px) {
  .navcontent {
    --page-pad: max(0px, min(75px, calc(0.5 * (100vw - 600px))));
  }
}
.navcontent > a:first-child {
  position: relative;
  z-index : 5;
  display : block;
  flex    : none;
  margin-right: 28px;
}
.navlogo {
  display: block;
  width  : auto;
  height : 46px;
}
@media (max-width: 500px) {
  .navlogo {
    height: 42px;
  }
}
.navtext {
  position   : relative;
  z-index    : 5;
  display    : flex;
  align-items: center;
  gap: 30px;
}
.navtext a {
  color          : #fff;
  text-decoration: none;
  transition     : opacity 0.2s ease;
}
.navtext a:hover {
  opacity: 0.7;
}
@media (max-width: 900px) {
  .navtext { display: none; }
}


/* ─────────────────
✦ NAVIGATION MENU ✦
───────────────── */
.nvmenu-icon {
  position       : relative;
  display        : inline-flex;
  align-items    : center;
  justify-content: center;

  border      : 0;
  height      : auto;
  width       : 2em;
  margin-left : auto;
  margin-right: -6px;   /* The icon has empty space inside, so its lines reach the margin */
  padding     : 0;

  cursor    : pointer;
  background: transparent;
  z-index   : 5;
}
.nvmenu-icon img {
  display: block;

  height: auto;
  width : 2.5em;

  pointer-events: none;
  filter        : brightness(0) invert(1);
  -webkit-filter: brightness(0) invert(1);
}
.nvmenu-scrolllock {
  overflow: hidden !important;
}
.nvmenu-primarycontainer {
  position   : fixed;
  display    : grid;
  place-items: center;

  inset         : 0;
  z-index       : 999999;
  padding       : 12px;
  visibility    : hidden;   /* Keeps closed menu links out of keyboard focus */
  pointer-events: none;
}
.nvmenu-primarycontainer.is-open {
  visibility    : visible;
  pointer-events: auto;
}
.nvmenu-backdrop {
  position: absolute;
  inset   : 0;
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity : 0;
  transition: opacity 500ms var(--ease);
}
.nvmenu-panel {
  position: relative;
  display : grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 124px minmax(0, 1fr);

  width     : min(980px, 100%);
  max-height: calc(100svh - 24px);
  overflow  : hidden;
  background: #000;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.7);
  outline   : none;

  opacity  : 0;
  transform: translateY(20px) scale(0.985);
  transition: opacity 500ms var(--ease), transform 800ms var(--ease);
}

/* Black side */
.nvmenu-content {
  order     : 2;
  min-height: 0;
  overflow-y: auto;
  padding   : 28px 26px 32px;
}
.nvmenu-title {
  font-family: var(--font-display);
  font-size  : clamp(38px, 4.6vw, 54px);
  font-weight: 400;
  line-height: 1.1;
}
.nvmenu-note {
  margin-top: 6px;
  color     : var(--muted);
  font-size : 13px;
}
.nvmenu-links {
  display: grid;
  gap    : 4px;
  margin : 22px 0 26px;
}
.nvmenu-link {
  position: relative;
  display : block;
  padding : 10px 0 8px;

  font-size     : 13px;
  font-weight   : 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color         : var(--text);
  transition    : color 250ms var(--ease), padding-left 350ms var(--ease);
}
.nvmenu-link::before,
.nvmenu-link::after {
  content : "";     /* Thin rule under each link, drawn in as the menu opens */
  position: absolute;
  left    : 0;
  right   : 0;
  bottom  : 0;
  height  : 1px;
  transform-origin: left;
}
.nvmenu-link::before {
  background: rgba(255, 255, 255, 0.24);
  transform : scaleX(0);
  transition: transform 800ms var(--ease);
}
.nvmenu-link::after {
  background: var(--accent);    /* Accent rule sweeps across on hover */
  transform : scaleX(0);
  transition: transform 450ms var(--ease);
}
.nvmenu-link:hover {
  padding-left: 8px;
  color       : var(--accent);
}
.nvmenu-link:hover::after {
  transform: scaleX(1);
}
.nvmenu-title,
.nvmenu-note,
.nvmenu-link,
.nvmenu-btn {
  opacity  : 0;
  translate: 0 16px;
  transition-property: opacity, translate, color, padding-left, filter, border-color;
  transition-duration: 600ms, 800ms, 250ms, 350ms, 300ms, 300ms;
  transition-timing-function: var(--ease);
}

/* Photo side */
.nvmenu-media {
  position : relative;
  order    : 1;
  overflow : hidden;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 1000ms var(--ease);
}
.nvmenu-media img {
  display: block;
  width  : 100%;
  height : 100%;
  object-fit: cover;
  filter : contrast(1.05) brightness(0.72);
  transform : scale(1.14);
  transition: transform 1500ms var(--ease);
}
.nvmenu-media::after {
  content : "";     /* Soft cyan wash over the photo */
  position: absolute;
  inset   : 0;
  background: linear-gradient(160deg, rgba(var(--accent-glow), 0.14), rgba(0, 0, 0, 0.3));
  pointer-events: none;
}
.nvmenu-tab {
  position: absolute;
  top     : 0;
  left    : 0;
  z-index : 2;
  display : inline-flex;
  align-items: center;
  gap     : 10px;
  padding : 10px 14px;
  border  : 0;
  color   : #fff;
  background: linear-gradient(100deg, #0c4a58 0%, #127e93 100%);
  font-family   : var(--font-body);
  font-size     : 11px;
  font-weight   : 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor   : pointer;
  transform: translateY(-101%);
  transition: transform 600ms var(--ease), filter 300ms var(--ease);
}
.nvmenu-tab:hover {
  filter: brightness(1.15);
}
.nvmenu-tab span {
  display: grid;
  place-items: center;
  width  : 18px;
  height : 18px;
  border : 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}

/* Open: each layer arrives in turn */
.is-open .nvmenu-backdrop {
  opacity: 1;
}
.is-open .nvmenu-panel {
  opacity  : 1;
  transform: none;
}
.is-open .nvmenu-media {
  clip-path: inset(0);
  transition-delay: 120ms;
}
.is-open .nvmenu-media img {
  transform: none;
  transition-delay: 120ms;
}
.is-open .nvmenu-tab {
  transform: none;
  transition-delay: 620ms, 0ms;
}
.is-open .nvmenu-title,
.is-open .nvmenu-note,
.is-open .nvmenu-link,
.is-open .nvmenu-btn {
  opacity  : 1;
  translate: none;
  transition-delay: calc(180ms + var(--step, 0) * 60ms), calc(180ms + var(--step, 0) * 60ms), 0ms, 0ms, 0ms, 0ms;
}
.is-open .nvmenu-link::before {
  transform: scaleX(1);
  transition-delay: calc(260ms + var(--step, 0) * 60ms);
}
.is-open .nvmenu-note { --step: 1; }
.is-open .nvmenu-link:nth-child(1) { --step: 2; }
.is-open .nvmenu-link:nth-child(2) { --step: 3; }
.is-open .nvmenu-link:nth-child(3) { --step: 4; }
.is-open .nvmenu-link:nth-child(4) { --step: 5; }
.is-open .nvmenu-link:nth-child(5) { --step: 6; }
.is-open .nvmenu-link:nth-child(6) { --step: 7; }
.is-open .nvmenu-btn { --step: 8; }

/* Close: quick and all together. Timed to match CLOSE_TOTAL_MS in script.js */
.nvmenu-primarycontainer.is-closing * {
  transition-delay: 0ms !important;
  transition-duration: 380ms !important;
}
.is-closing .nvmenu-backdrop {
  opacity: 0;
}
.is-closing .nvmenu-panel {
  opacity  : 0;
  transform: translateY(14px) scale(0.99);
}
.is-closing .nvmenu-media {
  clip-path: inset(0 0 0 100%);
}
.is-closing .nvmenu-tab {
  transform: translateY(-101%);
}
.is-closing .nvmenu-title,
.is-closing .nvmenu-note,
.is-closing .nvmenu-link,
.is-closing .nvmenu-btn {
  opacity  : 0;
  translate: 0 10px;
}

@media (min-width: 760px) {
  .nvmenu-panel {
    grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
    grid-template-rows: minmax(0, 1fr);
    height: min(600px, 100%);
  }
  .nvmenu-content {
    order  : 0;
    padding: clamp(32px, 5vw, 60px);
  }
  .nvmenu-media {
    order: 0;
  }
}


/* ────
✦ HERO ✦
───── */
/* Same framed panel as the contact section, with the photo inside it. */
.hero__inner {
  padding-top: clamp(4px, 1vw, 16px);
}
.hero__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display : grid;
  gap     : clamp(16px, 1.8vw, 28px);
  align-content: end;
  min-height: min(100svh - var(--nav-height) - 24px, 800px);
  padding : clamp(48px, 10svh, 160px) clamp(24px, 5.4vw, 92px) clamp(24px, 5svh, 64px);
  border  : 1px solid var(--glass-border);
  border-radius: var(--radius-panel);
  background: #040404;
  box-shadow: var(--glass-shadow);
}
.hero__image {
  position: absolute;
  top     : -6%;   /* Extra height gives the parallax room to move */
  left    : 0;
  z-index : -2;
  width   : 100%;
  height  : 112%;
  object-fit: cover;
  object-position: center 35%;
  filter  : var(--hero-grade);
  will-change: transform;
}
.hero__panel::before {
  content : "";   /* Darkens the photo into the panel, with the contact section's corner glow */
  position: absolute;
  inset   : 0;
  z-index : -1;
  background:
    radial-gradient(70% 90% at 0% 100%, rgba(var(--accent-glow), 0.14), transparent 70%),
    linear-gradient(to top, #040404 0%, rgba(4, 4, 4, 0.94) 30%, rgba(4, 4, 4, 0.66) 66%, rgba(4, 4, 4, 0.56) 100%),
    var(--hero-tint);
}
.hero__title {
  margin-top: clamp(16px, 2vw, 28px);
  font-family: var(--font-display);
  font-size  : clamp(58px, min(8.4vw, 13svh), 136px);   /* Short screens shrink it too */
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 0.95;
  animation: rise 1300ms var(--ease) 100ms both;
}
.hero__eyebrow {
  animation: rise 1300ms var(--ease) both;
}
.hero__lead {
  max-width: 52ch;
  color    : rgba(255, 255, 255, 0.72);
  font-size: 12px;
  animation: rise 1300ms var(--ease) 200ms both;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap    : 12px;
  margin-top: clamp(18px, 2vw, 28px);
  animation: rise 1300ms var(--ease) 300ms both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}


/* ───────
✦ ARTWORK ✦
──────── */
.art {
  display: block;
  width  : 100%;
  height : 100%;
  object-fit: cover;
}


/* ─────
✦ ABOUT ✦
────── */
.about {
  gap: clamp(48px, 7vw, 120px);
}
.about__text .body-copy {
  margin: clamp(22px, 2.4vw, 36px) 0 30px;
}
.about__media {
  position: relative;
  padding-bottom: 14%;
}
.about__media-main {
  width : 88%;
  height: auto;
  margin-left : auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-image);
}
.about__media-inset {
  position: absolute;
  left    : 0;
  bottom  : 0;
  width   : 30%;
  height  : auto;
  aspect-ratio: 4 / 5;
  border  : 8px solid var(--black);
  border-radius: calc(var(--radius-image) + 8px);
}


/* ───────
✦ DIVIDER ✦
──────── */
.divider {
  display: flex;
  align-items: center;
  gap: 18px;
}
.divider__line {
  flex  : 1;
  height: 1px;
  background: var(--hairline);
}
.divider__diamond {
  width : 7px;
  height: 7px;
  background: var(--accent);
  transform : rotate(45deg);
}


/* ────────
✦ LISTINGS ✦
───────── */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 26px 40px;
  margin-bottom: clamp(36px, 4.4vw, 70px);
}
.filter {
  display  : flex;
  flex-wrap: wrap;
  gap      : 8px 26px;
}
.filter__tab {
  position: relative;
  padding : 8px 0;
  border  : 0;
  color   : var(--muted);
  background: none;
  font-family   : var(--font-body);
  font-size     : 11px;
  font-weight   : 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 300ms var(--ease);
}
.filter__tab::after {
  content : "";
  position: absolute;
  left    : 0;
  right   : 0;
  bottom  : 2px;
  height  : 1px;
  background: var(--accent);
  transform : scaleX(0);
  transform-origin: left;
  transition: transform 450ms var(--ease);
}
.filter__tab:hover {
  color: var(--text);
}
.filter__tab[aria-pressed="true"] {
  color: var(--text);
}
.filter__tab[aria-pressed="true"]::after {
  transform: scaleX(1);
}
.listing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 3.4vw, 56px) clamp(16px, 1.8vw, 30px);
}
.listing-card__media {
  position: relative;
  height  : clamp(250px, 27vw, 460px);
  transition: transform 500ms var(--ease);
}
.listing-card__media::before {
  content : "";   /* Warm glow behind the image on hover */
  position: absolute;
  inset   : 8%;
  background: var(--accent);
  filter  : blur(44px);
  opacity : 0;
  transition: opacity 500ms var(--ease);
}
.listing-card__frame {
  position: relative;
  height  : 100%;
  overflow: hidden;
  border-radius: var(--radius-image);
  background: var(--panel);
}
.listing-card__frame .art {
  transition: transform 1100ms var(--ease), opacity 1200ms var(--fade-ease);
}
.js .listing-card__frame .art:not(.is-loaded) {
  opacity: 0;
}
.listing-card {
  display: flex;
}
.listing-card__link {   /* Equal heights, so the lines under each row of cards match */
  display: flex;
  flex-direction: column;
  width  : 100%;
}
.listing-card__link .listing-card__body {
  flex: 1;
  align-content: start;
}
.listing-card__type {
  position: absolute;
  top     : 14px;
  left    : 14px;
  padding : 6px 12px;
  border  : 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  color   : #fff;
  background: var(--glass-fill), rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  font-size     : 10px;
  font-weight   : 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
@media (hover: hover) {
  .listing-card:hover .listing-card__media {
    transform: translateY(-6px);
  }
  .listing-card:hover .listing-card__media::before {
    opacity: 0.22;
  }
  .listing-card:hover .art {
    transform: scale(1.05);
  }
  .listing-card:hover .listing-card__title {
    color: var(--accent);
  }
}
.listing-card__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap    : 4px 20px;
  padding-top: 18px;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 18px;
}
.listing-card__title {
  font-family: var(--font-display);
  font-size  : clamp(25px, 2.1vw, 34px);
  font-weight: 300;
  line-height: 1.15;
  transition : color 350ms var(--ease);
}
.listing-card__price {
  align-self: center;
  font-size : 14px;
  font-weight: 400;
  letter-spacing: 0.04em;
}
.listing-card__details {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size     : 10px;
  font-weight   : 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}


/* ───────
✦ PROCESS ✦
──────── */
.process {
  gap: clamp(34px, 5vw, 60px);
}
.process__step {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap    : 4px 14px;
  padding-block: clamp(22px, 2.4vw, 36px);
  border-top: 1px solid var(--hairline);
}
.process__step:last-child {
  border-bottom: 1px solid var(--hairline);
}
.process__num {
  color: var(--accent);
  font-family: var(--font-display);
  font-size  : 20px;
  font-style : italic;
  line-height: 1.5;
}
.process__step h3 {
  font-family: var(--font-display);
  font-size  : clamp(28px, 3vw, 46px);
  font-weight: 300;
  line-height: 1.1;
  transition : transform 500ms var(--ease);
}
.process__step p {
  grid-column: 2;
  max-width: 44ch;
  color: var(--muted);
  font-size: 14px;
}
@media (hover: hover) {
  .process__step:hover h3 {
    transform: translateX(10px);
  }
}


/* ───────
✦ CONTACT ✦
──────── */
.contact {
  position: relative;
  display : grid;
  gap     : clamp(40px, 6vw, 100px);
  overflow: hidden;
  padding : clamp(28px, 5.4vw, 92px);
  border  : 1px solid var(--glass-border);
  border-radius: var(--radius-panel);
  background:
    radial-gradient(70% 90% at 0% 100%, rgba(var(--accent-glow), 0.12), transparent 70%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.008) 100%),
    #040404;
  box-shadow: var(--glass-shadow);
}
.contact__title {
  margin: clamp(16px, 2vw, 28px) 0;
  font-family: var(--font-display);
  font-size  : clamp(58px, 8.4vw, 136px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 0.95;
}
.contact-form {
  display: grid;
  gap    : 26px;
}
.contact-form label {
  display: grid;
  gap    : 2px;
}
.contact-form input,
.contact-form textarea {
  width  : 100%;
  padding: 10px 0;
  border : 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 0;
  color  : var(--text);
  background: transparent;
  font   : inherit;
  font-size: 16px;   /* Prevents iOS zoom on focus */
  resize : vertical;
  transition: border-color 300ms var(--ease);
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-bottom-color: var(--accent);
  outline: none;
}
.contact-form .button {
  justify-self: start;
}
.form-status {
  color: var(--accent);
  font-size: 13px;
}
.form-status:empty {
  display: none;
}


/* ──────
✦ FOOTER ✦
─────── */
.footer .innercontainer {
  container-type: inline-size;   /* Wordmark scales to its container, so it always fits */
}
.footer__mark {
  font-family: var(--font-display);
  font-size  : 19.2cqw;   /* Sized so BLACKBELL spans the footer */
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 0.82;
  text-align : center;
  text-transform: uppercase;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.015));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.footer__row {
  display  : flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap    : 12px 30px;
  margin-top: clamp(22px, 3vw, 44px);
  padding: 22px 0 26px;
  border-top: 1px solid var(--hairline);
  color  : var(--muted);
  font-size: 11px;
  font-weight   : 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap    : 8px 22px;
}


/* ─────────────
✦ PROPERTY PAGE ✦
────────────── */
.price-note {
  max-width: 46ch;
  margin-top: 10px;
  color  : var(--muted);
  font-size  : 12px;
  line-height: 1.5;
}
.listing-grid + .price-note {
  margin-top: clamp(24px, 3vw, 40px);
}
.property__pricing .price-note {
  max-width: 34ch;
}
.pagespace {
  margin-block: clamp(36px, 4.4vw, 70px) max(7.5%, 72px);
}
.property__back {
  justify-self: start;
  margin-bottom: clamp(26px, 3vw, 44px);
}
.property__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 40px;
  margin-bottom: clamp(24px, 3vw, 44px);
}
.property__title {
  margin-top: 12px;
}
#property-type {
  color: var(--accent);
}
.property__price {
  font-family: var(--font-display);
  font-size  : clamp(30px, 3vw, 46px);
  font-variant-numeric: lining-nums;
  font-weight: 300;
  line-height: 1.1;
}
.property__price .label {
  display: inline;
  font-family: var(--font-body);
}
.gallery__stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  max-height: 78svh;
  width: 100%;
  border-radius: var(--radius-image);
  background: var(--panel);
}
.gallery__image {
  display: block;
  width  : 100%;
  height : 100%;
  object-fit: cover;
}
.gallery__arrow {
  position: absolute;
  top     : 50%;
  width   : 48px;
  height  : 48px;
  border  : 1px solid var(--glass-border);
  border-radius: 50%;
  background: var(--glass-fill), rgba(0, 0, 0, 0.5);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  transform: translateY(-50%);
  cursor  : pointer;
  transition: border-color 300ms var(--ease), filter 300ms var(--ease);
}
.gallery__arrow:hover {
  border-color: rgba(255, 255, 255, 0.4);
  filter: brightness(1.35);
}
.gallery__arrow--prev { left: 14px; }
.gallery__arrow--next { right: 14px; }
.gallery__arrow::before,
.calendar__step::before {
  content : "";   /* Hairline chevron */
  position: absolute;
  top     : 50%;
  left    : 50%;
  width   : 9px;
  height  : 9px;
  border-top : 1px solid var(--text);
  border-left: 1px solid var(--text);
}
.gallery__arrow--prev::before,
.calendar__step--prev::before {
  transform: translate(-30%, -50%) rotate(-45deg);
}
.gallery__arrow--next::before,
.calendar__step--next::before {
  transform: translate(-70%, -50%) rotate(135deg);
}
.gallery__count {
  position: absolute;
  right   : 14px;
  bottom  : 14px;
  padding : 6px 12px;
  border  : 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  color   : #fff;
  background: var(--glass-fill), rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap    : clamp(6px, 1vw, 16px);
  margin-top: clamp(6px, 1vw, 16px);
}
.gallery__thumb {
  padding: 0;
  border : 0;
  background: none;
  aspect-ratio: 3 / 2;
  border-radius: 10px;
  opacity: 0.5;
  cursor : pointer;
  transition: opacity 300ms var(--ease), outline-color 300ms var(--ease);
  outline: 1px solid transparent;
  outline-offset: 2px;
}
.gallery__thumb img {
  display: block;
  width  : 100%;
  height : 100%;
  border-radius: 10px;
  object-fit: cover;
}
.gallery__thumb:hover {
  opacity: 0.85;
}
.gallery__thumb[aria-pressed="true"] {
  opacity: 1;
  outline-color: var(--accent);
}
.property__details {
  display: grid;
  gap    : clamp(36px, 5vw, 90px);
  margin-top: clamp(40px, 5.4vw, 90px);
}
.property__description {
  display: grid;
  gap    : 18px;
  max-width : 62ch;
  margin-top: clamp(18px, 2vw, 28px);
  color  : rgba(255, 255, 255, 0.76);
  font-size: 16px;
}
.property__description p:first-child {
  color: var(--text);
  font-family: var(--font-display);
  font-size  : clamp(25px, 2.3vw, 36px);
  font-weight: 300;
  line-height: 1.25;
}
.property__panel {
  align-self: start;
  padding: clamp(22px, 2.6vw, 40px);
  border : 1px solid var(--glass-border);
  border-radius: var(--radius-panel);
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(var(--accent-glow), 0.11), transparent 70%),
    var(--glass-fill),
    var(--panel);
  box-shadow: var(--glass-shadow);
}
.property__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap    : 22px 16px;
  margin-bottom: 28px;
}
.property__specs dd {
  font-family: var(--font-display);
  font-size  : clamp(28px, 2.6vw, 40px);
  font-variant-numeric: lining-nums;
  font-weight: 300;
  line-height: 1.2;
}
.property__book {
  display: flex;
}
#property-missing .property__book {
  justify-self: start;
  margin-top: 28px;
}


/* ─────────────
✦ BOOKINGS PAGE ✦
────────────── */
.bookings {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap    : clamp(36px, 4vw, 64px);
}
#calendar-filter .agenda__dot {
  margin-right: 8px;
}
.calendar__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap    : 16px;
  margin-bottom: 18px;
}
.calendar__month {
  font-family: var(--font-display);
  font-size  : clamp(28px, 3vw, 46px);
  font-variant-numeric: lining-nums;
  font-weight: 300;
  line-height: 1.1;
}
.calendar__nav {
  display: flex;
  align-items: center;
  gap    : 8px;
}
.calendar__step {
  position: relative;
  width   : 38px;
  height  : 38px;
  border  : 1px solid var(--glass-border);
  border-radius: 50%;
  background: var(--glass-fill);
  box-shadow: var(--glass-shadow);
  cursor  : pointer;
  transition: border-color 300ms var(--ease), filter 300ms var(--ease);
}
.calendar__step:hover {
  border-color: rgba(255, 255, 255, 0.4);
  filter: brightness(1.35);
}
.calendar__weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  padding-bottom: 10px;
  color  : var(--muted);
  font-size     : 10px;
  font-weight   : 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.calendar__weekdays span {
  padding-left: 8px;
}
.calendar__weeks {
  overflow: hidden;
  border-top : 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
  border-radius: var(--radius-image);
}
.calendar__week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: 30px repeat(var(--lanes), auto) minmax(10px, 1fr);
  row-gap: 3px;
  min-height: clamp(74px, 8.4vw, 136px);
}
.calendar__day {
  grid-row: 1 / -1;
  padding : 6px 8px;
  border  : 0;
  border-right : 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  color   : var(--text);
  background: none;
  font-family: var(--font-body);
  font-size  : 12px;
  font-weight: 400;
  font-variant-numeric: lining-nums;
  text-align : left;
  vertical-align: top;
  display: flex;
  align-items: flex-start;
  cursor : pointer;
  transition: background-color 200ms var(--ease);
}
.calendar__day:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
}
.calendar__day.is-outside {
  color: rgba(255, 255, 255, 0.28);
}
.calendar__day.is-past {
  color : rgba(255, 255, 255, 0.28);
  cursor: default;
}
.calendar__day.is-today {
  color: var(--accent);
  font-weight: 500;
  box-shadow: inset 0 2px 0 var(--accent);
}
.calendar__day.is-selected {
  background: rgba(var(--accent-glow), 0.22);
}
.calendar__day.is-selected:hover:not(:disabled) {
  background: rgba(var(--accent-glow), 0.32);
}
.calendar__stay {
  min-width: 0;
  height  : 8px;
  overflow: hidden;
  background: var(--stay-color);
  pointer-events: none;   /* Clicks pass through to the day underneath */
}
.calendar__stay span {
  display: none;
}
.calendar__stay.starts-here {
  margin-left: 4px;
}
.calendar__stay.ends-here {
  margin-right: 4px;
}
.calendar__stay.is-requested {
  background: transparent;
  outline: 1px dashed var(--stay-color);
  outline-offset: -1px;
}
.agenda {
  margin-top: clamp(28px, 3vw, 44px);
}
.agenda__list {
  margin-top: 12px;
  border-top: 1px solid var(--hairline);
}
.agenda__item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap    : 2px 12px;
  padding-block: 12px;
  border-bottom: 1px solid var(--hairline);
}
.agenda__dot {
  display: inline-block;
  width  : 8px;
  height : 8px;
  background: var(--stay-color);
}
.agenda__name {
  justify-self: start;
  font-size: 14px;
  font-weight: 400;
}
.agenda__dates {
  grid-column: 2;
  grid-row   : 2;
  color: var(--muted);
  font-size: 13px;
}
.agenda__item .label {
  grid-column: 3;
  grid-row   : 1 / 3;
}
.agenda__empty {
  padding-block: 16px;
  color: var(--muted);
  font-size: 14px;
}
.booking-form {
  align-self: start;
  padding: clamp(22px, 2.6vw, 40px);
  border : 1px solid var(--glass-border);
  border-radius: var(--radius-panel);
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(var(--accent-glow), 0.11), transparent 70%),
    var(--glass-fill),
    var(--panel);
  box-shadow: var(--glass-shadow);
}
.booking-form__hint {
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
}
.booking-form__dates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap    : 16px;
}
.contact-form select {
  width  : 100%;
  padding: 10px 0;
  border : 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 0;
  color  : var(--text);
  background: var(--panel);
  font   : inherit;
  font-size: 16px;
}
.contact-form select:focus {
  border-bottom-color: var(--accent);
  outline: none;
}
.booking-form input,
.booking-form select {
  color-scheme: dark;   /* Dark native date picker */
}
@media (min-width: 750px) {
  .calendar__stay {
    height : auto;
    padding: 2px 8px;
    color  : var(--stay-color);
    background: color-mix(in srgb, var(--stay-color) 20%, #000);
    font-size  : 11px;
    font-weight: 400;
    line-height: 1.5;
    white-space: nowrap;
  }
  .calendar__stay.starts-here {
    border-left: 2px solid var(--stay-color);
  }
  .calendar__stay span {
    display : block;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .calendar__stay.is-requested {
    color: var(--stay-color);
  }
}
@media (min-width: 960px) {
  .property__details {
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  }
}
@media (min-width: 1200px) {
  .bookings {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  }
}


/* ─────────
✦ AI CHAT ✦
Sits at the corner of the 1700px content area, even on ultrawide.
────────── */
.chat {
  --chat-edge: max(14px, calc((100vw - 1700px) / 2 + 14px));
}
.chat__launcher {
  position: fixed;
  right   : var(--chat-edge);
  bottom  : calc(16px + env(safe-area-inset-bottom));
  z-index : 40;
  display : grid;
  place-items: center;
  width   : 54px;
  height  : 54px;
  padding : 0;
  border  : 1px solid rgba(var(--accent-glow), 0.6);
  border-radius: 50%;
  color   : var(--accent);
  background: rgba(4, 22, 27, 0.86);   /* Solid enough to read over any section it floats above */
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor  : pointer;
  transition: border-color 300ms var(--ease), background-color 300ms var(--ease);
}
.chat__launcher svg {
  width : 24px;
  height: 24px;
}
.chat__launcher:hover {
  border-color: var(--accent);
  background: rgba(6, 40, 48, 0.92);
}
.chat__panel {
  position: fixed;
  right   : var(--chat-edge);
  bottom  : calc(84px + env(safe-area-inset-bottom));
  z-index : 40;
  display : flex;
  flex-direction: column;
  overflow: hidden;
  width   : min(390px, 100vw - 28px);
  height  : min(560px, 100svh - 110px);
  border  : 1px solid var(--glass-border);
  border-radius: var(--radius-panel);
  background:
    radial-gradient(90% 40% at 100% 0%, rgba(var(--accent-glow), 0.12), transparent 70%),
    var(--glass-fill),
    rgba(10, 8, 8, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 24px 70px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  animation: rise 350ms var(--ease) both;
}
.chat__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap    : 12px;
  padding: 16px 16px 14px 18px;
  border-bottom: 1px solid var(--hairline);
}
.chat__title {
  font-family: var(--font-display);
  font-size  : 26px;
  font-weight: 300;
  line-height: 1.1;
}
.chat__note {
  margin-top: 6px;
  color  : var(--muted);
  font-size  : 11px;
  line-height: 1.45;
}
.chat__close {
  position: relative;
  flex  : none;
  width : 32px;
  height: 32px;
  padding: 0;
  border : 1px solid var(--glass-border);
  border-radius: 50%;
  background: var(--glass-fill);
  cursor: pointer;
  transition: filter 300ms var(--ease);
}
.chat__close:hover {
  filter: brightness(1.4);
}
.chat__close::before,
.chat__close::after {
  content : "";
  position: absolute;
  top     : 50%;
  left    : 50%;
  width   : 12px;
  height  : 1px;
  background: var(--text);
  transform: translate(-50%, -50%) rotate(45deg);
}
.chat__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.chat__messages {
  flex    : 1;
  display : flex;
  flex-direction: column;
  gap     : 10px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding : 16px;
}
.chat__message {
  max-width: 86%;
  padding  : 9px 13px;
  border-radius: 15px;
  font-size  : 14px;
  font-weight: 400;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.chat__message--assistant,
.chat__message--typing {
  align-self: flex-start;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom-left-radius: 4px;
  background: rgba(255, 255, 255, 0.07);
}
.chat__message--typing {
  color: var(--muted);
}
.chat__message--user {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  border: 1px solid rgba(var(--accent-glow), 0.45);
  color: var(--text);
  background: rgba(var(--accent-glow), 0.14);
}
.chat__notice {
  padding: 10px 14px 0;
  border-top: 1px solid var(--hairline);
  color  : var(--muted);
  font-size  : 11px;
  line-height: 1.5;
}
.chat__notice a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.chat__notice + .chat__form {
  border-top: 0;
}
.chat__form {
  display: flex;
  align-items: center;
  gap    : 8px;
  padding: 12px;
  border-top: 1px solid var(--hairline);
}
.chat__input {
  flex   : 1;
  min-width: 0;
  padding: 10px 14px;
  border : 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  color  : var(--text);
  background: rgba(255, 255, 255, 0.06);
  font-family: var(--font-body);
  font-size  : 16px;   /* Prevents iOS zoom on focus */
  font-weight: 400;
}
.chat__input::placeholder {
  color: var(--muted);
}
.chat__input:focus {
  border-color: var(--accent);
  outline: none;
}
.chat__send:disabled {
  opacity: 0.55;
  cursor : default;
}


/* ─────────────
✦ SECTION FADES ✦
Each section fades in as it scrolls into view. See the reduced motion note below.
────────────── */
.js .section-fade {
  opacity: 0;
  transition: opacity 1600ms var(--fade-ease);
}
.js .section-fade.is-visible {
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .js .section-fade {
    translate: 0 28px;
    transition: opacity 1600ms var(--fade-ease), translate 1600ms var(--fade-ease);
  }
  .js .section-fade.is-visible {
    translate: none;
  }
}


/* ──────────────
✦ SCROLL REVEALS ✦
Only hidden once script.js has confirmed it can reveal them.
─────────────── */
.js .reveal {
  opacity  : 0;
  transform: translateY(26px);
  transition: opacity 1400ms var(--fade-ease) var(--reveal-delay, 0ms), transform 1400ms var(--fade-ease) var(--reveal-delay, 0ms);
}
.js .reveal.is-visible {
  opacity  : 1;
  transform: none;
}


/* ─────────────────
✦ TABLET: 600px AND UP ✦
────────────────── */
@media (min-width: 600px) {
  .listing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .listing-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}


/* ──────────────────
✦ LAPTOP: 960px AND UP ✦
─────────────────── */
@media (min-width: 960px) {
  /* Two column sections */
  .about,
  .process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
  }
  .process {
    align-items: start;
  }
  .process > :first-child {
    position: sticky;
    top: 40px;
  }
  .contact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
  }

  /* Listings: alternating wide and narrow cards */
  .listing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .listing-card:nth-child(4n + 1),
  .listing-card:nth-child(4n) {
    grid-column: span 2;
  }
  .listing-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}


/* ───────────
✦ LEGAL PAGES ✦
Privacy policy and accessibility statement: long text set for easy reading.
──────────── */
.legal {
  max-width: 780px;
  justify-self: center;
  color    : rgba(255, 255, 255, 0.82);
  font-size: 15px;
}
.legal .heading {
  color: var(--text);
}
.legal__meta {
  display: grid;
  gap    : 6px;
  margin : clamp(26px, 3vw, 40px) 0;
  padding: 20px 22px;
  border : 1px solid var(--hairline);
  border-radius: var(--radius-image);
  font-size: 13px;
}
.legal__meta div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
}
.legal__meta dt {
  min-width: 120px;
  color: var(--muted);
}
.legal__toc {
  margin-bottom: clamp(30px, 4vw, 56px);
}
.legal .legal__toc-title {
  margin-bottom: 10px;
  font-family: var(--font-body);
  line-height: 1.7;
  color: var(--muted);
  font-size     : 11px;
  font-weight   : 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.legal__toc ol {
  columns: 2 220px;
  column-gap: 32px;
  padding-left: 1.4em;
  list-style: decimal;
  font-size: 13px;
}
.legal__toc li {
  padding: 2px 0;
}
.legal__section {
  padding-top: clamp(26px, 3vw, 40px);
  border-top : 1px solid var(--hairline);
  margin-top : clamp(26px, 3vw, 40px);
  scroll-margin-top: 24px;
}
.legal h2 {
  margin-bottom: 14px;
  color: var(--text);
  font-family: var(--font-display);
  font-size  : clamp(26px, 2.6vw, 34px);
  font-weight: 400;
  line-height: 1.15;
}
.legal h3 {
  margin: 22px 0 8px;
  color: var(--text);
  font-size  : 15px;
  font-weight: 500;
}
.legal p + p,
.legal ul + p,
.legal p + ul {
  margin-top: 12px;
}
.legal ul {
  display: grid;
  gap    : 4px;
  padding-left: 1.3em;
  list-style: disc;
}
.legal a:not(.button) {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.legal strong {
  color: var(--text);
  font-weight: 500;
}
.legal__address {
  margin-top: 12px;
  font-style: normal;
  line-height: 1.9;
}
.legal__end {
  margin-top: clamp(30px, 4vw, 50px);
  color: var(--muted);
  font-size: 13px;
}
mark.placeholder {
  padding: 0 4px;
  border-radius: 4px;
  color: #000;
  background: #fde68a;   /* Stands out until real details replace it */
}


/* ─────────────
✦ ACCESSIBILITY ✦
The skip link, the settings panel in the menu, and what each setting does.
────────────── */
.skip-link {
  position: fixed;
  top     : 12px;
  left    : 12px;
  z-index : 1000000;
  padding : 12px 18px;
  border-radius: 10px;
  color     : #000;
  background: #fff;
  font-size  : 13px;
  font-weight: 500;
  transform : translateY(-200%);
  transition: transform 250ms var(--ease);
}
.skip-link:focus {
  transform: none;
}
main:focus {
  outline: none;   /* Focus lands here from the skip link; the content itself needs no ring */
}

/* Settings panel, under the menu links */
.a11y {
  margin-top : 28px;
  border-top : 1px solid var(--hairline);
  opacity    : 0;
  translate  : 0 16px;
  transition : opacity 600ms var(--ease), translate 800ms var(--ease);
}
.is-open .a11y {
  opacity  : 1;
  translate: none;
  transition-delay: 720ms;
}
.is-closing .a11y {
  opacity  : 0;
  translate: 0 10px;
}
.a11y__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0 6px;
  list-style: none;
  font-size     : 11px;
  font-weight   : 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
}
.a11y__toggle::-webkit-details-marker {
  display: none;
}
.a11y__toggle::after {
  content: "+";
  font-size  : 18px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1;
  color: var(--accent);
  transition: rotate 300ms var(--ease);
}
.a11y[open] .a11y__toggle::after {
  rotate: 45deg;
}
.a11y__body {
  display: grid;
  gap    : 14px;
  padding: 14px 0 4px;
}
.a11y__sizes {
  display: flex;
  flex-wrap: wrap;
  gap    : 6px;
  margin : 0;
  padding: 0;
  border : 0;
}
.a11y__legend {
  width : 100%;
  margin-bottom: 8px;
  padding: 0;
  color : var(--muted);
  font-size: 12px;
}
.a11y__size {
  position: relative;
  cursor  : pointer;
}
.a11y__size input {
  position: absolute;   /* Hidden visually, but still a real radio button for keyboards and screen readers */
  inset   : 0;
  margin  : 0;
  opacity : 0;
  cursor  : pointer;
}
.a11y__size span {
  display: block;
  padding: 7px 14px;
  border : 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  font-size: 12px;
  transition: border-color 250ms var(--ease), background 250ms var(--ease);
}
.a11y__size input:checked + span {
  border-color: var(--accent);
  background  : rgba(var(--accent-glow), 0.14);
}
.a11y__size input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.a11y__switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap    : 16px;
  cursor : pointer;
}
.a11y__text {
  display: grid;
}
.a11y__name {
  font-size  : 13px;
  font-weight: 400;
}
.a11y__note {
  color    : var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.a11y__switch input {
  appearance: none;
  position: relative;
  flex  : none;
  width : 40px;
  height: 22px;
  margin: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: background 250ms var(--ease), border-color 250ms var(--ease);
}
.a11y__switch input::before {
  content : "";
  position: absolute;
  top     : 3px;
  left    : 3px;
  width   : 14px;
  height  : 14px;
  border-radius: 50%;
  background: var(--text);
  transition: translate 250ms var(--ease);
}
.a11y__switch input:checked {
  border-color: var(--accent);
  background  : #0e7490;
}
.a11y__switch input:checked::before {
  translate: 18px 0;
}
.a11y__reset {
  justify-self: start;
  padding: 0;
  border : 0;
  color  : var(--muted);
  background: none;
  font-family: var(--font-body);
  font-size  : 12px;
  cursor: pointer;
}

/* Text size: scales the page content, while the hero and chat still fit the screen */
.a11y-zoomed :is(main, .footer, .chat) {
  zoom: var(--a11y-zoom);
}
.a11y-zoomed .hero__panel {
  min-height: min((100svh - var(--nav-height) - 24px) / var(--a11y-zoom), 800px);
}
.a11y-zoomed .chat__panel {
  width : min(390px, (100vw - 28px) / var(--a11y-zoom));
  height: min(560px, (100svh - 110px) / var(--a11y-zoom));
}

/* High contrast */
.a11y-contrast {
  --muted       : rgba(255, 255, 255, 0.92);
  --hairline    : rgba(255, 255, 255, 0.42);
  --glass-border: rgba(255, 255, 255, 0.6);
  --hero-grade  : contrast(1.05) brightness(0.38);
}
.a11y-contrast em {
  color: var(--accent);
  background: none;
  -webkit-text-fill-color: currentColor;
}
.a11y-contrast :is(.hero__lead, .body-copy, .chat__message--assistant) {
  color: #fff;
}
.a11y-contrast .button--ghost {
  border-color: #fff;
}
.a11y-contrast :focus-visible {
  outline-width: 3px;
}

/* Underline links */
.a11y-underline a:not(.button, .listing-card__link, .skip-link),
.a11y-underline .listing-card__title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

/* Readable font */
.a11y-readable {
  --font-display: var(--font-body);
}
.a11y-readable body {
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Stop animations */
.a11y-still *,
.a11y-still *::before,
.a11y-still *::after,
.a11y-still .nvmenu-primarycontainer.is-closing * {
  animation-duration : 1ms !important;
  animation-delay    : 0ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
  transition-delay   : 0ms !important;
  scroll-behavior    : auto !important;
}
.a11y-still :is(.reveal, .section-fade) {
  opacity  : 1 !important;
  transform: none !important;
  translate: none !important;
}


/* ──────────────
✦ REDUCED MOTION ✦
─────────────── */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow,
  .hero__title,
  .hero__lead,
  .hero__actions,
  .chat__panel {
    animation-name: fade-in;
  }
  .js .reveal,
  .listing-card:hover .listing-card__media,
  .listing-card:hover .art,
  .process__step:hover h3,
  .button:hover::before {
    transform: none;
  }
  .nvmenu-panel,
  .nvmenu-media img,
  .nvmenu-tab,
  .is-closing .nvmenu-panel,
  .is-closing .nvmenu-tab {
    transform: none;
  }
  .nvmenu-title,
  .nvmenu-note,
  .nvmenu-link,
  .nvmenu-btn,
  .is-closing .nvmenu-title,
  .is-closing .nvmenu-note,
  .is-closing .nvmenu-link,
  .is-closing .nvmenu-btn {
    translate: none;
  }
  .nvmenu-link:hover {
    padding-left: 0;
  }
  .a11y,
  .is-closing .a11y {
    translate: none;
  }
}