/* Olam by Plasseril
   ─────────────────────────────────────────────────────────────────────
   Type-mosaic + ripple, on a light green/teal ground.

   The green is not arbitrary: BRIEF §13 notes that every window in this
   house blows out to hot high-key green, and that "green is the only loud
   colour — it comes from the photos, so never fight it". The logo's gold
   stays as a small accent so the owners' mark still belongs on the page.

   Contrast rule that governs the palette: --gold measures ~2.2:1 on the
   paper and is therefore only ever a rule, a mark or huge display type —
   never body copy. Everything that carries meaning is teal-700 or darker.
                                                                          */

/* ─── tokens ─────────────────────────────────────────────────────────── */
:root{
  --paper:#F894F7F2;              /* overridden immediately below */
  --paper:#F1F7F2;
  --paper-2:#E4EFE7;
  --surface:#FFFFFF;

  --teal-900:#0F2E27;   /* body ink            13.7:1 on paper */
  --teal-800:#123F35;
  --teal-700:#17564A;   /* secondary text       7.9:1 on paper */
  --teal-600:#1E7A66;   /* links, primary       4.8:1 on paper */
  --teal-400:#3FA88C;
  --teal-200:#A8D5C5;
  --teal-100:#D3E9DF;

  --gold:#BCA36D;       /* the logo gold — decorative only */
  --gold-dark:#9E7D45;
  --gold-light:#DAC28A;

  --display:"Cormorant Garamond",Cormorant,Georgia,"Times New Roman",serif;
  --body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,
         "Helvetica Neue",Arial,sans-serif;

  --gut:clamp(20px,5vw,64px);
  --stack:clamp(56px,9vw,128px);
  --measure:64ch;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--teal-900);
  font-family:var(--body);
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; height:auto; display:block}

:focus-visible{
  outline:2px solid var(--teal-600);
  outline-offset:3px;
  border-radius:3px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--teal-900); color:#fff; padding:12px 20px;
  text-decoration:none;
}
.skip:focus{left:8px; top:8px}

/* ─── the cloud background ───────────────────────────────────────────── */
/* Vanta CLOUDS on vendored three.js, behind a paper veil. Decorative only:
   it takes no pointer events, and vanta-bg.js does not start it at all
   under reduced motion or without WebGL. Sections that need an opaque
   ground paint their own, so the sky shows through the paper only. */
#vanta-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
}
/* The veil is what makes drifting clouds safe behind text: the sky and the
   cloud shadows are far too contrasty on their own. Everything the reader
   reads sits on this near-paper wash, never on the raw sky. */
#vanta-veil{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:rgba(241,247,242,.40);
}
body > *:not(#vanta-bg):not(#vanta-veil){position:relative; z-index:2}

/* ─── scroll reveal ──────────────────────────────────────────────────── */
/* Applied by script.js only when motion is allowed, so content is never
   hidden from a reader whose browser blocks or fails the script. */
.js-reveal{opacity:0; transform:translateY(22px)}
.js-reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}

/* ─── shared type ────────────────────────────────────────────────────── */
.eyebrow{
  font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--teal-700); margin:0 0 16px; font-weight:700;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--gold-dark); flex:none;
}

.section-title{
  font-family:var(--display); font-weight:300;
  font-size:clamp(34px,5.4vw,68px);
  line-height:1.05; letter-spacing:-.012em;
  margin:0 0 22px; color:var(--teal-900);
}
.section-title i{font-style:italic; color:var(--teal-600)}

.section-lede{
  max-width:var(--measure);
  font-size:clamp(17px,1.35vw,20px);
  color:var(--teal-700); margin:0 0 40px;
}

.link{color:var(--teal-700); text-underline-offset:4px}
.link:hover{color:var(--teal-900)}

/* ─── top bar ────────────────────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:clamp(16px,4vw,48px);
  padding:12px var(--gut);
  background:rgba(241,247,242,.88);
  backdrop-filter:blur(12px) saturate(1.3);
  border-bottom:1px solid var(--teal-100);
  transition:box-shadow .3s var(--ease), background .3s var(--ease);
}
.topbar.is-stuck{box-shadow:0 6px 28px -18px rgba(15,46,39,.6)}
.topbar__mark{display:block; flex:none}
.topbar__mark img{width:92px; height:auto}
.topbar__nav{display:flex; gap:clamp(14px,2.4vw,30px); margin-right:auto}
.topbar__nav a{
  position:relative; color:var(--teal-800); text-decoration:none;
  font-size:14px; letter-spacing:.02em; padding:6px 0;
}
/* the underline grows from the left rather than fading in */
.topbar__nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--teal-600); transform:scaleX(0); transform-origin:left;
  transition:transform .32s var(--ease);
}
.topbar__nav a:hover::after,
.topbar__nav a:focus-visible::after,
.topbar__nav a[aria-current="true"]::after{transform:scaleX(1)}
.topbar__nav a[aria-current="true"]{color:var(--teal-700)}

.topbar__cta{
  flex:none; position:relative; overflow:hidden;
  min-height:44px; display:inline-flex; align-items:center;
  background:var(--teal-600); color:#fff; text-decoration:none;
  font-size:14px; letter-spacing:.03em; font-weight:600;
  padding:10px 22px; border-radius:999px;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.topbar__cta:hover{background:var(--teal-700); transform:translateY(-1px)}

/* reading-progress bar, driven by script.js */
.topbar__progress{
  position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  background:var(--teal-400); transform:scaleX(var(--p,0));
  transform-origin:left; pointer-events:none;
}

@media (max-width:820px){
  .topbar__nav{display:none}
  .topbar__mark{margin-right:auto}
}

/* ─── hero ───────────────────────────────────────────────────────────── */
.hero{position:relative; height:min(76vh,700px); overflow:hidden}
.hero__photo{width:100%; height:100%; object-fit:cover}
/* a soft green wash ties the photograph to the page ground */
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(15,46,39,.10) 0%, rgba(15,46,39,0) 34%,
    rgba(241,247,242,.10) 82%, var(--paper) 100%);
}
.hero__cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:2; color:#fff;
  filter:drop-shadow(0 1px 4px rgba(15,46,39,.6));
}

.ripple__ring{
  stroke:currentColor; stroke-width:1.2; fill:none;
  transform-origin:30px 30px; opacity:0;
  animation:ripple 3.4s ease-out infinite;
  animation-delay:calc(var(--i) * 1.13s);
}
@keyframes ripple{
  0%{transform:scale(.35); opacity:0}
  18%{opacity:.9}
  100%{transform:scale(2.6); opacity:0}
}

/* ─── nameplate ──────────────────────────────────────────────────────── */
.nameplate{
  padding:clamp(36px,6vw,76px) var(--gut) clamp(24px,4vw,48px);
  max-width:1400px; margin:0 auto;
}
.nameplate__title{
  font-family:var(--display); font-weight:300;
  font-size:clamp(66px,14vw,188px);
  line-height:.86; letter-spacing:-.022em;
  color:var(--teal-900); margin:0 0 24px;
}
.nameplate__by{
  display:block; font-family:var(--body);
  font-size:clamp(12px,1.35vw,17px);
  letter-spacing:.38em; text-transform:uppercase;
  color:var(--teal-700); margin-top:18px;
}
.nameplate__tag{
  color:var(--teal-700); font-size:clamp(17px,1.5vw,21px);
  max-width:46ch; margin:0;
}

/* ─── welcome ────────────────────────────────────────────────────────── */
.welcome{padding:var(--stack) var(--gut); max-width:1180px; margin:0 auto}
.welcome__lede{
  font-family:var(--display); font-weight:300;
  font-size:clamp(26px,3.6vw,46px); line-height:1.2;
  max-width:22ch; margin:0 0 26px; color:var(--teal-700);
}
.welcome__lede b{font-weight:300; color:var(--teal-900)}
.welcome__body{max-width:var(--measure); margin:0 0 30px; color:var(--teal-700)}
.welcome__aside{
  font-size:15px; color:var(--teal-700); margin:0; max-width:46ch;
  border-left:2px solid var(--gold); padding-left:16px;
}

/* ─── the type mosaic ────────────────────────────────────────────────── */
.mosaic{
  padding:0 var(--gut) var(--stack); max-width:1400px; margin:0 auto;
  display:grid; gap:clamp(18px,3vw,44px);
  grid-template-columns:repeat(12,1fr); align-items:center;
}
.mosaic__title{display:contents}

.w{
  font-family:var(--display); font-weight:300;
  line-height:.9; letter-spacing:-.02em;
  font-size:clamp(52px,11vw,150px); color:var(--teal-900);
}
/* Rows are explicit. Without them the browser auto-places each word and
   each picture on its own row, because the column spans overlap — which
   is exactly the stacked, un-interleaved layout this section exists to
   avoid. */
.w--find{grid-column:1 / 8;  grid-row:1; align-self:end}
.w--your{grid-column:1 / 8;  grid-row:3; text-align:right;
         font-style:italic; color:var(--teal-600)}
.w--olam{grid-column:1 / 13; grid-row:5; text-align:center;
         color:var(--gold-dark)}

.m{margin:0; overflow:hidden; border-radius:3px}
.m img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .9s var(--ease);
}
.m:hover img{transform:scale(1.04)}
.m--a{grid-column:8 / 13; grid-row:1 / 3; aspect-ratio:3/4}
.m--b{grid-column:1 / 8;  grid-row:2;     aspect-ratio:4/3}
.m--c{grid-column:1 / 13; grid-row:4;     aspect-ratio:16/7}

.mosaic__note{
  grid-column:1 / 13; grid-row:6;
  max-width:46ch; margin:clamp(8px,2vw,20px) auto 0;
  text-align:center; color:var(--teal-700); font-size:15px;
}

@media (max-width:720px){
  .mosaic{grid-template-columns:1fr}
  /* single column: let the source order run, drop the explicit rows */
  .w--find,.w--your,.w--olam,.m--a,.m--b,.m--c,.mosaic__note{
    grid-column:1; grid-row:auto;
  }
  .w--find{text-align:left}
  .w--your{text-align:right}
  .m--a{aspect-ratio:3/4}
  .m--c{aspect-ratio:4/3}
}

/* ─── the gallery: filter + lightbox ─────────────────────────────────── */
.gallery{padding:var(--stack) var(--gut); max-width:1400px; margin:0 auto}

.filters{
  display:flex; flex-wrap:wrap; gap:8px; margin:0 0 32px; padding:0;
  list-style:none;
}
.filters button{
  font:inherit; font-size:14px; letter-spacing:.02em;
  padding:9px 18px; min-height:44px; border-radius:999px; cursor:pointer;
  color:var(--teal-700); background:transparent;
  border:1px solid var(--teal-200);
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease);
}
.filters button:hover{border-color:var(--teal-400); background:var(--teal-100)}
.filters button[aria-pressed="true"]{
  background:var(--teal-600); border-color:var(--teal-600);
  color:#fff; font-weight:600;
}
.filters .count{opacity:.72; font-variant-numeric:tabular-nums}

.tiles{
  display:grid; gap:clamp(12px,1.8vw,22px);
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  /* portrait and landscape tiles sit side by side, so let each keep its own
     height instead of stretching to the tallest in its row */
  align-items:start;
}
.tile{
  margin:0; position:relative; overflow:hidden; border-radius:4px;
  background:var(--teal-100);
}
.tile[hidden]{display:none}
.tile button{
  display:block; width:100%; padding:0; border:0; background:none;
  cursor:zoom-in; font:inherit; color:inherit; text-align:left;
}
.tile img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  transition:transform .8s var(--ease), filter .5s var(--ease);
}
.tile--tall img{aspect-ratio:3/4}
.tile:hover img{transform:scale(1.05)}
.tile__cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:26px 16px 13px; font-size:14px; color:#fff;
  /* colour and image set separately: a second `background:` shorthand
     would reset the colour to transparent, which is exactly how the
     caption ended up sitting on bare photograph. */
  background-color:rgba(9,28,24,.86);
  background-image:linear-gradient(to top,rgba(9,28,24,.6),rgba(9,28,24,0));
  transform:translateY(6px); opacity:0;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.tile:hover .tile__cap,
.tile button:focus-visible .tile__cap{opacity:1; transform:none}
.tiles__empty{color:var(--teal-700); padding:20px 0}

/* lightbox */
.lightbox{
  border:0; padding:0; max-width:100vw; max-height:100vh;
  width:100%; height:100%; background:rgba(9,28,24,.96);
}
.lightbox::backdrop{background:rgba(9,28,24,.9)}
.lightbox__inner{
  height:100%; display:grid; grid-template-rows:1fr auto;
  gap:14px; padding:clamp(12px,3vw,40px);
}
.lightbox__stage{
  display:grid; place-items:center; min-height:0; position:relative;
}
.lightbox__stage img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; border-radius:3px;
}
.lightbox__bar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  color:#DFEDE5; font-size:14px;
}
.lightbox__cap{margin:0; flex:1 1 240px; min-width:0}
.lightbox__count{font-variant-numeric:tabular-nums; opacity:.75}
.lb-btn{
  font:inherit; cursor:pointer; color:#fff;
  background:#14342C; border:1px solid rgba(255,255,255,.42);
  width:44px; height:44px; border-radius:999px; display:grid;
  place-items:center; font-size:18px; line-height:1;
  transition:background .2s var(--ease);
}
.lb-btn:hover{background:#1E4C40; border-color:#fff}
.lightbox :focus-visible{outline-color:#fff}

/* ─── facilities ─────────────────────────────────────────────────────── */
.facilities{background:var(--paper-2); padding:var(--stack) var(--gut)}
.facilities__inner{max-width:1400px; margin:0 auto}
.facilities__list{
  margin:0; padding:0; list-style:none;
  display:grid; gap:0 clamp(18px,3vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.facilities__list li{
  display:flex; align-items:baseline; gap:12px;
  padding:14px 0; border-bottom:1px solid var(--teal-200);
  font-size:15px; color:var(--teal-800);
}
.facilities__list li::before{
  content:""; flex:none; width:7px; height:7px; border-radius:50%;
  border:1.5px solid var(--teal-400); transform:translateY(-1px);
  transition:background .3s var(--ease), box-shadow .3s var(--ease);
}
.facilities__list li:hover::before{
  background:var(--teal-400);
  box-shadow:0 0 0 4px rgba(63,168,140,.22);
}

/* ─── island ─────────────────────────────────────────────────────────── */
.island{padding:var(--stack) var(--gut); max-width:1400px; margin:0 auto}
.island__hero{margin:0 0 clamp(24px,4vw,56px); overflow:hidden; border-radius:4px}
.island__hero img{width:100%; aspect-ratio:16/9; object-fit:cover}
.island__hero figcaption,
.island__strip figcaption{
  padding-top:12px; color:var(--teal-700); font-size:15px; max-width:52ch;
}

/* Synthetic images carry a visible label. A reader must never have to guess
   which pictures are photographs of the actual place. */
.tag{
  display:inline-block; font-weight:700;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:#fff; background:var(--teal-700);
  padding:3px 8px; border-radius:2px; margin-right:9px; vertical-align:1px;
}

/* the island facts, as a small tab strip */
.facts{margin-bottom:clamp(32px,5vw,72px)}
.facts__tabs{
  display:flex; gap:6px; flex-wrap:wrap; margin:0 0 20px; padding:0;
  list-style:none; border-bottom:1px solid var(--teal-200);
}
.facts__tabs button{
  font:inherit; font-size:15px; cursor:pointer; background:none; border:0;
  padding:11px 18px; min-height:44px; color:var(--teal-700);
  border-bottom:2px solid transparent;
  margin-bottom:-1px; transition:color .25s var(--ease), border-color .25s var(--ease);
}
.facts__tabs button:hover{color:var(--teal-900)}
.facts__tabs button[aria-selected="true"]{
  color:var(--teal-700); border-bottom-color:var(--teal-600); font-weight:600;
}
.facts__panel{max-width:60ch}
.facts__panel[hidden]{display:none}
.facts__panel h3{
  font-family:var(--display); font-weight:400;
  font-size:clamp(22px,2.4vw,30px); margin:0 0 10px; color:var(--teal-800);
}
.facts__panel p{margin:0; color:var(--teal-700)}

.island__strip{
  display:grid; gap:clamp(16px,2.6vw,32px);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.island__strip figure{margin:0; overflow:hidden}
.island__strip img{
  width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:4px;
  transition:transform .8s var(--ease);
}
.island__strip figure:hover img{transform:scale(1.04)}

/* ─── finding us ─────────────────────────────────────────────────────── */
.finding{
  padding:var(--stack) var(--gut); max-width:1400px; margin:0 auto;
  border-top:1px solid var(--teal-200);
}
.finding__grid{
  display:grid; gap:clamp(28px,5vw,80px);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.distances{margin:0}
.distances > div{
  display:flex; flex-wrap:wrap; gap:2px 16px;
  justify-content:space-between; align-items:baseline;
  padding:15px 0; border-bottom:1px solid var(--teal-200);
}
.distances dt{color:var(--teal-900); font-size:16px}
.distances dd{margin:0; text-align:right; color:var(--teal-700); font-size:15px; font-weight:600}
.distances dd span{display:block; color:var(--teal-700); font-size:13px; font-weight:400}
.finding h3{
  font-family:var(--display); font-weight:400;
  font-size:clamp(20px,2.2vw,26px); margin:0 0 12px; color:var(--teal-800);
}
.finding address{font-style:normal; color:var(--teal-700); margin-bottom:10px}
.pluscode{font-size:14px; color:var(--teal-700); margin:0 0 18px}

/* ─── enquiry ────────────────────────────────────────────────────────── */
.enquiry{background:var(--teal-900); color:#EAF3EE; padding:var(--stack) var(--gut)}
.enquiry__inner{max-width:1080px; margin:0 auto}
.enquiry .eyebrow{color:var(--teal-200)}
.enquiry .eyebrow::before{background:var(--gold)}
.enquiry .section-title{color:#fff}
.enquiry .section-lede{color:#C9DCD3; margin-bottom:30px}
.enquiry :focus-visible{outline-color:var(--teal-200)}

.enquiry__actions{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:44px}
.btn{
  display:inline-block; font:inherit; font-size:15px; letter-spacing:.02em;
  padding:13px 24px; min-height:44px; border-radius:999px; cursor:pointer;
  text-decoration:none; color:#fff; background:transparent;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.4);
  transition:background .25s var(--ease), transform .25s var(--ease),
             border-color .25s var(--ease);
}
.btn:hover{background:rgba(255,255,255,.1); border-color:#fff; transform:translateY(-1px)}
.btn--primary{
  background:var(--teal-400); border-color:var(--teal-400);
  color:var(--teal-900); font-weight:700;
}
.btn--primary:hover{background:var(--teal-200); border-color:var(--teal-200)}

/* form + live preview, side by side */
.enquiry__split{
  display:grid; gap:clamp(24px,4vw,56px);
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  align-items:start;
  border-top:1px solid rgba(255,255,255,.18); padding-top:32px;
}
@media (max-width:860px){ .enquiry__split{grid-template-columns:1fr} }

.form__note{font-size:14px; color:#B9D0C6; margin:0 0 22px; max-width:52ch}
.form__row{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.field{margin:0 0 16px; display:flex; flex-direction:column; gap:6px}
.field label{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal-200);
}
.field input,.field textarea{
  font:inherit; font-size:16px;      /* 16px keeps iOS from zooming */
  color:#fff; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.28); border-radius:4px;
  padding:11px 13px; width:100%;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.field textarea{resize:vertical; min-height:82px}
.field input::placeholder,.field textarea::placeholder{color:#93AEA4}
.field input:hover,.field textarea:hover{border-color:rgba(255,255,255,.5)}
.field input:focus,.field textarea:focus{background:rgba(255,255,255,.12)}
.field__hint{font-size:13px; color:var(--teal-200); letter-spacing:0; text-transform:none}

/* the live message preview — shows exactly what WhatsApp will receive */
.preview{
  background:#16352D; border:1px solid rgba(255,255,255,.2);
  border-radius:10px; padding:20px; position:sticky; top:88px;
}
.preview h3{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--teal-200); margin:0 0 14px; font-weight:700;
}
.preview__bubble{
  background:var(--teal-700); border-radius:12px 12px 12px 3px;
  padding:14px 16px; margin:0;
  font-size:15px; line-height:1.5; color:#fff;
  white-space:pre-wrap; word-break:break-word;
  min-height:76px;
}
.preview__meta{font-size:13px; color:#B9D0C6; margin:12px 0 0}

/* ─── footer ─────────────────────────────────────────────────────────── */
.foot{
  background:var(--teal-900); color:#EAF3EE; text-align:center;
  padding:clamp(40px,7vw,84px) var(--gut) clamp(32px,5vw,56px);
  border-top:1px solid rgba(255,255,255,.12);
}
.foot__inner{max-width:640px; margin:0 auto}
.foot__mark{width:88px; height:88px; margin:0 auto 20px; color:var(--gold)}
.foot__signoff{
  font-family:var(--display); font-weight:300;
  font-size:clamp(24px,3.4vw,38px); margin:0 0 24px; color:#fff;
}
.foot__links{display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:center; margin-bottom:24px}
.foot__links a{color:var(--teal-200); font-size:15px; text-underline-offset:4px}
.foot__links a:hover{color:#fff}
.foot__badge{font-size:14px; color:#A8C3B8; margin:0 0 10px}
.foot__legal{font-size:13px; color:#8FAEA3; margin:0}
.foot :focus-visible{outline-color:var(--teal-200)}

/* ─── reduced motion ─────────────────────────────────────────────────── */
/* Honoured completely. The reveal class is never applied by the script in
   this mode, so nothing can be left invisible. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js-reveal{opacity:1; transform:none}
  .ripple__ring{opacity:.65; transform:scale(1)}
  .ripple__ring:nth-child(2){transform:scale(1.6)}
  .ripple__ring:nth-child(3){transform:scale(2.2)}
  .m:hover img,.tile:hover img,.island__strip figure:hover img{transform:none}
}

/* ─── print ──────────────────────────────────────────────────────────── */
@media print{
  .topbar,.hero__cue,.enquiry__actions,.form,.preview,.filters{display:none}
  body{background:#fff; color:#000}
  .hero{height:auto}
  .tile[hidden]{display:block !important}
}