/* ──────────────────────────────────────────────────────────────
   Casaley Officer — Website styles

   Structural clone of the Alba Parkdale stylesheet: same selectors in the
   same order, same geometry, same motion curves and durations. Colour,
   type and texture are the only things that change.
   ────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--casaley-pink-light); color: var(--fg1); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }

/* === Page chrome ============================================== */
/* --header-h: single source of truth for the header bar's height — the hero
   fold's own in-flow topbar and the fixed sticky header both read it, so
   they always match exactly. It's 3x --hero-edge, the "top margin" the
   topbar occupies. JS that needs this in px (PinkSection's sticky-image
   offset) measures the rendered .casaley-header element directly rather
   than duplicating the formula, since it's fluid, not a flat constant. */
.casaley-page { position: relative; min-height: 100vh; --hero-edge: clamp(28px, 3vw, 48px); --header-h: calc(var(--hero-edge) * 3); }

/* === Header =================================================== */
.casaley-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  /* Same inset as the hero fold's own topbar, so the mark and nav land in
     exactly the spot they occupy at rest and the handoff reads seamless. */
  padding: 0 var(--hero-edge);
  background: var(--casaley-royal-blue);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-soft),
              transform var(--dur-base) var(--ease-soft);
}
.casaley-header.is-revealed { opacity: 1; transform: translateY(0); pointer-events: auto; }

.casaley-header__mark { display: flex; align-items: center; }
.casaley-header__wordmark { height: 42.5px; width: auto; display: block; } /* 34px + 25% */
/* 60% bigger on desktop, where the taller topbar/header has the room for it;
   mobile keeps the size above, tuned against the 980px-and-under bar. */
@media (min-width: 981px) {
  .casaley-header__wordmark { height: 68px; } /* 42.5px + 60% */
}

.casaley-header__nav {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(10px, 1.2vw, 16px);
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(242,226,221,0.85);
}
.casaley-header__nav a { transition: color var(--dur-fast) var(--ease-out); }
.casaley-header__nav a:hover { color: var(--casaley-pink-light); }
.casaley-header__nav span { opacity: 0.5; }

/* Hidden until the nav gives way to it on narrow screens, where it takes the
   left of the bar and the wordmark keeps the right. */
.casaley-header__burger {
  display: none;
  width: 22px; height: 16px; padding: 0;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; justify-content: space-between;
}
.casaley-header__burger span {
  display: block; width: 100%; height: 2px;
  background: var(--casaley-pink-light); border-radius: 1px;
  transition: transform var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.casaley-header__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.casaley-header__burger.is-open span:nth-child(2) { opacity: 0; }
.casaley-header__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* === Hero — the "Opportunity Unearthed" fold =================== */
/* A normal-flow fold on the royal-blue field: a framed streetscape with the
   eyebrow + lede over it, the CASALEY keyline straddling the image's lower
   edge, and the Opportunity Unearthed intro on the blue below. */
.casaley-hero {
  position: relative;
  background: var(--casaley-royal-blue);
  color: var(--casaley-pink-light);
  /* No top padding: the topbar below is a normal-flow element that fills
     that role itself. Equal inset on the sides around the framed image.
     Bottom padding = stage's 10vw reserve + .casaley-hero__intro's own
     margin-top clamp() — the exact same two terms that make up the gap from
     the image's bottom to the intro block's top — so the intro block sits
     centred between the bottom of the image and the top of the pink
     section at any viewport width. */
  padding: 0 var(--hero-edge) calc(10vw + clamp(26px, 3.5vw, 58px));
  overflow: hidden;
}
.casaley-mobile-br { display: none; }

/* In-flow bar filling the fold's top margin: the mark/nav/burger classes
   are shared verbatim with .casaley-header (below) so the two are pixel
   identical, and the fixed header simply takes over the same visual slot
   the instant this one scrolls out of view. */
.casaley-hero__topbar {
  position: relative; z-index: 2;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  /* No horizontal padding of its own here: .casaley-hero's own side padding
     already insets it by --hero-edge, matching the frame below exactly. An
     own padding on top of that would double the inset (mobile needs one
     explicitly, since .casaley-hero's own side padding drops to 0 there —
     see the 980px override below). */
}

/* Brand pattern, uniform outlined line-work. Solid blue from the top through
   just below the image, then fading in so the pattern reads under the
   Opportunity Unearthed section. */
.casaley-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  /* Tile is the pattern's true atomic repeat unit (native 54.0326 x
     59.7014, straight from the source file's own <pattern> definition),
     scaled ~3.48x here (4.1x minus 15%) — both axes by the same factor,
     so the aspect ratio stays exact and every repeat join lines up. */
  background: var(--pattern-tile) 0 0 / 188.3px 208.05px repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 50%, #000 70%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, transparent 50%, #000 70%, #000 100%);
  pointer-events: none;
}

/* Stage reserves room below the frame for the lower half of the straddling
   wordmark, which is raised slightly so more of it sits over the image. */
.casaley-hero__stage { position: relative; z-index: 1; padding-bottom: 10vw; }

.casaley-hero__frame {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.casaley-hero__frame img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 64%;
  display: block;
}
.casaley-hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.08) 30%,
    rgba(0,0,0,0) 50%, rgba(0,0,0,0.32) 80%, rgba(0,0,0,0.62) 100%);
}

.casaley-hero__over {
  position: absolute; z-index: 2;
  top: clamp(20px, 2.4vw, 36px);
  left: clamp(20px, 2.4vw, 36px);
  right: clamp(20px, 2.4vw, 36px);
  display: flex; flex-direction: column; gap: clamp(20px, 2.6vw, 38px);
}
/* Pinned to the overlay's top-right. 9px is 2px under the topbar nav's 11px. */
.casaley-hero__disclaimer {
  position: absolute; top: 0; right: 0;
  font-family: var(--font-sans);
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  pointer-events: none;
}
.casaley-hero__lede {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 3.6vw, 50px);
  line-height: 1.15;
  letter-spacing: var(--track-tight);
  margin: 0; max-width: 640px;
  color: #fff;
}

/* Full-bleed keyline straddling the frame's lower edge. Vertically centred
   on the frame bottom by the stage's reserved padding. */
.casaley-hero__wordmark {
  position: absolute; z-index: 3;
  left: 50%; bottom: 3vw;
  /* The artwork's outer strokes already sit flush with its own file edges
     (no internal padding), so 100vw lands them exactly on the screen edges
     with no overscan needed. --wm-parallax is scroll-driven drift.
     max-width:none defeats any host `img{max-width:100%}` (e.g. the artifact
     runtime), which would otherwise cap this to its container width. */
  transform: translateX(-50%) translateY(var(--wm-parallax, 0px));
  width: 100vw; max-width: none; height: auto;
  pointer-events: none;
  will-change: transform;
}

.casaley-hero__intro {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 72px);
  align-items: start;
  margin-top: clamp(26px, 3.5vw, 58px);
}
.casaley-hero__intro-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(40px, 5.4vw, 82px);
  line-height: 0.98; letter-spacing: 0.005em;
  /* Host Grotesk's cap-height sits a little below the line box at this
     weight/size; nudge up so the glyph top lines up with the lead copy's. */
  margin: -0.05em 0 0;
  color: var(--casaley-pink);
}
.casaley-hero__intro-body { display: flex; flex-direction: column; max-width: none; padding-right: clamp(16px, 3vw, 48px); }
.casaley-hero__intro-lead {
  font-family: var(--font-sans); font-weight: 700;
  font-size: clamp(16px, 1.15vw, 18px); line-height: 1.4;
  margin: 0 0 14px; color: #fff;
}
.casaley-hero__intro-copy {
  font-family: var(--font-sans); font-weight: 400;
  font-size: clamp(15px, 1.05vw, 17px); line-height: 1.55;
  margin: 0; color: #fff;
}
.casaley-hero__intro-cta {
  align-self: flex-start;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: clamp(16px, 2vw, 26px);
  padding: 16px 48px;
  background: var(--casaley-velvet); color: var(--casaley-pink-light);
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.casaley-hero__intro-cta:hover { background: var(--casaley-velvet-deep); }

/* === Register form ============================================ */
/* The tab is the only way in — always visible (the panel no longer opens on
   its own), spicy orange, and prominent. */
.casaley-rf__tab {
  /* Centred (via translateY(-50%) below) between the top of the frame and the
     top of the big CASALEY keyline straddling its lower edge.
     Frame top = --header-h. Keyline top = frame top + frame height + 7vw
     (stage's 10vw bottom reserve less the keyline's own 3vw bottom offset)
     minus the keyline's own rendered height (29.594vw tall at its 100vw
     width, from the asset's 117.522 x 34.7798 intrinsic size). Averaging
     the two and simplifying leaves frame-top + half the frame height (the
     same term .casaley-rf's own top uses below) minus 11.297vw. */
  position: fixed;
  top: calc(var(--header-h) + (100vw - 2 * var(--hero-edge)) * 0.28125 - 11.297vw);
  right: 0; transform: translateY(-50%);
  z-index: 45;
  /* Same width as the hero's own side margin, so it sits flush in that
     margin instead of overlapping the framed image. */
  width: var(--hero-edge); height: 310px;
  background: var(--casaley-orange);
  color: #fff;
  border: 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  gap: 16px;
  box-shadow: -8px 0 26px -12px rgba(0,0,0,0.35);
  /* Reappears only after the panel has slid away (delay), so the panel — now
     more translucent — never reveals the tab through itself while closing. */
  transition: transform 460ms var(--ease-soft) 640ms,
              background-color var(--dur-fast) var(--ease-out);
}
.casaley-rf__tab svg { stroke: currentColor; }
.casaley-rf__tab span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 12px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase;
}
.casaley-rf__tab:hover { background: var(--casaley-orange-deep); }
/* When opening, hide the tab immediately (no delay) before the panel covers it. */
.casaley-rf__tab.is-hidden { transform: translate(80px, -50%); pointer-events: none; transition: transform 240ms var(--ease-soft) 0ms; }

/* A content-sized sheet over the image's upper-right, revealing flush with the
   screen's right edge (overlaying the image and the blue margin beside it),
   with a diagonal feather — solid spicy orange at the top-left fading toward
   the bottom-right so the keyline and pattern read through the lower edge.
   Everything inside is sized in em off a viewport-driven font-size, so the
   whole panel scales down on smaller windows and never scrolls internally. */
.casaley-rf {
  /* Vertically centred on the framed image (image centre = topbar height,
     i.e. the frame's own top offset now, + half the 16:9 image height). */
  position: fixed;
  top: calc(var(--header-h) + (100vw - 2 * var(--hero-edge)) * 0.28125);
  right: 0;
  z-index: 50;
  width: min(480px, 92vw);
  height: auto;
  max-height: calc(100dvh - 2 * var(--hero-edge));
  font-size: clamp(10px, 0.45vw + 0.85vh, 14px);
  background: linear-gradient(135deg,
    rgba(223, 90, 58, 0.96) 0%, rgba(223, 90, 58, 0.91) 52%, rgba(223, 90, 58, 0.86) 100%);
  color: var(--casaley-pink-light);
  transform: translate(calc(100% + 20px), -50%);
  box-shadow: -10px 0 40px -16px rgba(0,0,0,0);
  transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 800ms cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
}
.casaley-rf.is-open { transform: translate(0, -50%); box-shadow: -10px 0 40px -16px rgba(0,0,0,0.4); }
.casaley-rf__inner { padding: 1.86em 2.43em 2.29em; min-height: 0; display: flex; flex-direction: column; gap: 1.29em; }

.casaley-rf__head { display: flex; align-items: center; justify-content: space-between; }
.casaley-rf__close {
  width: 2.29em; height: 2.29em; border-radius: 50%;
  background: transparent; border: 1px solid rgba(242,226,221,0.4);
  color: var(--casaley-pink-light); cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex: none;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.casaley-rf__close svg { width: 1.14em; height: 1.14em; }
.casaley-rf__close:hover { background: rgba(242,226,221,0.12); border-color: rgba(242,226,221,0.7); }

.casaley-rf__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 2.57em; line-height: 1.05; letter-spacing: var(--track-display);
  margin: 0 0 0.55em;
}

.casaley-rf__form { display: flex; flex-direction: column; gap: 1.29em; }
.casaley-rf__row--two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.29em; }

.casaley-rf__field { display: flex; flex-direction: column; gap: 0.43em; }
.casaley-rf__label {
  font-family: var(--font-sans); font-size: 0.71em; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(242,226,221,0.85);
}
.casaley-rf__field input,
.casaley-rf__field select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(242,226,221,0.45);
  color: var(--casaley-pink-light);
  font-family: var(--font-sans);
  font-size: 1em;
  padding: 0.43em 0 0.57em;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out);
  letter-spacing: 0.01em;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
}
.casaley-rf__field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23f2e2dd' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.3em center; padding-right: 1.1em; }
.casaley-rf__field select option { color: var(--fg1); }
.casaley-rf__field input::placeholder { color: rgba(242,226,221,0.55); }
.casaley-rf__field input:focus,
.casaley-rf__field select:focus { border-bottom-color: var(--casaley-pink-light); }

.casaley-rf__submit {
  font-family: var(--font-sans);
  font-size: 0.79em; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase;
  background: var(--casaley-pink); color: var(--casaley-velvet);
  border: 0; border-radius: var(--radius-sm);
  padding: 1.45em 2.2em;
  margin-top: 0.57em;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.casaley-rf__submit:hover { background: var(--casaley-pink-deep); }

.casaley-rf__legal { font-size: 0.79em; line-height: 1.5; color: rgba(242,226,221,0.75); margin: 0; }
.casaley-rf__legal a { border-bottom: 1px solid rgba(242,226,221,0.5); padding-bottom: 1px; }

/* === Amenity map — full-bleed strip between the hero and pink section === */
.casaley-amenity { position: relative; z-index: 2; line-height: 0; scroll-margin-top: var(--header-h); }
.casaley-amenity img { display: block; width: 100%; height: auto; }

/* === Pink editorial section (Alba: beige) ===================== */
.casaley-pink {
  position: relative; z-index: 2;
  background: var(--casaley-pink-light);
  padding: clamp(88px, 12vw, 148px) 48px 12vh;
}
.casaley-pink__inner { max-width: 1280px; margin: 0 auto; }
.casaley-pink__head { max-width: 720px; margin-bottom: 20vh; }
.casaley-pink__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(36px, 3.8vw, 54px); line-height: 1.02;
  letter-spacing: var(--track-display);
  margin: 16px 0 24px;
  color: var(--casaley-royal-blue);
}
.casaley-pink__intro {
  font-family: var(--font-sans);
  font-size: 16px; line-height: 1.6; color: var(--fg2); margin: 0;
  max-width: 460px;
}
.casaley-pink__intro p { margin: 0 0 12px; }
.casaley-pink__intro p:last-child { margin-bottom: 0; }

.casaley-pink__moment-register {
  display: inline-flex; align-items: center; align-self: flex-start;
  margin-top: 14px;
  padding: 12px 24px;
  background: transparent;
  color: var(--casaley-royal-blue);
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid var(--casaley-royal-blue); border-radius: 2px; cursor: pointer;
  transition: background 200ms var(--ease-soft), color 200ms var(--ease-soft);
}
.casaley-pink__moment-register:hover {
  background: var(--casaley-royal-blue); color: var(--casaley-pink-light);
}

.casaley-pink__register-cta {
  display: inline-flex; align-items: center;
  margin-top: 32px;
  padding: 14px 28px;
  background: var(--casaley-royal-blue);
  color: var(--casaley-pink-light);
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  border: none; border-radius: 2px; cursor: pointer;
  transition: opacity 200ms var(--ease-soft);
}
.casaley-pink__register-cta:hover { opacity: 0.85; }

.casaley-pink__grid {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 96px;
  align-items: start;
}

/* Fixed gap between moments rather than vh-based min-height + centering —
   that trick only gives an even gap while every moment's content is
   shorter than the min-height; a moment with enough copy to exceed it
   loses its centering slack and ends up flush against the next moment. */
/* One token for the moment-to-moment gap: the trailing spacer cancels this
   same value with a negative margin, so the two must never drift apart. */
.casaley-pink__col {
  --pink-moment-gap: 144px;
  display: flex; flex-direction: column; gap: var(--pink-moment-gap);
}
.casaley-pink__moment {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 460px;
  opacity: 0.12;
  scroll-margin-top: 96px;
  transition: opacity 2400ms var(--ease-soft);
}
.casaley-pink__moment.is-active { opacity: 1; }
.casaley-pink__moment-num {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
  color: var(--fg3); margin-bottom: 4px;
}
.casaley-pink__moment-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(28px, 3vw, 40px); line-height: 1.05;
  letter-spacing: var(--track-display);
  margin: 4px 0 8px; color: var(--casaley-royal-blue);
}
.casaley-pink__moment p {
  font-family: var(--font-sans);
  font-size: 15px; line-height: 1.6; color: var(--fg2); margin: 0;
  max-width: 460px;
}

/* Sticky image column. JS sets an inline height matching the first moment's
   own rendered height, and an inline top that centres it in the viewport —
   recalculated on resize only (no scroll listener, prevents jitter). The
   calc() here is only a pre-measurement fallback for the first paint. */
.casaley-pink__sticky {
  position: sticky; top: 128px;
  height: calc(100vh - 560px);
}
.casaley-pink__stack {
  position: relative;
  width: 100%; height: 100%;
  background: var(--casaley-pink-deep);
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.casaley-pink__img {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-soft);
}
.casaley-pink__img.is-active { opacity: 1; }
.casaley-pink__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.casaley-pink__placeholder-badge {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  font-family: var(--font-sans); font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #fff; background: rgba(20, 20, 20, 0.72);
  padding: 7px 12px; border-radius: var(--radius-sm);
  pointer-events: none;
}

/* Per-moment image — mobile only */
.casaley-pink__moment-media { display: none; }

/* === Lenleigh section (Alba: yellow / was Casaley orange) ====== */
.casaley-lenleigh {
  position: relative; z-index: 2;
  background: var(--casaley-velvet);
  padding: 200px 48px 160px;
  scroll-margin-top: var(--header-h);
  overflow: hidden;
}

.casaley-lenleigh__inner { max-width: 1280px; margin: 0 auto; }

/* Same column split and gap as the pink section's grid above it, on the same
   1280 inner — so this fold's copy starts exactly on the left edge of the
   image up there, and the logo centres on the band that fold's copy runs in. */
.casaley-lenleigh__grid {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 96px;
  align-items: center;
}

/* Stretching this cell overrides the grid's align-items:center so it takes
   the row's full height — which the copy column alone defines — giving the
   logo a box measured to the copy beside it. The image is absolutely
   positioned so its own intrinsic height stays out of that row measurement
   (left in flow it would size the row to the artwork and the two would grow
   past each other), and sits at 65% of that box, centred on the copy. */
.casaley-lenleigh__logo { position: relative; align-self: stretch; min-height: 0; }
.casaley-lenleigh__logo img {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  height: 71.5%; width: auto; max-width: 100%;   /* 65% + 10% */
  object-fit: contain; display: block;
}

.casaley-lenleigh__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(32px, 4vw, 56px);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-display);
  color: var(--casaley-pink-light);
  margin: 0 0 24px;
}

.casaley-lenleigh__body {
  font-family: var(--font-sans); font-weight: 400;
  font-size: 16px; line-height: var(--lh-body);
  color: var(--fg-on-velvet); opacity: 0.9;
  max-width: 460px;
  /* Drop the UA's trailing 1em: as the last child it adds nothing visible,
     but it counts toward this column's height and so would push the logo
     beside it a line's worth below the copy's actual bottom. The heading's
     own 24px bottom margin still sets the gap above. */
  margin: 0;
}

/* === Footer =================================================== */
.casaley-footer {
  position: relative; z-index: 2;
  background: var(--casaley-royal-blue-deep);
  color: var(--casaley-pink-light);
  padding: 40px var(--hero-edge);
}
.casaley-footer__inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 32px;
}
.casaley-footer__brand { display: flex; align-items: center; gap: 64px; }
.casaley-footer__mark-img { height: 56px; width: auto; display: block; }
.casaley-footer__lenleigh-img { height: 56px; width: auto; display: block; }

.casaley-footer__right { display: flex; align-items: flex-end; gap: 64px; }

.casaley-footer__label { font-size: 9px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(242,226,221,0.55); }

.casaley-footer__address { display: flex; flex-direction: column; gap: 8px; }
.casaley-footer__address p { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.5; color: rgba(242,226,221,0.9); }

.casaley-footer__legal { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; font-size: 13px; font-weight: 500; color: rgba(242,226,221,0.9); }
.casaley-footer__legal a { border-bottom: 1px solid rgba(242,226,221,0.3); padding-bottom: 2px; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.casaley-footer__legal a:hover { color: var(--casaley-pink-light); border-bottom-color: rgba(242,226,221,0.5); }

/* === Legal pages (privacy-policy.html, disclaimer.html) ======= */
.casaley-legal-header {
  background: var(--casaley-royal-blue-deep);
  padding: 0 48px;
  height: 72px;
  display: flex; align-items: center;
}
.casaley-legal-header__wordmark { height: 30px; width: auto; display: block; }

.casaley-legal-main {
  max-width: 760px;
  margin: 0 auto;
  padding: 96px 48px 120px;
}
.casaley-legal-main h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(32px, 4vw, 52px); line-height: 1.02;
  letter-spacing: var(--track-display);
  color: var(--casaley-royal-blue);
  margin: 0 0 48px;
}
.casaley-legal-main h2 {
  font-family: var(--font-sans); font-weight: 600;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg2);
  margin: 40px 0 12px;
}
.casaley-legal-main p {
  font-family: var(--font-sans);
  font-size: 15px; line-height: 1.7; color: var(--fg2);
  margin: 0 0 20px;
}
.casaley-legal-main a { border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.casaley-legal-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg2);
  margin-bottom: 56px;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
.casaley-legal-back:hover { color: var(--casaley-royal-blue); }

/* === 404 page ================================================= */
.casaley-404 {
  min-height: 100vh;
  background: var(--casaley-royal-blue-deep);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 48px;
  gap: 32px;
}
.casaley-404__wordmark { height: 44px; width: auto; display: block; }
.casaley-404__code {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(242,226,221,0.4);
}
.casaley-404__heading {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(28px, 4vw, 48px); line-height: 1.05;
  letter-spacing: var(--track-display);
  color: var(--casaley-pink-light);
  margin: 0;
}
.casaley-404__link {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--casaley-pink-light);
  border-bottom: 1px solid rgba(242,226,221,0.4);
  padding-bottom: 4px;
}
.casaley-404__link:hover { border-bottom-color: var(--casaley-pink-light); }

/* === Responsive ============================================== */

@media ((max-height: 714px) and (min-width: 980px)) {
    /* styles for short screens */
    .casaley-rf { top: calc(var(--header-h) + (100vw - 2 * var(--hero-edge)) * 0.18125); }
}

@media (max-width: 980px) {
  /* Image runs edge to edge here (topbar above it keeps its own 24px inset
     below) — the side inset moves off the fold and onto the intro copy
     below it instead. */
  .casaley-hero { padding-left: 0; padding-right: 0; }
  .casaley-hero__topbar { padding: 0 24px; }
  .casaley-hero__intro { padding-left: var(--hero-edge); padding-right: var(--hero-edge); }
  .casaley-hero__stage { padding-bottom: 17vw; }
  .casaley-hero__intro { grid-template-columns: 1fr; gap: clamp(18px, 4vw, 28px); }
  .casaley-hero__intro-cta { align-self: flex-start; }
  .casaley-rf { width: 100%; right: 0; left: 0; bottom: 0; top: auto; height: auto; max-height: 82vh;
    background: linear-gradient(135deg, rgba(223,90,58,0.98) 0%, rgba(223,90,58,0.9) 100%);
    transform: translateY(100%); border-radius: 16px 16px 0 0; }
  .casaley-rf.is-open { transform: translateY(0); }
  .casaley-rf__tab { top: auto; bottom: 0; right: 0; transform: none; width: auto; height: 46px; padding: 0 22px; border-radius: 0; flex-direction: row; gap: 8px; }
  .casaley-rf__tab span { writing-mode: horizontal-tb; transform: none; }
  /* The panel rises from the bottom here rather than sliding in from the
     right, so the chevron turns a quarter clockwise to point the way it goes. */
  .casaley-rf__tab svg { transform: rotate(90deg); }
  .casaley-rf__tab.is-hidden { transform: translateY(120%); }
  .casaley-pink { padding: 72px 24px 80px; }
  .casaley-pink__head { margin-bottom: 56px; }
  .casaley-pink__grid { grid-template-columns: 1fr; gap: 0; }
  .casaley-pink__sticky { display: none; }
  .casaley-pink__moment { min-height: auto; gap: 14px; }
  .casaley-pink__moment-media {
    display: block; position: relative;
    width: 100%; aspect-ratio: 4/3;
    border-radius: var(--radius-sm); overflow: hidden;
    margin-bottom: 8px;
  }
  .casaley-pink__moment-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /*.casaley-pink__moment-register { display: none; }*/
  .casaley-pink__col { --pink-moment-gap: 56px; }
  .casaley-lenleigh { padding: 96px 24px; }
  .casaley-lenleigh__grid { grid-template-columns: 1fr; gap: 40px; }
  /* Single column here, so there's no copy alongside to take height from —
     and the absolutely positioned logo would leave the cell at zero. This
     height is the logo's own size rather than a share of the copy's, so it
     fills the box instead of taking the 65% used against the copy. */
  .casaley-lenleigh__logo { align-self: start; height: 88px; }
  /* Stacked above the copy here rather than beside it, so it reads as part of
     the same column and starts on the copy's left edge instead of centred. */
  .casaley-lenleigh__logo img { height: 100%; left: 0; transform: translateY(-50%); }
  .casaley-lenleigh__body { max-width: none; }
  .casaley-mobile-br { display: block; }
  .casaley-footer { padding: 48px 24px; }
  .casaley-footer__inner { flex-direction: column; align-items: center; text-align: center; gap: 28px; }
  .casaley-footer__brand { display: none; }
  .casaley-footer__right { flex-direction: column; align-items: center; gap: 24px; }
  .casaley-footer__address { align-items: center; }
  .casaley-footer__legal { align-items: center; }
  .casaley-header { padding: 0 24px; }
  /* Burger takes the nav's place on the right, mark stays on the left — same
     swap applies inside .casaley-hero__topbar since it shares these classes. */
  .casaley-header__burger { display: flex; }
  .casaley-header__nav { display: none; }
  .casaley-header__nav.is-open {
    display: flex; flex-direction: column; align-items: flex-start;
    position: absolute; top: 100%; right: 24px; z-index: 4;
    gap: 12px; padding: 16px 22px;
    background: var(--casaley-orange);
    border-radius: var(--radius-sm);
    font-size: 11px; letter-spacing: 0.18em; color: #fff;
  }
  .casaley-header__nav.is-open a:hover { color: #fff; }
  .casaley-header__nav.is-open span { display: none; }
}

@media (max-width: 560px) {
  /* Keeps the 2px step under the topbar nav at its reduced mobile size. */
  .casaley-hero__disclaimer { font-size: 5.5px; letter-spacing: 0.06em; }
  .casaley-hero__lede { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}