/* ==========================================================================
   RM MEDIA CO — shared stylesheet
   Design signature: warm charcoal + cream + brass, pulled from the RM
   monogram's backlit sign. Hover state everywhere = a camera racking
   focus: brass viewfinder brackets snap onto the corners as the subject
   scales up. See ".frame" below.
   ========================================================================== */

/* ---- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, form, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* ---- Design tokens -------------------------------------------------------
   Palette named after the source: the logo is cream/white lettering,
   backlit with a warm halo, on a greige panel. Ink is warmed-black
   (not pure #000), brass stands in for the halo glow.
   -------------------------------------------------------------------------- */
:root {
  --ink:          #0e0c0a;
  --ink-soft:     #17140f;
  --ink-soft-2:   #1e1a14;
  --line:         rgba(243, 238, 228, 0.14);
  --line-soft:    rgba(243, 238, 228, 0.08);
  --paper:        #f3eee4;
  --paper-dim:    #b7ab9a;
  --text-body:    #d4ccbf;   /* paragraph copy — brighter than paper-dim for readability */
  --brass:        #c6a265;
  --brass-bright: #e8cd97;
  --glow-rgb:     232, 205, 151;

  /* Typography matches book.rmmedia.com.au: Geist throughout. */
  --font-sans:    'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);

  --ease:      cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);

  --container: 1280px;
  --space-section: clamp(4.5rem, 9vw, 8.5rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

/* ---- Base ----------------------------------------------------------------*/
body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: clamp(16px, 15px + .2vw, 17px);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--brass); color: var(--ink); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h2 { font-size: clamp(1.85rem, 3.4vw, 2.75rem); }
h3 { font-size: clamp(1.2rem, 1.7vw, 1.45rem); letter-spacing: -0.015em; }

p { color: var(--text-body); font-weight: 400; text-wrap: pretty; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-top: var(--space-section); padding-bottom: var(--space-section); position: relative; }

.eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .74rem;
  color: var(--brass-bright);
  font-weight: 500;
  margin-bottom: 1.2em;
}

.section-head { max-width: 640px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head h2 { color: var(--paper); }
.section-foot { margin-top: clamp(2.5rem, 5vw, 4rem); display: flex; justify-content: center; }

/* film grain — subtle, cinematic, purely atmospheric */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Phones/tablets: the full-screen blended grain layer and the live header blur
   have to be re-composited on every scroll frame, which makes scrolling (and the
   docking logo) stutter on mobile GPUs. Drop them there; desktop keeps both. */
@media (hover: none), (pointer: coarse) {
  body::before { display: none; }
}

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: 1.1em 2.1em;
  font-family: var(--font-sans);
  font-size: .8rem;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 1px;
  transition: transform .5s var(--ease), background-color .4s var(--ease),
              color .4s var(--ease), border-color .4s var(--ease), box-shadow .5s var(--ease);
}
.btn-primary { background: var(--brass); color: var(--ink); }
.btn-primary:hover { background: var(--brass-bright); transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 32px -10px rgba(var(--glow-rgb), .55); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--paper); }
.btn-ghost:hover { border-color: var(--brass); color: var(--brass-bright); transform: translateY(-2px) scale(1.03); }
.btn-block { width: 100%; justify-content: center; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass-bright);
  font-weight: 600;
  transition: gap .4s var(--ease);
}
a:hover .link-arrow, .link-arrow:hover { gap: .85em; }

/* ---- Logo lockup (used in nav, hero mark, footer, login) --------------- */
.logo { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; gap: .3em; }
.logo-mark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--paper);
}
.logo-word {
  font-family: var(--font-sans);
  font-size: .58rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 600;
}

/* ---- Nav ---------------------------------------------------------------*/
/* Everything that changes on scroll animates ONLY transform + opacity (GPU,
   no per-frame layout or blur re-rendering), so the header stays silky smooth:
   - header height is fixed; the top-of-page "airier" look is a translate on .nav-inner
   - the frosted bar is a ::before layer that fades in (blur never animates itself)
   - "RM" grows with transform: scale, "MEDIA CO" fades/slides (absolutely positioned) */
.nav {
  --nav-dur: .6s;
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 500;
  padding-block: .9em;
}
.nav::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: rgba(14, 12, 10, .78);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line-soft);
  opacity: 0;
  transition: opacity var(--nav-dur) var(--ease);
  pointer-events: none;
  will-change: opacity;
}
.nav.is-scrolled::before { opacity: 1; }
@media (hover: none), (pointer: coarse) {
  .nav::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(14, 12, 10, .94); }
}
/* Three columns: menu links (left) · logo (centred) · Book Now (right).
   Equal 1fr side columns keep the logo exactly centred whatever the sides hold. */
.nav-inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem;
  transform: translate3d(0, .5em, 0);            /* sits a little lower at the top of the page */
  transition: transform var(--nav-dur) var(--ease);
  will-change: transform;
}
.nav.is-scrolled .nav-inner { transform: translate3d(0, 0, 0); }
.nav-inner > .nav-links { grid-column: 1; justify-self: start; }
.nav-inner > .logo { grid-column: 2; justify-self: center; align-items: center; }
.nav-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; }  /* pinned: stays right even when the home logo is lifted out of the grid */

/* Logo: "MEDIA CO" hangs under "RM" without taking layout space, so nothing reflows */
.nav .logo {
  position: relative;
  transform: translate3d(0, -.4em, 0);           /* keeps RM + MEDIA CO visually centred at the top */
  transition: transform var(--nav-dur) var(--ease), opacity var(--nav-dur) var(--ease), visibility 0s;
}
.nav .logo-mark { display: block; transform-origin: 50% 50%; transition: transform var(--nav-dur) var(--ease); will-change: transform; }
.nav .logo-word {
  position: absolute; top: 100%; left: 50%; margin-top: .45em; white-space: nowrap;
  transform: translate3d(-50%, 0, 0);
  transition: opacity calc(var(--nav-dur) * .6) var(--ease), transform var(--nav-dur) var(--ease);
}
.nav.is-scrolled .logo { transform: translate3d(0, 0, 0); }
.nav.is-scrolled .logo-mark { transform: scale(1.267); }   /* 1.5rem → ~1.9rem, without re-laying out text */
.nav.is-scrolled .logo-word { opacity: 0; transform: translate3d(-50%, -6px, 0); }
/* Home page "docking" logo: the header logo is styled exactly like the big hero
   mark and js/main.js drives it with scroll — it sits over the hero mark at the top,
   travels up with the page, shrinks, and docks in the header (then stays there).
   It's absolutely positioned so it never affects the header's height, and only
   transform/opacity change per frame. Hidden until the script takes over. */
.nav--home .nav-inner { position: relative; transform: none; transition: none; }
.nav--home .nav-inner > .logo {
  position: absolute; left: 50%; top: 50%; margin: 0;
  gap: .45em; align-items: center; width: max-content;
  opacity: 0; visibility: hidden;
  transition: none;
  will-change: transform, translate, scale;
}
.nav--home .logo-mark { font-size: clamp(2.9rem, 5.2vw, 4rem); transform: none !important; transition: none; will-change: auto; }
.nav--home .logo-word {
  position: static; margin: 0; transform: none !important; transition: none;
  font-size: clamp(.72rem, 1.05vw, .86rem); letter-spacing: .36em; padding-left: .36em;
}
.nav--home.logo-docking .nav-inner > .logo { opacity: 1; visibility: visible; }
.logo-docking-on .hero-mark { visibility: hidden; }   /* the header logo stands in for it */
/* Preferred path: a scroll-driven CSS animation (.dock-sda), run by the browser's
   compositor in lock-step with scrolling — no per-frame JavaScript, so no lag on
   phones. js/main.js only measures once and sets these custom properties:
   --dock-x/--dock-y0 (sitting on the hero mark), --dock-y1 (docked in the header),
   --dock-s1 (docked scale) and --dock-travel (scroll distance of the trip).
   The move is linear with scroll (so it rides exactly with the page); the shrink eases. */
@supports (animation-timeline: scroll()) {
  .nav--home.dock-sda .nav-inner > .logo {
    animation: dock-move linear both, dock-scale linear both;
    animation-timeline: scroll(root), scroll(root);
    animation-range: 0px var(--dock-travel), 0px var(--dock-travel);
  }
  .nav--home.dock-sda .logo-word {
    animation: dock-word linear both;
    animation-timeline: scroll(root);
    animation-range: 0px calc(var(--dock-travel) * .45);
  }
}
@keyframes dock-move { from { translate: var(--dock-x) var(--dock-y0); } to { translate: var(--dock-x) var(--dock-y1); } }
@keyframes dock-scale { from { scale: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); } to { scale: var(--dock-s1); } }
@keyframes dock-word { from { opacity: 1; } to { opacity: 0; } }
.menu-open .nav--home .nav-inner > .logo { opacity: 0; visibility: hidden; } /* don't float over the mobile menu */

/* Scrolled: menu links + Book Now dim until the header is hovered/focused */
.nav-links, .nav-actions { transition: opacity var(--nav-dur) var(--ease); }
.nav.is-scrolled .nav-links, .nav.is-scrolled .nav-actions { opacity: .45; }
.nav.is-scrolled:hover .nav-links, .nav.is-scrolled:hover .nav-actions,
.nav.is-scrolled:focus-within .nav-links, .nav.is-scrolled:focus-within .nav-actions { opacity: 1; }
/* Touch screens can't hover, so keep the menu icon + Book Now at full strength there */
@media (hover: none) {
  .nav.is-scrolled .nav-links, .nav.is-scrolled .nav-actions { opacity: 1; }
}
.nav-links { display: flex; align-items: center; gap: clamp(1.4rem, 3vw, 2.6rem); }
.nav-links a {
  position: relative;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
  padding-block: .4em;
}
.nav-links a::after {
  content: "";
  position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--brass);
  transition: right .45s var(--ease);
}
.nav-links a:hover::after, .nav-links a.is-active::after { right: 0; }
.nav-links a.is-active { color: var(--brass-bright); }
/* Primary call to action in the header + mobile menu — same treatment as .btn-primary */
.nav-actions a.nav-book, .mobile-menu a.nav-book {
  background: var(--brass);
  color: var(--ink);
  border: 1px solid var(--brass);
  padding: .7em 1.4em;
  border-radius: 1px;
  font-family: var(--font-sans);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  transition: background-color .4s var(--ease), border-color .4s var(--ease),
              transform .5s var(--ease), box-shadow .5s var(--ease);
}
.nav-actions a.nav-book:hover, .nav-actions a.nav-book:focus-visible,
.mobile-menu a.nav-book:hover, .mobile-menu a.nav-book:focus-visible {
  background: var(--brass-bright);
  border-color: var(--brass-bright);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 14px 32px -10px rgba(var(--glow-rgb), .55);
}
.nav-book::after { display: none; }
.nav-book { white-space: nowrap; }

.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 34px; height: 34px; }
.nav-toggle span { display: block; width: 100%; height: 1px; background: var(--paper); transition: transform .4s var(--ease), opacity .4s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 480;
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(-16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s linear .5s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.mobile-menu nav { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.mobile-menu a { font-family: var(--font-display); font-weight: 500; letter-spacing: -.02em; font-size: clamp(1.6rem, 6vw, 2.2rem); }
.mobile-menu a.nav-book { font-size: .8rem; padding: 1em 2.2em; margin-top: 1rem; }

/* ---- Reveal-on-scroll ----------------------------------------------------*/
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--delay, 0s); }
.reveal.in { opacity: 1; transform: none; }

/* ---- Frame / viewfinder signature -----------------------------------------
   Applied to any media container. On hover (or keyboard focus), brass
   corner brackets snap in — like a camera acquiring focus on its subject.
   ---------------------------------------------------------------------------*/
.frame { position: relative; isolation: isolate; }
.frame::after {
  content: "";
  position: absolute;
  inset: 12px;
  pointer-events: none;
  z-index: 2;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--brass-bright), var(--brass-bright)), linear-gradient(var(--brass-bright), var(--brass-bright)),
    linear-gradient(var(--brass-bright), var(--brass-bright)), linear-gradient(var(--brass-bright), var(--brass-bright)),
    linear-gradient(var(--brass-bright), var(--brass-bright)), linear-gradient(var(--brass-bright), var(--brass-bright)),
    linear-gradient(var(--brass-bright), var(--brass-bright)), linear-gradient(var(--brass-bright), var(--brass-bright));
  background-size: 20px 2px, 2px 20px, 20px 2px, 2px 20px, 20px 2px, 2px 20px, 20px 2px, 2px 20px;
  background-position: top left, top left, top right, top right, bottom right, bottom right, bottom left, bottom left;
  opacity: 0;
  transform: scale(.9);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.frame:hover::after, .frame:focus-within::after { opacity: 1; transform: scale(1); }
.frame--tight::after { inset: 8px; }

/* ---- Hero ----------------------------------------------------------------*/
.hero { position: relative; height: 100svh; min-height: 560px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  animation: kenburns 24s ease-in-out infinite alternate;
}
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(14,12,10,.92) 0%, rgba(14,12,10,.35) 42%, rgba(14,12,10,.55) 100%),
    linear-gradient(to right, rgba(14,12,10,.35), rgba(14,12,10,0) 35%, rgba(14,12,10,0) 65%, rgba(14,12,10,.35));
}
@keyframes kenburns {
  0%   { transform: scale(1) translate3d(0,0,0); }
  100% { transform: scale(1.13) translate3d(-1.5%, -1%, 0); }
}
/* --hero-lift raises the whole block (logo → description) above true centre so
   the headline lands near the middle of the screen. Uses `translate`, not
   `transform`, so it doesn't fight the .reveal animations on the children. */
.hero-content {
  --hero-lift: clamp(40px, 8vh, 80px);
  position: relative; z-index: 1; text-align: center; padding-inline: var(--gutter);
  display: flex; flex-direction: column; align-items: center;
  translate: 0 calc(-1 * var(--hero-lift));
}
.hero-mark { margin-bottom: clamp(1.6rem, 2.6vw, 2.2rem); align-items: center; gap: .45em; }
.hero-mark .logo-mark { font-size: clamp(2.9rem, 5.2vw, 4rem); }
.hero-mark .logo-word { font-size: clamp(.72rem, 1.05vw, .86rem); letter-spacing: .36em; padding-left: .36em; /* balance trailing tracking so it centres */ }
.hero-content .eyebrow { text-align: center; }
.hero-title { color: var(--paper); font-size: clamp(2.3rem, 5.6vw, 4.6rem); line-height: 1.05; letter-spacing: -.035em; max-width: 22ch; }
.hero-title .line { display: block; overflow: hidden; }
.hero-sub {
  max-width: 46ch; margin-top: 1.5rem; font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.6;
  color: #d3cabb; /* fallback */
  color: color-mix(in srgb, var(--paper) 55%, var(--paper-dim)); /* a step brighter than body copy over the photo */
}

/* Centred with `translate` — .reveal's `transform` would otherwise override it. */
.scroll-cue {
  position: absolute; left: 50%; bottom: clamp(1.6rem, 4vw, 2.6rem); translate: -50% 0;
  z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: .7em;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--paper-dim);
  transition: color .4s var(--ease);
}
/* Always on screen at load, so it fades in on a timer rather than via .reveal
   (whose scroll trigger can miss an element pinned this close to the fold). */
.scroll-cue { animation: cue-in .9s var(--ease) .6s both; }
@keyframes cue-in { from { opacity: 0; } to { opacity: 1; } }
.scroll-cue:hover { color: var(--brass-bright); }
.scroll-cue-line { width: 1px; height: 34px; background: linear-gradient(to bottom, var(--brass-bright), transparent); position: relative; overflow: hidden; }
.scroll-cue-line::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background: var(--brass-bright);
  transform: translate3d(0, -100%, 0);
  animation: drip 2.2s var(--ease) infinite;   /* transform, not top: no layout every frame */
  will-change: transform;
}
@keyframes drip { 0% { transform: translate3d(0, -100%, 0); } 60%, 100% { transform: translate3d(0, 100%, 0); } }

/* ---- Intro / statement ----------------------------------------------------*/
.intro-inner { text-align: center; }
.statement {
  font-family: var(--font-display);
  font-style: italic;   /* true Geist italic (loaded via the ital axis in the Google Fonts link) */
  font-weight: 400;
  color: var(--paper);
  font-size: clamp(1.35rem, 2.6vw, 2.05rem);
  line-height: 1.45;
  letter-spacing: -.015em;
  text-wrap: balance;
  max-width: 860px;
  margin-inline: auto;
}

/* ---- Services teaser ------------------------------------------------------*/
.services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 1.75rem); }
.service-card { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 2px; display: block; }
/* All four service thumbnails get the same dimmed treatment so they read as one set
   and the words stay bright on top; hovering lifts the image a little. */
.service-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.52) saturate(.85);
  transition: transform .9s var(--ease), filter .6s var(--ease);
}
.service-card:hover img, .service-card:focus-visible img { transform: scale(1.08); filter: brightness(.68) saturate(1); }
.service-card--plan img { background: #fff; object-position: 50% 80%; }   /* drawings on white; crop off the address strip at the top */
.service-card-body {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  background: linear-gradient(to top, rgba(14,12,10,.8) 0%, rgba(14,12,10,.3) 55%, rgba(14,12,10,0) 100%);
  text-shadow: 0 1px 14px rgba(0,0,0,.45);
}
.service-card-body h3 { color: #fffaf1; margin-bottom: .5rem; }
.service-card-body p { max-width: 36ch; margin-bottom: 1.3rem; font-size: .98rem; line-height: 1.6; color: #f1eadf; }

/* ---- Gallery grid (teaser + full pages) -----------------------------------*/
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.2vw, 1.5rem); }
.gallery-item { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 2px; display: block; }
.gallery-item.featured { grid-column: span 2; }
.gallery-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.gallery-item:hover img, .gallery-item:focus-visible img { transform: scale(1.08); }
.gallery-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: clamp(1rem, 2.4vw, 1.6rem);
  background: linear-gradient(to top, rgba(14,12,10,.94), rgba(14,12,10,0) 85%);
  transform: translateY(10px);
  opacity: .82;
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.gallery-item:hover .gallery-caption, .gallery-item:focus-visible .gallery-caption { transform: translateY(0); opacity: 1; }
.gallery-cat { display: block; font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-bright); margin-bottom: .4em; }
.gallery-title { font-family: var(--font-display); font-weight: 600; letter-spacing: -.015em; font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--paper); }

.page-hero { padding-top: clamp(9rem, 16vw, 12rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.page-hero .eyebrow { }
.page-hero h1 { color: var(--paper); font-size: clamp(2.1rem, 4.6vw, 3.5rem); letter-spacing: -.03em; line-height: 1.08; max-width: 20ch; }
.page-hero p { max-width: 56ch; margin-top: 1.4rem; font-size: clamp(1.05rem, 1.5vw, 1.15rem); }

/* ---- Masonry gallery — wide, dense, no forced pattern --------------------- */
.container--wide { max-width: 2400px; margin-inline: auto; padding-inline: clamp(.75rem, 2vw, 1.5rem); }
.gallery--masonry { display: block; column-count: 7; column-gap: clamp(.6rem, 1vw, 1rem); }
.gallery--masonry .gallery-item {
  aspect-ratio: auto; margin-bottom: clamp(.6rem, 1vw, 1rem); break-inside: avoid;
  box-shadow: 0 16px 36px -20px rgba(0,0,0,.5);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.gallery--masonry .gallery-item img { position: static; width: 100%; height: auto; }
.gallery--masonry .gallery-item:hover { box-shadow: 0 22px 46px -18px rgba(0,0,0,.55); transform: scale(1.025); }
.gallery--masonry .gallery-item.full { column-span: all; margin-bottom: clamp(1.4rem, 2.6vw, 2rem); }
@media (max-width: 1800px) { .gallery--masonry { column-count: 6; } }
@media (max-width: 1400px) { .gallery--masonry { column-count: 5; } }
@media (max-width: 1100px) { .gallery--masonry { column-count: 4; } }
@media (max-width: 800px)  { .gallery--masonry { column-count: 3; } }
@media (max-width: 560px)  { .gallery--masonry { column-count: 2; } }
@media (prefers-reduced-motion: reduce) { .gallery--masonry .gallery-item { transform: none !important; } }

/* ---- Client logos: three stacked scrolling rows -----------------------------
   Each row's track holds two identical groups; the animation slides the track
   by exactly one group (-50%), so the loop is seamless. Rows 1 and 3 travel
   left, row 2 travels right. js/main.js sets each row's duration from its real
   width so every row moves at the same speed whatever the logo widths are;
   the 190s here is the no-JS fallback. ---------------------------------------*/
.marquee-stack {
  --logo-h: clamp(32px, 4.5vw, 50px);   /* logo height; row height follows it */
  display: flex; flex-direction: column;
  gap: clamp(.25rem, 1vw, .75rem);
  border-block: 1px solid var(--line-soft);
  padding-block: clamp(.9rem, 2vw, 1.5rem);
}
.marquee { overflow: hidden; padding-block: calc(var(--logo-h) * .3); }
.marquee-track {
  display: flex; align-items: center; width: max-content;
  height: var(--logo-h);
  animation: marquee var(--marquee-duration, 190s) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
.marquee--reverse .marquee-track { animation-direction: reverse; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; align-items: center; flex-shrink: 0; }
.marquee-group img {
  height: var(--logo-h);
  width: auto; max-width: none;   /* height-driven, so each logo keeps its own proportions */
  flex-shrink: 0;
  filter: brightness(0) invert(1);
  opacity: .5;
  margin-inline: clamp(2.2rem, 4.4vw, 3.75rem);
  transition: opacity .4s var(--ease);
}
.marquee-group img:hover { opacity: .95; }
@keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* ---- CTA band --------------------------------------------------------------*/
.cta-band { text-align: center; }
.cta-inner { max-width: 720px; margin-inline: auto; }
.cta-inner h2 { color: var(--paper); margin-bottom: 1rem; }
.cta-inner > p:not(.eyebrow) { margin-bottom: 2.2rem; font-size: 1.05rem; }

/* Click-to-email / click-to-call cards in the contact section */
/* One row of 4 on desktop (≥1100px) · 2×2 on tablets · stacked on phones (≤620px) */
.contact-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.9rem, 1.6vw, 1.25rem); margin: 0 auto; max-width: 1280px; text-align: left; }
.cta-inner:has(.contact-cards) { max-width: 1280px; }
.contact-card {
  display: flex; flex-direction: column; gap: .35rem;
  padding: clamp(1.3rem, 2.2vw, 1.6rem);
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: border-color .4s var(--ease), background-color .4s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.contact-card:hover, .contact-card:focus-visible {
  border-color: var(--brass); background: var(--ink-soft-2);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -22px rgba(var(--glow-rgb), .45);
}
.contact-icon { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; margin-bottom: .6rem; border: 1px solid var(--line); border-radius: 50%; color: var(--brass-bright); transition: border-color .4s var(--ease); }
.contact-card:hover .contact-icon { border-color: var(--brass); }
.contact-icon svg { width: 1.15rem; height: 1.15rem; }
.contact-label { font-size: .74rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-dim); }
.contact-value { font-size: clamp(1rem, 1.25vw, 1.2rem); font-weight: 600; letter-spacing: -.015em; color: var(--paper); overflow-wrap: anywhere; }
.cta-inner > p, .cta-inner > h2 { max-width: 720px; margin-inline: auto; }
.contact-hint { margin-top: .5rem; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--brass-bright); }
/* "Click" on mouse/trackpad devices, "Tap" on touch screens */
.hint-tap { display: none; }
@media (hover: none), (pointer: coarse) {
  .hint-click { display: none; }
  .hint-tap { display: inline; }
}

/* ---- Lightbox ---------------------------------------------------------------*/
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1.5rem, 5vw, 4rem);
  background: rgba(14, 12, 10, .93);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease), visibility 0s linear .45s;
}
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }
.lightbox-figure { position: relative; max-width: min(1100px, 92vw); max-height: 84vh; }
.lightbox-figure img { max-height: 84vh; width: auto; max-width: 100%; object-fit: contain; margin-inline: auto; border-radius: 2px; }
.lightbox-caption { text-align: center; margin-top: 1.2rem; }
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute; display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%;
  color: var(--paper); background: rgba(14, 12, 10, .55);
  transition: border-color .4s var(--ease), color .4s var(--ease), scale .4s var(--ease);
}
/* Buttons sit against the viewport edges (the .lightbox itself is the
   positioning context). Hover uses `scale` rather than `transform` so it
   doesn't clobber the prev/next vertical-centring translate. */
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { border-color: var(--brass); color: var(--brass-bright); scale: 1.08; }
.lightbox-close { top: clamp(.75rem, 2.5vw, 1.75rem); right: clamp(.75rem, 2.5vw, 1.75rem); }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: clamp(.5rem, 2vw, 1.75rem); }
.lightbox-next { right: clamp(.5rem, 2vw, 1.75rem); }

/* ---- Login -------------------------------------------------------------------*/
.login-main { min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: clamp(7rem, 12vw, 9rem) var(--gutter) 4rem; }
.login-card { width: 100%; max-width: 440px; text-align: center; }
.login-mark { align-items: center; margin-bottom: 1.8rem; }
.login-card .eyebrow { text-align: center; }
.login-card h1 { color: var(--paper); font-size: clamp(1.8rem, 4vw, 2.3rem); }
.login-sub { margin-top: .9rem; margin-bottom: 2.4rem; font-size: 1rem; }
.login-card form { text-align: left; display: flex; flex-direction: column; gap: 1.2rem; }
.field { display: flex; flex-direction: column; gap: .55em; }
.field span { font-size: .74rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-dim); }
.field input {
  width: 100%;
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 1px;
  padding: .95em 1em;
  color: var(--paper);
  transition: border-color .4s var(--ease), background-color .4s var(--ease);
}
.field input:focus-visible { outline: none; border-color: var(--brass); background: var(--ink-soft-2); }
.field input::placeholder { color: var(--paper-dim); opacity: .5; }
.login-card form > .btn { margin-top: .4rem; }
.login-note { font-size: .84rem; color: var(--brass-bright); min-height: 1.4em; text-align: center; }
.login-forgot { display: block; margin-top: 1.4rem; font-size: .82rem; color: var(--paper-dim); border-bottom: 1px solid transparent; transition: color .4s var(--ease), border-color .4s var(--ease); }
.login-forgot:hover { color: var(--brass-bright); border-color: var(--brass-bright); }
.login-footnote { margin-top: 2rem; font-size: .8rem; color: var(--paper-dim); opacity: .7; }
.login-back { position: fixed; top: 1.6rem; left: var(--gutter); z-index: 20; font-size: .78rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; display: inline-flex; align-items: center; gap: .6em; color: var(--paper-dim); transition: color .4s var(--ease); }
.login-back:hover { color: var(--brass-bright); }

/* ---- Footer --------------------------------------------------------------------*/
.site-footer { border-top: 1px solid var(--line-soft); padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem; }
.footer-top { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 4.5rem); border-bottom: 1px solid var(--line-soft); }
.footer-brand p { margin-top: 1rem; max-width: 32ch; font-size: .95rem; }
.footer-cta h3 { color: var(--paper); margin-bottom: .8rem; font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
.footer-cta p { margin-bottom: 1.6rem; max-width: 40ch; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: clamp(1.8rem, 4vw, 2.4rem); }
.footer-nav { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.footer-nav a { font-size: .78rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--paper-dim); transition: color .4s var(--ease); }
.footer-nav a:hover { color: var(--brass-bright); }
.footer-social { display: flex; gap: 1rem; }
.footer-social a {
  width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--paper-dim);
  transition: border-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.footer-social a:hover { border-color: var(--brass); color: var(--brass-bright); transform: translateY(-3px) scale(1.06); }
.footer-social svg { width: 16px; height: 16px; }
.footer-legal { margin-top: 1.8rem; font-size: .8rem; color: var(--paper-dim); opacity: .75; text-align: center; }

/* ---- Custom cursor -----------------------------------------------------------------
   Small hollow ring that replaces the pointer on mouse/trackpad devices only (js/main.js
   adds .has-custom-cursor). Moving fast swells it for a moment so you can find it;
   hovering a link/button grows it slightly. `difference` blending keeps it visible
   on both the dark background and light photos. Text fields keep the normal I-beam. */
.has-custom-cursor, .has-custom-cursor * { cursor: none !important; }
.has-custom-cursor input, .has-custom-cursor textarea { cursor: text !important; }
.cursor-dot {
  position: fixed; left: 0; top: 0; z-index: 2000;
  width: 18px; height: 18px;     /* base size; js/main.js resizes it (not scale) so the ring stays thin */
  border-radius: 50%;
  border: 1.5px solid var(--paper);
  background: transparent;
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s var(--ease);
  will-change: transform;
}
.cursor-dot.is-visible { opacity: 1; }

/* ---- Accessibility ---------------------------------------------------------------*/
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--brass-bright);
  outline-offset: 3px;
  border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
  .marquee { overflow-x: auto; scrollbar-width: none; }
  .marquee::-webkit-scrollbar { display: none; }
}

/* ---- Responsive ------------------------------------------------------------------*/
@media (max-width: 900px) {
  .nav-links { position: static; }
  .nav-links > a { display: none; }  /* phones/tablets: menu icon left · logo centre · Book Now right */
  .nav-inner { gap: 1rem; }
  .nav-actions a.nav-book { font-size: .74rem; letter-spacing: .08em; padding: .7em 1.15em; }
  .nav-toggle { display: flex; }
  .services-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .lightbox-prev, .lightbox-next { width: 38px; height: 38px; }
}
@media (max-width: 380px) {
  .nav-actions a.nav-book { font-size: .68rem; letter-spacing: .05em; padding: .65em .85em; }
}
@media (max-width: 1099px) {
  .contact-cards { grid-template-columns: repeat(2, 1fr); max-width: 860px; }
  .contact-value { font-size: clamp(1.05rem, 1.8vw, 1.25rem); }
}
@media (max-width: 620px) {
  .contact-cards { grid-template-columns: 1fr; max-width: 520px; }
  .hero-content { --hero-lift: clamp(16px, 4.5vh, 40px); } /* smaller lift: less room under the nav */
  .gallery { grid-template-columns: 1fr; }
  .gallery-item.featured { grid-column: span 1; }

  .footer-bottom { flex-direction: column; align-items: flex-start; }
}