/* 95 Creations demo — shared layout for every demo site.
   Each site only sets colours/fonts in its own theme.css (:root variables).
   Desktop sizes come from a 1440px-wide layout: 1rem = 16px at 1440×900. */

*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: clamp(11.2px, min(1.1111vw, 2.2222vh), 24px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-weight: var(--w-body);
  font-size: 1.0625rem;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
figure, h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
section[id] { scroll-margin-top: 4rem; }

/* ---------- type ---------- */
.h-xl {
  font-family: var(--f-head);
  font-weight: 400;
  font-size: 1.9185rem;            /* 30.7px */
  line-height: 1.2;
  letter-spacing: var(--track-xl);
}
.h-md {
  font-family: var(--f-head);
  font-weight: 400;
  font-size: 1.25rem;              /* 20px */
  line-height: 1.2;
}
.c-accent { color: var(--c-accent); }
p + p { margin-top: 1.275rem; }

/* pill button — no link, lifts a little on hover */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 11.42rem;                 /* 183px */
  height: 3.51rem;                 /* 56px */
  border-radius: 999px;
  font-family: var(--f-head);
  font-size: 1.0625rem;
  letter-spacing: var(--track-xl);
  padding-left: var(--track-xl);
  cursor: default;
  user-select: none;
  transition: transform .35s ease, box-shadow .35s ease, opacity .9s ease;
}
.btn:hover { transform: translateY(-0.2rem); box-shadow: 0 0.6rem 1.2rem rgb(0 0 0 / .18); }
.btn-light { background: #fff; color: var(--c-accent); }
.btn-dark { background: var(--c-main); color: var(--c-on-dark); }

/* ---------- header (always sticky) ---------- */
.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  height: 7.1rem;
  color: var(--c-on-dark);
}
.hdr::before {                     /* black gradient top → bottom, 30% → clear, on every page position */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 17rem;
  background: linear-gradient(rgb(0 0 0 / .3), rgb(0 0 0 / 0));
  pointer-events: none;
}
.nav-a {
  position: absolute;
  top: 3.19rem;
  font-family: var(--f-head);
  font-size: .6875rem;             /* 11px */
  line-height: 1;
  letter-spacing: var(--track-xl);
  transition: opacity .3s ease;
}
.nav-a:hover { opacity: .7; }
.n1 { left: 12.16%; }
.n2 { left: 28.89%; }
.n3 { left: 61.88%; }
.n4 { left: 80.14%; }
.logo { position: absolute; top: 2.69rem; left: 47.85%; width: 2.42rem; height: 1.95rem; }
.logo svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.icons {
  position: absolute;
  top: 5.05rem;
  right: 15.42%;
  display: flex;
  align-items: center;
  gap: .62rem;
}
.icons li { display: flex; }
.icons svg { fill: currentColor; display: block; }
.i-mail  { width: 1.102rem; height: .795rem; }
.i-phone { width: .786rem;  height: .79rem; }
.i-ig    { width: .767rem;  height: .766rem; }
.i-fb    { width: .8025rem; height: .789rem; }
.i-wa    { width: .8525rem; height: .8575rem; }
.i-line  { width: .904rem;  height: .9156rem; }

/* ---------- hero: sliding doors (every device and orientation) ---------- */
/* lvh = screen height with the browser bars hidden, so the photo still fills the screen
   after a phone hides its address bar while scrolling; the text stays centred in the
   visible part (svh) */
.hero { position: relative; z-index: 2; height: 100lvh; }
.hero-stage { position: relative; height: 100lvh; overflow: hidden; }
.door { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; }
.door-l { left: 0; }
.door-r { right: 0; }
.door img { position: absolute; top: 0; height: 100%; width: 200%; max-width: none; object-fit: cover; }
.door-l img { left: 0; }
.door-r img { right: 0; }
.hero-text {
  position: absolute;
  inset: 0 0 auto 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--c-on-dark);
  padding: 0 1.5rem;
}
.hero-text .h-xl { padding-left: var(--track-xl); }
.hero-sub {
  margin-top: .45rem;
  font-family: var(--f-head);
  font-size: 1.1875rem;            /* 19px */
  letter-spacing: var(--track-sub);
  padding-left: var(--track-sub);
}
.hero-text .btn { margin-top: 1.15rem; }

/* doors need JS and are skipped when the visitor asks for reduced motion */
html.doors .hero { height: 200lvh; }
html.doors .hero-stage { position: sticky; top: 0; pointer-events: none; }
html.doors .door, html.doors .hero-text { pointer-events: auto; }
html.doors .door { will-change: transform; }
html.doors .door-l { transform: translate3d(calc(var(--p, 0) * -100%), 0, 0); }
html.doors .door-r { transform: translate3d(calc(var(--p, 0) * 100%), 0, 0); }
html.doors .hero-text { opacity: calc(1 - var(--p, 0) * 2.4); transform: translateY(calc(var(--p, 0) * -3rem)); }
html.doors .coastal { margin-top: -100lvh; }

/* ---------- coastal living ---------- */
.coastal { position: relative; z-index: 1; background: var(--c-bg); padding-top: 8.95rem; }
.coastal-head { text-align: center; padding: 0 1.5rem; }
.coastal-head .h-xl { padding-left: var(--track-xl); }
.coastal-lead { margin-top: 1.35rem; }
.coastal-grid {
  position: relative;
  z-index: 1;
  margin-top: 5rem;
  padding: 0 5.5% 0 8.54%;
  display: grid;
  grid-template-columns: 44.65% 1fr;  /* 2nd column starts at x711 of the 1440 layout */
  row-gap: 2.75rem;
}
.item .h-md { color: var(--c-main); margin-bottom: 1.3rem; }
.item p { max-width: min(35rem, calc(100% - 2.5rem)); }  /* always keep a gap before column 2 */
.item:nth-child(even) p { max-width: min(38.5rem, 100%); }
.band { position: relative; margin-top: -12.25rem; aspect-ratio: 1440 / 854; overflow: hidden; }
.band img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.band::after {                     /* white fade from the layout: solid 25%, then clear */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 89.1%;
  background: linear-gradient(var(--c-bg) 25.25%, color-mix(in srgb, var(--c-bg) 0%, transparent));
  pointer-events: none;
}
.band-btn { position: absolute; z-index: 1; top: 37.35%; left: 73.68%; }

/* ---------- sliders (gallery + bedroom strip) ---------- */
.gallery {
  position: relative;
  z-index: 2;
  margin-top: -11.04%;
  container-type: inline-size;
  --w: 64.86cqw;
  --gap: 1.04cqw;
}
.g-track { position: relative; height: calc(var(--w) * 521 / 934); overflow: hidden; }
.g-slide {
  position: absolute;
  top: 0;
  left: calc(50cqw - var(--w) / 2);
  width: var(--w);
  height: 100%;
  transform: translate3d(calc(var(--o, 0) * (var(--w) + var(--gap))), 0, 0);
  transition: transform .9s cubic-bezier(.6, .05, .25, 1), opacity .9s ease;
  opacity: 0;
}
.g-slide.is-cur { opacity: 1; }
.g-slide.is-side { opacity: .5; }
.g-slide img { width: 100%; height: 100%; object-fit: cover; }
.g-slide figcaption {
  position: absolute;
  left: 4.5%;
  bottom: 2.3rem;
  color: var(--c-on-dark);
  text-shadow: 0 0 1rem rgb(0 0 0 / .25);
  opacity: 0;
  transform: translateY(.8rem);
  transition: opacity .7s ease .35s, transform .7s ease .35s;
}
.g-slide.is-cur figcaption { opacity: 1; transform: none; }
.no-t, .no-t * { transition: none !important; }
.arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 3rem;
  height: 3rem;
  margin-top: -1.5rem;
  padding: .5rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: transform .3s ease, background-color .3s ease;
}
.arrow svg { width: 100%; height: 100%; display: block; }
.arrow:hover { background: rgb(0 0 0 / .18); transform: translateY(-.15rem); }
.arrow:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }
.gallery .arrow-prev { left: calc(25cqw - var(--w) / 2 - 1.5rem); }
.gallery .arrow-next { right: calc(25cqw - var(--w) / 2 - 1.5rem); }

/* ---------- rooms ---------- */
.rooms { margin-top: 7.1rem; }
.rooms-main { display: grid; grid-template-columns: 48.54% 51.46%; align-items: center; }
.rooms-text { padding-left: 10.42vw; padding-right: 2rem; margin-top: 4.6rem; }
.rooms-text .h-xl { margin-left: .56rem; }
.rooms-text .indent { display: block; padding-left: 5.2em; }
.rooms-text .h-md { color: var(--c-main); margin-top: 4.2rem; }
.rooms-text p { margin-top: 2.7rem; max-width: 33rem; }
.rooms-text .btn { margin-top: 3.3rem; margin-left: -1.19rem; }
.rooms-img { aspect-ratio: 741 / 603; overflow: hidden; }
.rooms-img img { width: 100%; height: 100%; object-fit: cover; }
.strip {
  position: relative;
  margin-top: 2rem;
  container-type: inline-size;
  --n: 4;
  --gap: .486cqw;
  --w: calc((100cqw - (var(--n) - 1) * var(--gap)) / var(--n));
}
.s-track { position: relative; height: calc(var(--w) * 198 / 354); overflow: hidden; }
.s-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--w);
  height: 100%;
  transform: translate3d(calc(var(--o, 0) * (var(--w) + var(--gap))), 0, 0);
  transition: transform .9s cubic-bezier(.6, .05, .25, 1), opacity .9s ease;
}
.s-slide img { width: 100%; height: 100%; object-fit: cover; }
.strip .arrow { width: 2.4rem; height: 2.4rem; margin-top: -1.2rem; }
.strip .arrow-prev { left: .8rem; }
.strip .arrow-next { right: .8rem; }

/* ---------- services ---------- */
.services {
  position: relative;
  margin-top: 8.5rem;
  padding: 12.3rem 8.82% 19.4rem 10.42%;
  background: var(--c-main);
  color: var(--c-on-dark);
  overflow: hidden;
}
.services > *:not(.services-bg) { position: relative; z-index: 1; }
.services-title { text-align: right; margin-right: calc(-1 * var(--track-xl)); }
.services-grid {
  display: grid;
  grid-template-columns: 550fr 547fr;
  column-gap: 4.58vw;
  margin-top: 3.6rem;
  text-align: right;
}
.s-col-l { padding-top: 7.56rem; }
.services-lead .h-md + p { margin-top: 1.8rem; }
.services-lead + .card { margin-top: 4.4rem; }
.card + .card { margin-top: 6rem; }
.card img { width: 94%; aspect-ratio: 516 / 288; object-fit: cover; }
.card .h-md { margin-top: 1.06rem; }
.card .h-md + p { margin-top: 1.4rem; }
.services-btn { margin-top: 1.6rem; margin-left: 2.86vw; }
.services-bg { position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 1440 / 619; overflow: hidden; }
.services-bg img { position: absolute; top: 0; left: 0; width: 100%; height: 131.5%; object-fit: cover; }
.services-bg::after {              /* green fade from the layout (mask 1 → 0, curve 3.69) */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    color-mix(in srgb, var(--c-main) 99.7%, transparent) 0%,
    color-mix(in srgb, var(--c-main) 96.3%, transparent) 25%,
    color-mix(in srgb, var(--c-main) 84.3%, transparent) 50%,
    color-mix(in srgb, var(--c-main) 63%, transparent) 70%,
    color-mix(in srgb, var(--c-main) 37%, transparent) 85%,
    color-mix(in srgb, var(--c-main) 0%, transparent) 100%);
}

/* ---------- footer ---------- */
.ftr {
  position: relative;
  overflow: hidden;
  background: var(--c-accent);
  color: var(--c-on-dark);
  padding: 3.8rem 5% 5.8rem 7.36%;
  font-size: .9375rem;             /* 15px */
}
.ftr-mark { position: absolute; left: 61.65%; top: 5.4rem; width: 46.4%; aspect-ratio: 75.65 / 61.01; fill: currentColor; opacity: .12; pointer-events: none; }
.ftr-grid { position: relative; display: grid; grid-template-columns: 28.9% 20.1% 1fr; }
.ftr-logo { display: block; width: 4.63rem; height: 3.73rem; fill: currentColor; }
.f-brand { margin-top: 2.2rem; }
.f-brand + p { margin-top: .56rem; }
.ftr p + p { margin-top: 1.125rem; }
.f-col > .f-h:first-child { margin-top: .9rem; }
.f-loc { margin-top: 3.6rem; }
.f-loc + p { margin-top: 1.56rem !important; }
.f-links { margin-top: 1.4rem; }
.f-links li + li { margin-top: 1.125rem; }
.f-links a { transition: opacity .3s ease; }
.f-links a:hover { opacity: .7; }
.f-h + p { margin-top: 1.8rem; }
.ftr .f-gap { margin-top: 1.56rem; }
.ftr .f-gap + .f-gap { margin-top: 1.125rem; }
.f-follow { margin-top: 3.5rem; }
.f-follow + p { margin-top: 2.1rem; }
.ftr .f-copy { margin-top: 3rem; }

/* ---------- demo badge (every demo page) ---------- */
.demo-badge {
  position: fixed;
  left: .75rem;
  bottom: .75rem;
  z-index: 60;
  padding: .3rem .75rem;
  border-radius: 999px;
  background: rgb(0 0 0 / .55);
  color: #fff;
  font: 400 11px/1.4 var(--f-body);
  letter-spacing: .04em;
  transition: background-color .3s ease;
}
.demo-badge:hover { background: rgb(0 0 0 / .8); }

/* ---------- reveal / fade (reverses when scrolling back up) ---------- */
.fx { transition: opacity .9s ease, transform .9s cubic-bezier(.2, .65, .3, 1); }
html.js .fx:not(.in) { opacity: 0; }
html.js .fx-up:not(.in) { transform: translateY(1.6rem); }
html.js .fx-l:not(.in) { transform: translateX(-2.2rem); }
html.js .fx-r:not(.in) { transform: translateX(2.2rem); }
.d1 { transition-delay: .12s; }
.d2 { transition-delay: .24s; }
.d3 { transition-delay: .36s; }
.d4 { transition-delay: .5s; }
.d5 { transition-delay: .7s; }
.d6 { transition-delay: .85s; }
.d7 { transition-delay: 1s; }
.d8 { transition-delay: 1.15s; }
.s-slide.fx { transition: transform .9s cubic-bezier(.6, .05, .25, 1), opacity .9s ease; }
.s-slide.fx.d5 { transition-delay: 0s, .7s; }
.s-slide.fx.d6 { transition-delay: 0s, .85s; }
.s-slide.fx.d7 { transition-delay: 0s, 1s; }
.s-slide.fx.d8 { transition-delay: 0s, 1.15s; }

/* =========================================================
   Mobile layout: phones + tablets in portrait
   (landscape phones/tablets use the desktop layout)
   ========================================================= */
@media (orientation: portrait) and (max-width: 1100px) {
  html { font-size: 16px; }
  body { font-size: 1rem; line-height: 1.55; }
  .h-xl { font-size: 1.5rem; letter-spacing: .25em; line-height: 1.3; }
  .h-md { font-size: 1.2rem; }
  p + p { margin-top: 1rem; }
  br.dk { display: none; }

  .hdr { height: 4rem; display: flex; align-items: center; padding: 0 20%; }
  .hdr::before { height: 9rem; }
  .nav-a { display: none; }
  .nav { flex: none; }
  .logo { position: static; display: block; width: 2.6rem; height: 2.1rem; }
  .icons { position: static; flex: 1; justify-content: space-between; margin-left: 8%; gap: .25rem; }
  .icons svg { transform: scale(1.35); }

  .hero-text .h-xl { font-size: 1.45rem; letter-spacing: .28em; padding-left: .28em; max-width: 21rem; }
  .hero-sub { font-size: 1rem; letter-spacing: .12em; padding-left: .12em; margin-top: .75rem; line-height: 1.4; max-width: 19rem; }
  .hero-text .btn { margin-top: 1.6rem; }

  .coastal { padding-top: 4.5rem; }
  .coastal-head { padding: 0 1.5rem; }
  .coastal-head .h-xl { padding-left: .25em; }
  .coastal-lead { margin-top: 1.1rem; }
  .coastal-grid { margin-top: 3rem; padding: 0 1.5rem; grid-template-columns: 1fr; row-gap: 2.5rem; }
  .item .h-md { margin-bottom: .8rem; }
  .item p, .item:nth-child(even) p { max-width: none; }
  .band { margin-top: -3rem; aspect-ratio: 2250 / 2813; }
  .band img { object-position: center; }
  .band::after { height: 60%; background: linear-gradient(var(--c-bg) 12%, color-mix(in srgb, var(--c-bg) 0%, transparent)); }
  .band-btn { top: 24%; left: calc(50% - 5.71rem); }

  .gallery { margin-top: -12%; --w: 84cqw; --gap: 2cqw; }
  .g-slide figcaption { left: 1rem; bottom: 1rem; font-size: 1rem; }
  .gallery .arrow { width: 2.4rem; height: 2.4rem; margin-top: -1.2rem; padding: .35rem; }
  .gallery .arrow-prev { left: calc(8cqw - 1.2rem); }
  .gallery .arrow-next { right: calc(8cqw - 1.2rem); }

  .rooms { margin-top: 4.5rem; }
  .rooms-main { grid-template-columns: 1fr; }
  .rooms-text { padding: 0 1.5rem; margin-top: 0; }
  .rooms-text .h-xl { margin-left: 0; }
  .rooms-text .indent { padding-left: 2.6em; }
  .rooms-text .h-md { margin-top: 1.6rem; }
  .rooms-text p { margin-top: 1.1rem; max-width: none; }
  .rooms-text .btn { margin-top: 1.8rem; margin-left: 0; }
  .rooms-img { margin-top: 2.5rem; aspect-ratio: 4 / 5; }
  .strip { margin-top: .6rem; --n: 2; --gap: 1.5cqw; }

  .services { margin-top: 4.5rem; padding: 4.5rem 1.5rem 14rem; text-align: center; }
  .services-title { text-align: center; margin-right: 0; padding-left: .25em; }
  .services-grid { display: flex; flex-direction: column; margin-top: 1.4rem; text-align: center; }
  .s-col { display: contents; }
  .services-lead { order: 0; }
  .s-col-l .card:first-child { order: 1; }
  .s-col-r .card:nth-of-type(1) { order: 2; }
  .s-col-l .card:last-child { order: 3; }
  .s-col-r .card:nth-of-type(2) { order: 4; }
  .services-lead .h-md + p { margin-top: 1.2rem; }
  .services-lead + .card, .card + .card, .card { margin-top: 3rem; }
  .card img { width: 100%; }
  .card .h-md { margin-top: 1.1rem; }
  .card .h-md + p { margin-top: .8rem; }
  .services-btn { display: flex; margin: 3rem auto 0; }
  .services-bg { aspect-ratio: 2250 / 3125; }
  .services-bg img { height: 100%; }

  .ftr { padding: 3.2rem 1.5rem 5rem; font-size: .9375rem; line-height: 1.55; }
  .ftr-mark { left: 38%; top: 2rem; width: 85%; }
  .ftr-grid { grid-template-columns: 1fr; row-gap: 2.8rem; }
  .f-brand { margin-top: 1.4rem; }
  .f-col > .f-h:first-child { margin-top: 0; }
  .f-loc { margin-top: 2.6rem; }
  .f-loc + p, .f-h + p { margin-top: 1rem !important; }
  .f-links { margin-top: 1rem; }
  .f-links li + li { margin-top: .7rem; }
  .f-follow { margin-top: 2.6rem; }
  .ftr .f-copy { margin-top: 2.4rem; }
}

/* tablets in portrait: the phone layout, scaled to fit the screen */
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1100px) {
  html { font-size: min(4.1026vw, 1.8957vh); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; }
}