/* April Soriano Homes v2 design system.
   Mobile first. Loaded after site.css on every page.
   Part 1: fonts + tokens. Part 2: shared chrome (top band, pill, menu, sticky booking bar).
   Part 3: theme layer that restyles the v1 page markup (inline styles) into the v2 look. */

/* ---------- 1. fonts + tokens ---------- */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap;
  src: url('/assets/fonts/bricolage-grotesque-latin.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap;
  src: url('/assets/fonts/dm-sans-latin.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 100 1000; font-display: swap;
  src: url('/assets/fonts/dm-sans-italic-latin.woff2') format('woff2'); }

:root {
  --navy: #1D283C; --navy-deep: #16202F; --navy-lift: #22304A; --ink: #3A4658;
  --gold: #D6B57E; --bronze: #B38F5F; --brown: #7A5833;
  --cream: #F2ECE2; --sand: #EDE4D6; --white: #FFFFFF;
  --r: 24px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --gutter: 20px;
  --display: 'Bricolage Grotesque', sans-serif;
  --body: 'DM Sans', sans-serif;
}
@media (min-width: 600px) { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --gutter: clamp(32px, 4.5vw, 64px); --r: 28px; } }

body.v2 { font-family: var(--body); color: var(--navy); background: var(--white); font-size: 17px; }
body.v2.menu-open { overflow: hidden; }
:where(.v2) .wrap { max-width: 1360px; margin: 0 auto; padding: 0 var(--gutter); }
:where(.v2) :is(h1, h2, h3) { font-family: var(--display); font-weight: 800; letter-spacing: -0.035em; margin: 0; text-wrap: balance; }
:where(.v2) p { margin: 0; text-wrap: pretty; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 400; background: var(--gold); color: var(--navy-deep); padding: 10px 16px; font-weight: 700; text-decoration: none; border-radius: 999px; }
.skip-link:focus { top: 12px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; font-family: var(--body); font-weight: 600; font-size: 16px;
  min-height: 54px; padding: 0 24px; text-decoration: none; white-space: nowrap; border: 0; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--gold); color: var(--navy-deep); }
.btn-dark { background: var(--navy); color: #fff; }
.btn-soft { background: var(--cream); color: var(--navy); }
.btn-ghost { background: rgba(255, 255, 255, 0.08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); }
.btn .dot { display: none; width: 30px; height: 30px; border-radius: 999px; background: var(--navy-deep); color: var(--gold); place-items: center; font-size: 15px; margin-right: -10px; transition: transform 220ms var(--ease-out); }
@media (min-width: 600px) { .btn .dot { display: grid; } }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: #E2C592; color: var(--navy-deep); }
  .btn:hover .dot { transform: rotate(-45deg); }
  .btn-soft:hover { background: var(--sand); color: var(--navy); }
  .btn-ghost:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
  .btn-dark:hover { background: var(--navy-deep); color: #fff; }
}

/* ---------- 2. shared chrome ---------- */
.menu-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; min-width: 48px; padding: 0 12px; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.08); color: #fff; font: 600 15px var(--body); transition: background-color 200ms ease, transform 160ms var(--ease-out); }
.menu-toggle:active { transform: scale(0.95); }
.menu-toggle .bars { width: 22px; display: grid; gap: 5px; }
.menu-toggle .bars i { display: block; height: 2px; border-radius: 2px; background: currentColor; }
.menu-toggle .lbl { display: none; }
@media (min-width: 600px) { .menu-toggle .lbl { display: inline; } .menu-toggle { padding: 0 18px 0 14px; } }
@media (hover: hover) and (pointer: fine) { .menu-toggle:hover { background: rgba(255, 255, 255, 0.16); } }

/* top band: the logo, large, on navy (inner pages; the homepage hero carries its own) */
.v2-top { background: var(--navy-deep); color: #fff; }
.v2-top-in { max-width: 1360px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: max(14px, env(safe-area-inset-top)) var(--gutter) 14px; }
.v2-logo img { display: block; height: 74px; width: auto; }
.v2-top .right { display: flex; align-items: center; gap: 10px; }
.v2-top .book { min-height: 46px; padding: 0 18px; font-size: 15px; }
.v2-top .book .lg { display: none; }
@media (min-width: 1024px) { .v2-logo img { height: 96px; } .v2-top .book { min-height: 54px; padding: 0 24px; font-size: 16px; } .v2-top .book .lg { display: inline; } .v2-top .book .sm { display: none; } }

/* floating pill */
.pill { position: fixed; z-index: 120; top: max(10px, env(safe-area-inset-top)); left: 12px; right: 12px; margin: 0 auto; max-width: 560px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 999px;
  background: rgba(22, 32, 47, 0.9); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 40px rgba(22, 32, 47, 0.35);
  transform: translateY(calc(-100% - 24px)); opacity: 0; transition: transform 380ms var(--ease-out), opacity 240ms ease; }
.pill.is-shown { transform: none; opacity: 1; }
.pill .logo img { display: block; height: 44px; width: auto; }
.pill .right { display: flex; align-items: center; gap: 6px; }
.pill .btn { min-height: 46px; padding: 0 18px; font-size: 15px; }
.pill .menu-toggle { height: 46px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .pill { background: var(--navy-deep); } }
@media (min-width: 1024px) {
  .pill { left: 50%; right: auto; width: auto; max-width: none; transform: translate(-50%, calc(-100% - 24px)); padding-left: 18px; }
  .pill.is-shown { transform: translate(-50%, 0); }
  .pill .logo { margin-right: 22px; }
}

/* full-screen menu */
.overlay { position: fixed; inset: 0; z-index: 200; background: var(--navy-deep); color: #fff; overflow-y: auto;
  display: flex; flex-direction: column; padding: max(14px, env(safe-area-inset-top)) var(--gutter) calc(24px + env(safe-area-inset-bottom)); }
.overlay[hidden] { display: none; }
.overlay .top { display: flex; align-items: center; justify-content: space-between; max-width: 1360px; width: 100%; margin: 0 auto; }
.overlay .top img { height: 74px; width: auto; display: block; }
.overlay nav { margin: 28px auto 32px; display: grid; width: 100%; max-width: 1360px; }
.overlay nav a { font-family: var(--display); font-weight: 700; font-size: clamp(32px, 9vw, 64px); letter-spacing: -0.03em; line-height: 1.12; color: #fff; text-decoration: none; padding: 6px 0; }
.overlay nav a[aria-current="page"] { color: var(--gold); }
.overlay .talk { margin: auto auto 0; width: 100%; max-width: 1360px; display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; padding: 18px; border-radius: var(--r); background: rgba(255, 255, 255, 0.06); }
.overlay .talk img { width: 64px; height: 64px; border-radius: 999px; object-fit: cover; object-position: 50% 18%; border: 2px solid var(--gold); }
.overlay .talk strong { font-family: var(--display); font-size: 20px; display: block; }
.overlay .talk span { color: rgba(255, 255, 255, 0.72); font-size: 15px; }
.overlay .actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.overlay .actions .btn-primary { grid-column: 1 / -1; }
@media (min-width: 600px) { .overlay .actions { grid-template-columns: auto auto 1fr; } .overlay .actions .btn-primary { grid-column: auto; } }
@media (hover: hover) and (pointer: fine) { .overlay nav a:hover { color: var(--gold); } }

/* sticky booking bar (phones) */
.sticky-cta { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 90; transform: translateY(160%); transition: transform 350ms var(--ease-out); }
.sticky-cta .btn { width: 100%; box-shadow: 0 14px 34px rgba(22, 32, 47, 0.35); }
.sticky-cta.is-visible { transform: none; }
body.menu-open .sticky-cta { transform: translateY(160%); }
@media (min-width: 1024px) { .sticky-cta { display: none; } }

/* reveal + entrance motion */
@media (prefers-reduced-motion: no-preference) {
  .v2 [data-reveal]:not([data-revealed]) { opacity: 0; transform: translateY(26px); }
  .v2 [data-reveal] { transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); }
  .v2 [data-reveal].is-in { opacity: 1; transform: none; }
  .overlay:not([hidden]) { animation: v2MenuIn 420ms var(--ease-out) both; }
  .overlay:not([hidden]) nav a { animation: v2Rise 600ms var(--ease-out) both; animation-delay: calc(var(--i) * 45ms + 80ms); }
  .overlay:not([hidden]) .talk { animation: v2Rise 600ms var(--ease-out) 360ms both; }
}
@keyframes v2Rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes v2MenuIn { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- 3. theme layer for v1 page markup ----------
   The inner pages keep their approved content and behaviour; these rules
   override the v1 inline typography and shapes. */
body.v2 [style*="Montserrat"] { font-family: var(--body) !important; }
body.v2-legacy :is(h1, h2, h3), body.v2 footer :is(h1, h2, h3) { font-family: var(--display) !important; text-transform: none !important; letter-spacing: -0.035em !important; font-weight: 800 !important; }
body.v2-legacy h1 { line-height: 0.98 !important; font-size: clamp(38px, 10.4vw, 88px) !important; }
body.v2-legacy h2 { line-height: 1.02 !important; }
body.v2-legacy h3 { line-height: 1.1 !important; }
body.v2-legacy [style*="font-weight:300"] { font-weight: 400 !important; }
/* small uppercase labels: keep, but readable */
body.v2-legacy :is(span, div, a)[style*="uppercase"]:is([style*="font-size:9px"], [style*="font-size:10px"], [style*="font-size:11px"]) {
  font-size: 12.5px !important; letter-spacing: 0.08em !important; }
/* v1 buttons (uppercase + padded links and buttons) become v2 pills */
body.v2-legacy :is(a, button)[style*="text-transform:uppercase"][style*="padding:"] {
  border-radius: 999px !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 16px !important; font-weight: 600 !important;
  min-height: 50px; padding: 0 24px !important; display: inline-flex !important; align-items: center; justify-content: center; text-align: center; }
body.v2-legacy :is(a, button)[style*="text-transform:uppercase"][style*="padding:"]:active { transform: scale(0.97); }
/* soft cards, navy panels and image frames get the v2 radius */
body.v2-legacy :is(div, article, label, figure)[style*="background:#F2ECE2"][style*="padding"],
body.v2-legacy :is(div, article)[style*="background:#FFFFFF"][style*="padding"],
body.v2-legacy div[style*="background:#1D283C"][style*="padding"],
body.v2-legacy div[style*="overflow:hidden"][style*="aspect-ratio"]:not([data-flush]),
body.v2-legacy div[style*="background:#EDE4D6"][style*="overflow:hidden"] { border-radius: var(--r) !important; }
body.v2-legacy div[style*="background:#EDE4D6"]:has(> img) { border-radius: var(--r) !important; overflow: hidden; }
body.v2-legacy :is(input, textarea, select) { border-radius: 14px !important; font-family: var(--body) !important; }
/* inner page hero: the first section on each page */
body.v2 .page-hero { border-radius: 0 0 var(--r) var(--r); }
body.v2 .page-hero h1 { max-width: 14ch !important; }
body.v2 footer { border-radius: var(--r) var(--r) 0 0; }
/* footer: column links a touch larger; the copyright row (and its Privacy Policy link) stays small and matched */
body.v2 footer a[style*="font-size:14px"] { font-size: 15px !important; }
body.v2 footer div[style*="text-transform:uppercase"][style*="font-size:11px"] { font-size: 12.5px !important; letter-spacing: 0.08em !important; }
body.v2 footer div[style*="text-transform:uppercase"][style*="font-size:11px"] a { font-size: inherit !important; letter-spacing: inherit !important; }
/* navy photo heroes were padded for the old overlaid header; the logo band now sits above them */
body.v2 .page-hero[style*="background:#1D283C"] { padding-top: clamp(56px, 9vw, 120px) !important; min-height: clamp(420px, 58vh, 620px) !important; }
body.v2 footer [style*="font-weight:300"] { font-weight: 400 !important; }
/* phones: a little room under the copyright row (home indicator, browser toolbar) */
@media (max-width: 1023px) { body.v2 footer { padding-bottom: calc(40px + env(safe-area-inset-bottom)) !important; } }

/* inner page headlines: word-by-word rise (js/v2.js) */
.v2w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.v2w > span { display: inline-block; }

/* display home photo strips: horizontal drags go to the carousel, vertical ones still scroll the page */
body.v2-legacy [data-fn-touchstart], body.v2-legacy [data-ontouchstart] { touch-action: pan-y; }