/* ============================================================
   MIKE STEFL — PORTFOLIO
   Inspired by Wix "3D Designer Portfolio" template
   Stack: plain HTML + CSS + vanilla JS, no build
   ============================================================ */

/* ---------- RESET ---------- */
*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; margin: 0; }
h1,h2,h3,h4,h5,h6,p { margin: 0; }

/* ---------- TOKENS ---------- */
:root {
  --c-ink: #0E0E0E;
  --c-ink-soft: #3F3F3F;
  --c-white: #FFFFFF;
  --c-bg: #FFFFFF;
  --c-bg-soft: #EDEDED;
  --c-pill: #2F2E2E;
  --c-charcoal: #3A3A3A;
  --c-line: rgba(255,255,255,.55);

  --f-display: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --f-script: 'Caveat', cursive;

  --w-bold: 700;
  --w-med: 500;
  --w-reg: 400;
  --w-light: 300;

  --ease: cubic-bezier(.4,0,.2,1);
}

html {
  scroll-behavior: smooth;
  /* Soft snap — pulls toward sections but lets you scroll freely between */
  scroll-snap-type: y proximity;
}

body {
  font-family: var(--f-body);
  font-weight: var(--w-light);
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Snap targets */
.project,
.all-projects,
.site-footer {
  scroll-snap-align: start;
}

body.no-scroll { overflow: hidden; }

/* ---------- HEADER ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 40px;
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }

.site-logo {
  font-family: var(--f-display);
  font-weight: var(--w-bold);
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--c-white);
  text-decoration: none;
  transition: color .25s var(--ease);
}

body.theme-light-dots .site-logo { color: var(--c-ink); }
body[data-page="about"] .site-logo { color: var(--c-white); }

/* ---------- HAMBURGER (morphs to X when menu is open) ---------- */
.menu-toggle {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  width: 36px;
  height: 28px;
  align-items: flex-end;
  justify-content: center;
  color: var(--c-white);
  z-index: 70;
}
.menu-toggle span {
  display: block;
  width: 28px;
  height: 2px;
  background: currentColor;
  transition: transform .35s, opacity .25s;
  transform-origin: center;
}
body.theme-light-dots .menu-toggle { color: var(--c-ink); }
body[data-page="about"] .menu-toggle { color: var(--c-white); }

/* Morph to X when overlay is open */
body.menu-open .menu-toggle { color: var(--c-white); }
body.menu-open .menu-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
body.menu-open .menu-toggle span:nth-child(2) {
  opacity: 0;
}
body.menu-open .menu-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- MENU OVERLAY (Wix-style fade ~0.4s) ---------- */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,10,10,.78);
  color: var(--c-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s, visibility .4s;
}
.menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.menu-close {
  position: absolute;
  top: 30px;
  right: 40px;
  color: var(--c-white);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.menu-list {
  display: flex;
  flex-wrap: wrap;
  gap: 64px;
  margin-bottom: 48px;
  justify-content: center;
}
.menu-list a {
  font-family: var(--f-display);
  font-weight: var(--w-bold);
  font-size: 28px;
  color: var(--c-white);
  transition: opacity .2s var(--ease);
}
.menu-list a:hover { opacity: .65; }

.menu-social {
  display: flex;
  gap: 24px;
  color: rgba(255,255,255,.65);
}
.menu-social a {
  display: inline-flex;
  width: 32px; height: 32px;
  align-items: center;
  justify-content: center;
  transition: color .2s var(--ease);
}
.menu-social a:hover { color: var(--c-white); }

/* ---------- SIDE DOTS (Wix-style SVG circles) ---------- */
.side-dots {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 10px 14px;
}
.dot {
  display: inline-flex;
  width: 12px;
  height: 12px;
  align-items: center;
  justify-content: center;
}
.dot svg {
  width: 12px;
  height: 12px;
  overflow: visible;
  transition: .2s ease-in-out;
}
.dot svg circle {
  fill: transparent;
  stroke: rgba(255,255,255,.95);
  stroke-width: 4px;
  transition: fill .2s ease-in-out, stroke .2s ease-in-out;
}
.dot.is-active svg circle {
  fill: rgba(255,255,255,.92);
}
/* Light-bg variant (gallery + footer) */
body.theme-light-dots .dot svg circle {
  stroke: rgba(20,20,20,.7);
}
body.theme-light-dots .dot.is-active svg circle {
  fill: rgba(20,20,20,.85);
}

/* ---------- PROJECT SECTION (PAGE-STACK COVERS) ----------
   THE WHOLE SECTION is sticky to viewport top. Each subsequent section
   in the DOM is a later sibling and naturally stacks ON TOP, so the
   next section literally slides UP and covers the previous one as you
   scroll. This is the Wix "stacked cards" effect the user wants.
   --------------------------------------------------------------------- */
.project {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  min-height: 600px;
  width: 100%;
  color: var(--c-white);
  overflow: hidden;          /* clip the bg to the section box */
}

/* Bg layer fills the sticky section */
.project-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  will-change: transform;
}

/* Bg image — scroll-linked blur + parallax (JS sets the vars) */
.project-bg-img {
  position: absolute;
  inset: -6% 0;        /* extra height so parallax translate doesn't show edges */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translateY(var(--parallax-y, 0px));
  filter: blur(var(--blur-amount, 0px));
  will-change: transform, filter;
}

/* Subtle bottom-gradient overlay so the pill stays legible on any image */
.project-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.45) 100%);
  z-index: 2;
  pointer-events: none;
}

.project-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--f-display);
  font-weight: var(--w-bold);
  letter-spacing: -0.02em;
  font-size: clamp(56px, 11vw, 168px);
  line-height: 1;
  color: var(--c-white);
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: difference;
  text-align: center;
  opacity: .96;
}
.project-title span {
  display: block;
  font-weight: var(--w-light);
  font-size: .18em;
  letter-spacing: .35em;
  margin-bottom: 12px;
  text-transform: uppercase;
  opacity: .85;
  mix-blend-mode: normal;
}
.project-title.script {
  font-family: var(--f-script);
  font-weight: var(--w-med);
  font-size: clamp(96px, 18vw, 280px);
  letter-spacing: 0;
  color: #1B2A6B;
  mix-blend-mode: normal;
  text-shadow: 0 0 0 transparent;
}

.project.light .project-title { color: #1B2A6B; mix-blend-mode: normal; }
.project.light .project-title span { color: #4a4a5a; }

/* ---------- PILL BUTTON (Wix-style: invert on hover) ---------- */
.pill {
  position: absolute;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  font-family: var(--f-body);
  font-weight: var(--w-light);
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: .04em;
  border-radius: 20px;
  background: #2F2E2E;
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
  text-decoration: none;
  transition: background-color .4s, border-color .4s, color .4s;
}
.pill:hover {
  background: #F2F2F2;
  border-color: #2F2E2E;
  color: #2F2E2E;
}
.pill:active { transform: translateX(-50%) scale(.98); }

/* ---------- THUMBNAIL HOVER ---------- */
.thumb-bg {
  background-size: cover;
  background-position: center top;
}

/* ---------- EYEBROW (shared) ---------- */
.eyebrow {
  font-family: var(--f-body);
  font-weight: var(--w-light);
  font-size: 13px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin: 0 0 28px;
}
.eyebrow-light { color: rgba(255,255,255,.65); }

/* ---------- SERVICES (standalone page only) ---------- */
body[data-page="services"] {
  background: #0E0E0E;
  color: var(--c-white);
}
.services {
  min-height: 100vh;
  min-height: 100dvh;
  background: #0E0E0E;
  color: var(--c-white);
  display: flex;
  align-items: center;
  padding: 130px 40px 80px;
}
.services-inner {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  filter: blur(var(--blur-amount, 0px));
  will-change: filter;
}
.services-headline {
  font-family: var(--f-display);
  font-weight: var(--w-bold);
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  max-width: 14ch;
}
.services-lead {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255,255,255,.7);
  max-width: 60ch;
  margin: 0 0 56px;
}
.services-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.12);
}
.services-grid li {
  padding: 28px 24px 32px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  border-right: 1px solid rgba(255,255,255,.12);
  position: relative;
  transition: background .35s ease;
}
.services-grid li:nth-child(3n) { border-right: 0; }
.services-grid li:hover { background: rgba(255,255,255,.03); }
.service-num {
  font-family: var(--f-body);
  font-weight: var(--w-light);
  font-size: 12px;
  letter-spacing: .25em;
  color: rgba(255,255,255,.45);
  display: block;
  margin-bottom: 14px;
}
.services-grid h4 {
  font-family: var(--f-display);
  font-weight: var(--w-bold);
  font-size: 18px;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--c-white);
}
.services-grid p {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,.6);
  margin: 0;
}

/* ---------- VILLAS SECTION ----------
   NOT sticky — taller than viewport so user scrolls through the full grid.
   The previous sticky section (services) stays pinned behind it; once
   user scrolls past villas, the sticky footer covers everything. */
.villas {
  position: relative;
  background: var(--c-bg-soft);
  color: var(--c-ink);
  padding: 90px 40px 80px;
  z-index: 1;
}
.villas-inner {
  max-width: 1280px;
  margin: 0 auto;
  filter: blur(var(--blur-amount, 0px));
  will-change: filter;
}
.villas-head { margin-bottom: 36px; }
.villas-headline {
  font-family: var(--f-display);
  font-weight: var(--w-bold);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: var(--c-ink);
}
.villas-headline em {
  font-style: normal;
  color: var(--c-ink-soft);
  font-weight: var(--w-reg);
}
.villas-lead {
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-ink-soft);
  max-width: 65ch;
  margin: 0;
}
.villas-lead a {
  color: var(--c-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
/* ---------- BENTO VILLA GRID ----------
   12 cards arranged in mixed sizes for a designy, magazine-style layout.
   Uses CSS grid with explicit column/row spans + dense auto-flow so any
   gaps from spans are filled by smaller cards. */
.villa-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  grid-auto-flow: dense;
  gap: 14px;
  margin-bottom: 32px;
}
.villa-card {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 2px;
  background: #ccc;
  text-decoration: none;
  color: var(--c-white);
}

/* Bento pattern — varied sizes (rendered in document order with dense fill) */
.villa-card:nth-child(1)  { grid-column: span 2; grid-row: span 2; }  /* Mirror 2  — hero 2×2 */
.villa-card:nth-child(2)  { grid-column: span 1; grid-row: span 1; }  /* Peak      — 1×1 */
.villa-card:nth-child(3)  { grid-column: span 1; grid-row: span 2; }  /* Infinity  — 1×2 tall */
.villa-card:nth-child(4)  { grid-column: span 2; grid-row: span 1; }  /* Montana   — 2×1 wide */
.villa-card:nth-child(5)  { grid-column: span 1; grid-row: span 1; }  /* Julli     — 1×1 */
.villa-card:nth-child(6)  { grid-column: span 2; grid-row: span 2; }  /* Chic 1    — hero 2×2 */
.villa-card:nth-child(7)  { grid-column: span 1; grid-row: span 1; }  /* Chic 2    — 1×1 */
.villa-card:nth-child(8)  { grid-column: span 2; grid-row: span 2; }  /* The Lofts — 2×2 hero with 1+4 mosaic */
.villa-card:nth-child(9)  { grid-column: span 1; grid-row: span 1; }  /* Muay 1    — 1×1 */
.villa-card:nth-child(10) { grid-column: span 1; grid-row: span 1; }  /* Bara      — 1×1 */
.villa-card:nth-child(11) { grid-column: span 1; grid-row: span 1; }  /* Angela    — 1×1 */
.villa-card:nth-child(12) { grid-column: span 2; grid-row: span 1; }  /* Rio 1     — 2×1 wide */

/* "The Lofts" composite — editorial mosaic: 1 hero + 2×2 grid inside ONE card
   ┌────────────┬──────┬──────┐
   │            │  L2  │  L3  │
   │     L1     ├──────┼──────┤
   │   (hero)   │  L4  │  L5  │
   └────────────┴──────┴──────┘
*/
.villa-card--multi { background: #0a0a0a; }
.lofts-mosaic {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
  z-index: 0;
}
.mosaic-hero {
  grid-column: 1;
  grid-row: 1 / span 2;
  background-size: cover;
  background-position: center;
  transition: filter .4s ease;
}
.mosaic-small {
  background-size: cover;
  background-position: center;
  transition: filter .4s ease, transform .6s ease;
}
.mosaic-small--2 { grid-column: 2; grid-row: 1; }
.mosaic-small--3 { grid-column: 3; grid-row: 1; }
.mosaic-small--4 { grid-column: 2; grid-row: 2; }
.mosaic-small--5 { grid-column: 3; grid-row: 2; }

.villa-card--multi:hover .mosaic-hero,
.villa-card--multi:hover .mosaic-small { filter: brightness(.6); }

/* Big "5" badge in top-right corner — designy number marker */
.lofts-badge {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 3;
  font-family: var(--f-display);
  font-weight: var(--w-bold);
  font-size: 72px;
  line-height: .85;
  letter-spacing: -0.04em;
  color: var(--c-white);
  text-shadow: 0 2px 24px rgba(0,0,0,.55);
  pointer-events: none;
}
.lofts-badge::after {
  content: 'VILLAS';
  display: block;
  font-size: 9px;
  letter-spacing: .35em;
  font-weight: var(--w-light);
  margin-top: 4px;
  opacity: .9;
}
.villa-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .8s ease, filter .4s ease;
}
.villa-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.7) 100%);
  pointer-events: none;
  transition: opacity .35s ease;
  z-index: 1;
}
.villa-card:hover .villa-bg { transform: scale(1.05); filter: brightness(.7); }
.villa-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.villa-name {
  font-family: var(--f-display);
  font-weight: var(--w-bold);
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.villa-loc {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
/* Hero cards (2×2) get bigger labels for visual hierarchy */
.villa-card:nth-child(1) .villa-name,
.villa-card:nth-child(6) .villa-name {
  font-size: 22px;
  letter-spacing: -0.01em;
  text-transform: none;
}
.villa-card:nth-child(1) .villa-loc,
.villa-card:nth-child(6) .villa-loc {
  font-size: 12px;
}
.villa-card:nth-child(1) .villa-meta,
.villa-card:nth-child(6) .villa-meta {
  left: 20px;
  right: 20px;
  bottom: 18px;
  gap: 6px;
}
.villas-cta {
  display: inline-flex;
  margin-top: 8px;
}
.pill-dark {
  background: #0E0E0E;
  color: var(--c-white);
  border: 1px solid #0E0E0E;
  position: relative;
  left: 0;
  bottom: 0;
  transform: none;
  padding: 14px 24px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pill-dark:hover {
  background: var(--c-white);
  color: #0E0E0E;
  border-color: #0E0E0E;
}
/* ---------- SERVICES CTA buttons (standalone, dark page) ---------- */
.services-cta-row {
  display: flex;
  gap: 14px;
  margin-top: 44px;
  flex-wrap: wrap;
}
.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 20px;
  font-family: var(--f-body);
  font-weight: var(--w-light);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .4s, color .4s, border-color .4s;
}
.cta-btn.primary {
  background: var(--c-white);
  color: #0E0E0E;
  border: 1px solid var(--c-white);
}
.cta-btn.primary:hover {
  background: transparent;
  color: var(--c-white);
}
.cta-btn.secondary {
  background: transparent;
  color: var(--c-white);
  border: 1px solid rgba(255,255,255,.45);
}
.cta-btn.secondary:hover {
  background: var(--c-white);
  color: #0E0E0E;
  border-color: var(--c-white);
}
body[data-page="services"] .site-logo,
body[data-page="services"] .menu-toggle {
  color: var(--c-white);
}

/* ---------- FOOTER (sticky for page-stack covers) ---------- */
.site-footer {
  background: var(--c-bg-soft);
  padding: 80px 40px 32px;
  color: var(--c-ink-soft);
  position: sticky;
  top: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Scroll-linked blur on content */
.site-footer .footer-grid,
.site-footer .footer-copy {
  filter: blur(var(--blur-amount, 0px));
  will-change: filter;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px;
  max-width: 1280px;
  margin: 0 auto;
}
.footer-h {
  font-family: var(--f-body);
  font-weight: var(--w-med);
  font-size: 14px;
  margin-bottom: 14px;
  color: var(--c-ink);
  letter-spacing: .02em;
}
.footer-col p,
.footer-col a {
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-ink-soft);
}
.footer-col a { text-decoration: none; transition: color .2s; }
.footer-col a:hover { color: var(--c-ink); text-decoration: underline; }

.footer-intro p { max-width: 260px; }

.footer-social {
  columns: 2;
  column-gap: 24px;
}
.footer-social li { margin-bottom: 6px; break-inside: avoid; }
.footer-social a { text-decoration: underline; }

.footer-copy {
  max-width: 1280px;
  margin: 64px auto 0;
  font-size: 12px;
  color: var(--c-ink-soft);
  opacity: .7;
}

/* ---------- ABOUT PAGE ---------- */
body[data-page="about"] {
  background: var(--c-charcoal);
  color: #e3e3e3;
}
.about-main {
  min-height: 100vh;
  padding: 140px 40px 100px;
  display: flex;
  align-items: center;
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  max-width: 980px;
  margin: 0 auto;
}
.about-col p {
  font-size: 16px;
  line-height: 1.65;
  color: #d6d6d6;
  margin-bottom: 18px;
  font-weight: var(--w-light);
}
.signature {
  font-family: var(--f-script);
  font-size: 42px;
  color: #ededed;
  text-align: right;
  margin-top: 32px !important;
  line-height: 1;
}

.about-footer {
  background: #ededed;
  color: var(--c-ink-soft);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .site-header { padding: 22px 22px; }
  .menu-list { gap: 0; flex-direction: column; text-align: center; }
  .menu-list li { padding: 10px 0; }
  .menu-list a { font-size: 26px; }
  .side-dots { right: 14px; gap: 14px; }
  .pill { margin-bottom: 40px; padding: 12px 28px; }
  .services, .villas, .site-footer { padding-left: 22px; padding-right: 22px; }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .services-grid li:nth-child(3n) { border-right: 1px solid rgba(255,255,255,.12); }
  .services-grid li:nth-child(2n) { border-right: 0; }
  .villa-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 160px;
  }
  /* Simplified bento for tablet — keep some variety */
  .villa-card:nth-child(1)  { grid-column: span 2; grid-row: span 2; }
  .villa-card:nth-child(2),
  .villa-card:nth-child(3),
  .villa-card:nth-child(5),
  .villa-card:nth-child(7),
  .villa-card:nth-child(8),
  .villa-card:nth-child(10),
  .villa-card:nth-child(12) { grid-column: span 1; grid-row: span 1; }
  .villa-card:nth-child(4),
  .villa-card:nth-child(9),
  .villa-card:nth-child(11) { grid-column: span 2; grid-row: span 1; }
  .villa-card:nth-child(6)  { grid-column: span 2; grid-row: span 2; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-main { padding: 110px 22px 80px; }
  .about-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 540px) {
  .services-grid { grid-template-columns: 1fr; }
  .services-grid li { border-right: 0 !important; }
  .villa-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 130px;
    gap: 10px;
  }
  /* On phones simplify — only hero cards keep 2×2, rest 1×1 */
  .villa-card { grid-column: span 1 !important; grid-row: span 1 !important; }
  .villa-card:nth-child(1),
  .villa-card:nth-child(6) { grid-column: span 2 !important; grid-row: span 2 !important; }
  .site-logo { font-size: 20px; }
}

/* ---------- MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}