/* Canouan Estate website V1: design mock-up (Arthur, 12 Oct 2026)
   One family (Jost, the logo's geometric letter), white ground, sea ink.
   Photographs carry the page; type and hairlines do the rest. */

@font-face { font-family: 'Cormorant'; src: url('fonts/cormorant-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Cormorant'; src: url('fonts/cormorant-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face {
  font-family: 'Jost';
  src: url('fonts/jost-wght.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --ink: #16323a;        /* deep water: type, buttons */
  --ink-soft: #4f6066;   /* secondary text */
  --grey: #91928a;       /* Canouan grey: logo, quiet meta */
  --ground: #ffffff;
  --mist: #eef3f1;       /* the lagoon at its palest: fact bands */
  --lagoon: #1e7475;     /* links, focus */
  --line: rgba(22, 50, 58, 0.16);
  --placeholder: #a7562d; /* mock-up only: marks facts still to confirm */

  --f: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;
  --serif: 'Cormorant', 'Cormorant Garamond', Georgia, serif; /* display: the Estate's printed voice (Island Joy), 15 Oct 2026 */
  --gutter: 20px;
  --max: 1320px;
}
@media (min-width: 900px) { :root { --gutter: 48px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--ground);
  color: var(--ink);
  font: 400 17px/1.6 var(--f);
  -webkit-font-smoothing: antialiased;
}
img { display: block; width: 100%; height: auto; }
a { color: inherit; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* type */
.label {
  font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-soft);
}
.display {
  font-weight: 300; font-size: clamp(40px, 7vw, 84px); line-height: 1.02; letter-spacing: -0.015em;
}
h2 { font-weight: 300; font-size: clamp(30px, 4vw, 48px); line-height: 1.1; letter-spacing: -0.01em; }
h3 { font-weight: 400; font-size: 22px; line-height: 1.2; }
.lead { font-size: clamp(19px, 2vw, 22px); line-height: 1.5; font-weight: 300; max-width: 34em; }
p { max-width: 36em; }
.tbc { color: var(--placeholder); border-bottom: 1px dotted var(--placeholder); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 0 26px; font: 500 13px/1 var(--f); letter-spacing: 0.18em; text-transform: uppercase;
  text-decoration: none; border: 1px solid var(--ink); background: var(--ink); color: #fff;
}
.btn.ghost { background: transparent; color: var(--ink); }
.btn.light { background: #fff; color: var(--ink); border-color: #fff; }
.btn.light.ghost { background: transparent; color: #fff; }

/* header: sits on the hero, scrolls away; Enquire stays reachable below */
.top {
  position: absolute; inset: 0 0 auto 0; z-index: 5;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px var(--gutter);
}
.top .logo { width: 124px; }
.top nav { display: none; }
.top .menu { display: flex; gap: 10px; align-items: center; }
.top .menu .btn { min-height: 44px; padding: 0 18px; }
.menu-word { color: #fff; font: 500 13px/44px var(--f); letter-spacing: 0.18em; text-transform: uppercase; }
@media (min-width: 900px) {
  .top { align-items: center; padding: 28px var(--gutter); }
  .top .logo { width: 220px; }
  .top nav { display: flex; gap: 34px; }
  .top nav a { color: #fff; text-decoration: none; font: 500 13px/1 var(--f); letter-spacing: 0.18em; text-transform: uppercase; }
  .menu-word { display: none; }
}
/* villa and inner pages: the header sits on white, never on a busy photograph */
.top.solid { position: relative; background: #fff; border-bottom: 1px solid var(--line); }
.top.solid nav a, .top.solid .menu-word { color: var(--ink); }
.top.solid .logo { width: 104px; }
@media (min-width: 900px) { .top.solid { padding: 20px var(--gutter); } .top.solid .logo { width: 200px; } }

/* display type in the serif (V1.1, 15 Oct 2026): headlines, villa names, the lead */
.display { font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 8.4vw, 112px); line-height: .96; letter-spacing: -0.01em; }
h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4.8vw, 60px); line-height: 1.04; letter-spacing: -0.005em; }
.lead { font-family: var(--serif); font-weight: 400; font-size: clamp(23px, 2.5vw, 29px); line-height: 1.32; }
.house h3 { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.1; }
.facts b { font-family: var(--serif); font-weight: 400; font-variant-numeric: lining-nums; }
em.serif, .serif { font-family: var(--serif); }

/* hero */
.hero { position: relative; height: 92svh; min-height: 560px; overflow: hidden; color: #fff; }
.hero img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.hero::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,25,30,.55) 0, rgba(10,25,30,0) 34%, rgba(10,25,30,0) 52%, rgba(10,25,30,.55) 100%); }
.hero .copy { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding-bottom: 40px; }
.hero .copy .wrap { display: grid; gap: 22px; }
.hero .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero .caption { font-size: 12px; letter-spacing: 0.06em; opacity: .85; }

/* sections */
section { padding: 72px 0; }
@media (min-width: 900px) { section { padding: 120px 0; } }
.head { display: grid; gap: 14px; margin-bottom: 36px; }
@media (min-width: 900px) { .head { grid-template-columns: 1fr 1fr; align-items: end; margin-bottom: 56px; } }

/* the brief: true sentences set as type */
.brief { border-top: 1px solid var(--line); }
.brief ol { list-style: none; display: grid; gap: 0; }
.brief li .tbc { display: inline-block; font-size: 14px; margin-left: 6px; }
.brief li { display: grid; grid-template-columns: 40px 1fr; gap: 8px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 19px; line-height: 1.45; font-weight: 300; }
.brief li .n { color: var(--grey); font-size: 13px; padding-top: 5px; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .brief ol { grid-template-columns: 1fr 1fr; column-gap: 64px; } .brief li .tbc { display: inline-block; font-size: 14px; margin-left: 6px; }
.brief li { font-size: 21px; } }

/* houses */
.houses { display: grid; gap: 44px 28px; }
@media (min-width: 700px) { .houses { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .houses { grid-template-columns: 1fr 1fr 1fr; } }
.house { text-decoration: none; display: grid; gap: 14px; }
.house .ph { aspect-ratio: 4 / 3; overflow: hidden; background: var(--mist); }
.house .ph img { height: 100%; object-fit: cover; transition: transform .3s ease; }
.house:hover .ph img { transform: scale(1.02); }
.house h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.house .meta { font-size: 14px; color: var(--ink-soft); letter-spacing: 0.02em; border-top: 1px solid var(--line); padding-top: 10px; display: flex; justify-content: space-between; }

/* the register: every house on one hairline table */
.register { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin-top: 64px; }
.register caption { text-align: left; margin-bottom: 14px; }
.register th { text-align: left; font: 500 12px/1 var(--f); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); padding: 12px 0; border-bottom: 1px solid var(--ink); }
.register td { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.register td:first-child { font-size: 18px; }
.register .hide-s { display: none; }
@media (min-width: 700px) { .register .hide-s { display: table-cell; } }

/* island frames */
.frames { display: grid; gap: 4px; grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .frames { grid-template-columns: repeat(4, 1fr); } }
.frame { position: relative; aspect-ratio: 3 / 4; overflow: hidden; color: #fff; text-decoration: none; }
.frame img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,25,30,.6), rgba(10,25,30,0) 50%); }
.frame span { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 14px; font-size: 18px; line-height: 1.25; }
.frame small { display: block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .85; margin-bottom: 4px; }

/* getting here */
.mist { background: var(--mist); }
.route { display: grid; gap: 40px; }
@media (min-width: 900px) { .route { grid-template-columns: 5fr 6fr; gap: 72px; align-items: center; } }
.legs { list-style: none; border-top: 1px solid var(--ink); }
.legs li { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.legs b { font-weight: 400; font-size: 18px; }
.legs em { font-style: normal; color: var(--ink-soft); font-size: 14px; grid-column: 1 / -1; }
.legs .t { font-variant-numeric: tabular-nums; }
.map svg { width: 100%; height: auto; }

/* a person */
.person { display: grid; gap: 28px; }
@media (min-width: 900px) { .person { grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; } }
.contact { border-top: 1px solid var(--ink); }
.contact a, .contact div { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-size: 18px; min-height: 44px; }
.contact span { color: var(--ink-soft); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; padding-top: 4px; }

/* footer */
footer { background: var(--ink); color: #dfe6e5; padding: 64px 0 40px; font-size: 15px; }
footer .cols { display: grid; gap: 28px; grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { footer .cols { grid-template-columns: 2fr 1fr 1fr 1fr; } }
footer ul { list-style: none; display: grid; gap: 10px; }
footer a { text-decoration: none; }
footer .logo { width: 210px; shape-rendering: geometricPrecision; }
footer .fine { margin-top: 56px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18); font-size: 13px; color: #a9b8b9; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

/* villa page */
.vhero { height: 78svh; min-height: 520px; }
.facts { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts div { flex: 1 1 50%; padding: 16px 0; display: grid; gap: 2px; }
.facts div + div { }
.facts b { font-weight: 300; font-size: 30px; line-height: 1.1; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .facts div { flex: 1 1 0; padding: 22px 0; } .facts b { font-size: 38px; } }
.jumps { position: sticky; top: 0; z-index: 4; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line);
  display: flex; gap: 26px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.jumps a { font: 500 12px/52px var(--f); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--ink-soft); }
.jumps a:first-child { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.gallery { display: grid; gap: 4px; grid-auto-flow: column; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery figure { scroll-snap-align: start; }
.gallery img { aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 900px) {
  .gallery { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(6, 1fr); overflow: visible; }
  .gallery figure:nth-child(1) { grid-column: span 4; grid-row: span 2; }
  .gallery figure:nth-child(1) img { aspect-ratio: auto; height: 100%; }
  .gallery figure { grid-column: span 2; }
}
.count { font-size: 13px; color: var(--ink-soft); margin-top: 12px; letter-spacing: .04em; }
.two { display: grid; gap: 40px; }
@media (min-width: 900px) { .two { grid-template-columns: 1fr 1fr; gap: 72px; } }
.list { list-style: none; border-top: 1px solid var(--ink); }
.list li { padding: 14px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; }
.list li small { color: var(--ink-soft); font-size: 14px; text-align: right; }
form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field label { font: 500 12px/1 var(--f); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.field input, .field select, .field textarea { font: 400 17px/1.4 var(--f); color: var(--ink); background: #fff; border: 0; border-bottom: 1px solid rgba(22,50,58,.4); padding: 10px 0; border-radius: 0; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sticky-enquire { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; display: flex; gap: 0; }
.sticky-enquire .btn { flex: 1; min-height: 56px; }
@media (min-width: 900px) { .sticky-enquire { display: none; } }

/* capture mode for proofs (?shot): fixed hero height so a tall window renders the whole page */
.shot .hero { height: 860px; min-height: 0; }
.shot .vhero { height: 760px; }
.shot .sticky-enquire { display: none; }
@media (min-width: 1100px) { #villas .houses { grid-template-columns: repeat(4, 1fr); } }

/* weddings photo strip */
.wstrip { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .wstrip { grid-template-columns: 0.8fr 1.4fr 1.4fr; } }
.wstrip figure, .wwide { margin: 0; }
.wstrip img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.wwide img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; display: block; }

/* long details stack under their label on phones, and sit in a measured column on desktop */
@media (max-width: 699px) {
  .list li { flex-direction: column; gap: 4px; }
  .list li small { text-align: left; }
}
@media (min-width: 700px) {
  .list li > small { max-width: 62%; }
}

/* header dropdowns (Marcia, 15 Oct 2026): every section opens to its pages */
.top nav .nav-item { position: relative; }
.top nav .drop { display: none; }
.top .call { display: none; }
@media (min-width: 900px) {
  .top nav { align-items: center; }
  .top nav .nav-item > a { display: inline-block; padding: 14px 0; }
  .top nav .drop {
    position: absolute; top: 100%; left: -22px; min-width: 270px; z-index: 20;
    background: #fff; border: 1px solid var(--line); padding: 10px 0;
    box-shadow: 0 18px 40px -24px rgba(10, 25, 30, .45);
  }
  .top nav .nav-item:hover .drop, .top nav .nav-item:focus-within .drop { display: block; }
  .top nav .drop a {
    display: block; padding: 10px 22px; color: var(--ink) !important;
    font: 400 15px/1.3 var(--f) !important; letter-spacing: 0 !important; text-transform: none !important;
  }
  .top nav .drop a:hover { background: var(--mist); }
  .top nav .drop small { display: block; font-size: 12px; color: var(--rust, #A7562D); margin-top: 2px; }
  .top .call { display: inline-block; color: #fff; text-decoration: none; font: 500 13px/44px var(--f); letter-spacing: 0.08em; margin-right: 8px; }
  .top.solid .call { color: var(--ink); }
}
/* phone menu panel: the pages listed under each section */
@media (max-width: 899px) {
  .top.open nav { justify-content: flex-start !important; padding-top: 96px !important; overflow-y: auto; gap: 18px !important; }
  .top.open nav .drop { display: grid; gap: 8px; padding: 8px 0 4px 2px; }
  .top.open nav .drop a { font: 300 17px/1.3 var(--f) !important; opacity: .85; }
  .top.open nav .drop small { display: block; font-size: 12px; opacity: .8; }
}

/* availability: booked or not bookable is said plainly, never hidden */
.status { color: #A7562D; }
.house .meta .status { flex-basis: 100%; font-size: 13px; }
.house .meta { flex-wrap: wrap; }

/* phone bar: call and enquire side by side */
.sticky-enquire { background: #fff; border-top: 1px solid var(--line); }
.sticky-enquire .btn { flex: 1; }

/* gallery: the first nine in the grid, all of them in the viewer */
.gallery button.gopen { all: unset; display: block; cursor: zoom-in; width: 100%; height: 100%; }
.gallery button.gopen:focus-visible { outline: 2px solid var(--lagoon); outline-offset: 2px; }
@media (min-width: 900px) { .gallery figure.more { display: none; } }
.count .gall { margin-top: 18px; }
.viewer { position: fixed; inset: 0; z-index: 50; background: #0b1a1e; display: grid; place-items: center; }
.viewer[hidden] { display: none; }
.viewer figure { margin: 0; display: grid; gap: 14px; justify-items: center; padding: 64px 16px 24px; }
.viewer img { max-width: min(92vw, 1600px); max-height: 80vh; width: auto; height: auto; object-fit: contain; }
.viewer figcaption { color: #dfe6e5; font-size: 14px; letter-spacing: .03em; text-align: center; }
.viewer button { position: absolute; background: none; border: 1px solid rgba(255,255,255,.35); color: #fff; min-width: 48px; min-height: 48px; cursor: pointer; font: 500 13px/1 var(--f); letter-spacing: .18em; text-transform: uppercase; }
.viewer .vclose { top: 16px; right: 16px; padding: 0 16px; }
.viewer .vprev { left: 16px; top: 50%; transform: translateY(-50%); font-size: 20px; }
.viewer .vnext { right: 16px; top: 50%; transform: translateY(-50%); font-size: 20px; }
@media (max-width: 699px) { .viewer .vprev, .viewer .vnext { top: auto; bottom: 18px; transform: none; } }

/* the Estate map (Marcia's legend, 15 Oct 2026): simple and legible; the drawn plate waits for V2 */
.mapwrap { display: grid; gap: 28px; }
@media (min-width: 900px) { .mapwrap { grid-template-columns: 3fr 1fr; gap: 48px; align-items: start; } }
.emap { width: 100%; height: auto; display: block; background: #DCEAE8; }
.emap .land path { fill: #FBFAF6; stroke: rgba(22,50,58,.55); stroke-width: 12; }
.emap .reef path { fill: none; stroke: var(--lagoon); stroke-width: 14; stroke-dasharray: 40 40; opacity: .5; }
.emap .sea { font: italic 400 30px var(--serif); fill: var(--lagoon); opacity: .8; }
.emap .p circle { fill: var(--grey); }
.emap .p text { font: 500 17px var(--f); letter-spacing: .12em; text-transform: uppercase; fill: var(--ink-soft); }
.emap .v circle { fill: var(--ink); stroke: #fff; stroke-width: 3; }
.emap .v text { font: 500 19px var(--f); fill: #fff; }
.emap .v.hi circle { fill: var(--lagoon); }
.emap .v.hi text { font-size: 22px; }
.emap-legend { list-style: none; border-top: 1px solid var(--ink); }
.emap-legend li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); align-items: start; }
.emap-legend .n { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font: 500 13px/26px var(--f); text-align: center; }
.emap-legend .n.q { background: #fff; color: var(--ink-soft); border: 1px solid var(--line); }
.emap-legend a, .emap-legend b { font: 400 21px/1.2 var(--serif); text-decoration: none; }
.emap-legend small { display: block; font-size: 13px; color: var(--ink-soft); }
.emap-legend small.tbc { color: var(--placeholder); border: 0; }
.emap-legend .status { color: #A7562D; }

/* home V1.1 */
.hero-sub { font: 400 clamp(17px, 1.6vw, 20px)/1.5 var(--f); max-width: 32em; opacity: .95; }
.intro-grid { display: grid; gap: 18px; margin-bottom: 56px; }
@media (min-width: 900px) { .intro-grid { grid-template-columns: 1fr 3fr; gap: 64px; align-items: start; margin-bottom: 80px; } }
.lead.big { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.25; max-width: 26em; }
.villa-grid { display: grid; gap: 56px 32px; }
@media (min-width: 700px) { .villa-grid { grid-template-columns: 1fr 1fr; } }
.villa-card { text-decoration: none; display: grid; gap: 16px; }
.villa-card .ph { aspect-ratio: 3 / 2; overflow: hidden; background: var(--mist); }
.villa-card .ph img { height: 100%; object-fit: cover; transition: transform .4s ease; }
.villa-card:hover .ph img { transform: scale(1.02); }
.villa-card h3 { font: 400 clamp(30px, 3vw, 40px)/1.05 var(--serif); }
.vc-set { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-top: 6px; }
.vc-facts { display: flex; gap: 22px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; font-size: 15px; color: var(--ink-soft); }
.villa-card .status { font-size: 14px; margin-top: 6px; }
.frames.eight { grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .frames.eight { grid-template-columns: repeat(4, 1fr); } }
.band { position: relative; min-height: 78svh; color: #fff; overflow: hidden; display: grid; align-items: end; padding: 0; }
.band > img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,25,30,.7), rgba(10,25,30,.05) 60%); }
.band-copy { position: relative; z-index: 2; padding: 80px 0 56px; }
.band-copy h2 { color: #fff; margin: 14px 0 16px; max-width: 14em; }
.band-copy p { max-width: 34em; }
.band-copy .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
#map .register { margin-top: 72px; }
.shot .band { min-height: 760px; }
.formnote { font-size: 13px; color: var(--ink-soft); margin-top: 12px; max-width: 34em; }

/* ---- V1.1 pages (16 Oct 2026) ---- */
.more-link { font: 500 13px/1 var(--f); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 6px; }
.page-head { padding: 72px 0 40px; }
@media (min-width: 900px) { .page-head { padding: 112px 0 56px; } }
.display.dark { color: var(--ink); }
.chapters { border-bottom: 1px solid var(--line); background: #fff; position: sticky; top: 0; z-index: 20; }
.chapters .wrap { display: flex; gap: 26px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.chapters .wrap::-webkit-scrollbar { display: none; }
.chapters a { font: 500 12px/1 var(--f); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; padding: 20px 0 18px; border-bottom: 2px solid transparent; }
.chapters a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.frames.nine { grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .frames.nine { grid-template-columns: repeat(3, 1fr); } .frames.nine .frame { aspect-ratio: 4 / 3; } }
.secs { border-top: 1px solid var(--ink); }
.chapter-sec { display: grid; gap: 10px; padding: 30px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .chapter-sec { grid-template-columns: 1fr 2fr; gap: 48px; padding: 40px 0; } }
.chapter-sec p { max-width: 36em; font-size: 18px; line-height: 1.65; }
.h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; }
.date { font: 500 12px/1.4 var(--f); letter-spacing: .18em; text-transform: uppercase; color: var(--lagoon); margin-bottom: 10px; }
.periods { display: grid; gap: 0; border-top: 1px solid var(--ink); }
@media (min-width: 900px) { .periods { grid-template-columns: repeat(3, 1fr); gap: 48px; } }
.periods article { padding: 28px 0; border-bottom: 1px solid var(--line); }
.periods article p:last-child { margin-top: 12px; }
.next-ch { padding: 0; }
.next-ch .wrap { padding-top: 0; padding-bottom: 72px; }
.frame.wide { display: block; aspect-ratio: 21 / 9; }
@media (max-width: 899px) { .frame.wide { aspect-ratio: 4 / 3; } }
.qa { border-top: 1px solid var(--ink); max-width: 860px; }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary { cursor: pointer; list-style: none; padding: 22px 40px 22px 0; position: relative; font: 400 clamp(22px, 2.2vw, 27px)/1.25 var(--serif); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: translateY(-75%) rotate(45deg); transition: transform .2s; }
.qa details[open] summary::after { transform: translateY(-25%) rotate(225deg); }
.qa details p { padding: 0 0 26px; max-width: 40em; font-size: 18px; line-height: 1.65; }
.tel-big { font: 400 clamp(34px, 4vw, 52px)/1.1 var(--serif); margin-bottom: 10px; }
.tel-big a, .contact-list a { text-decoration: none; border-bottom: 1px solid var(--line); }
.checked { margin-top: 18px; font-size: 13px; color: var(--ink-soft); }
.routes { margin-top: 48px; }
.routes td { vertical-align: top; padding-right: 18px; }
.note { margin-top: 18px; font-size: 14px; color: var(--ink-soft); max-width: 46em; }
.route-fig svg { width: 100%; height: auto; }
.foot-call { margin-top: 22px; line-height: 1.8; }
.foot-call a { color: #fff; }
@media (min-width: 900px) { .register .hide-s { display: table-cell; } }
.facts small.unit { font-size: 13px; color: var(--ink-soft); }
.facts b.status.small { font-size: 22px; line-height: 1.2; }
@media (max-width: 699px) { .emap .p text, .emap .sea { display: none; } .emap .v text { font-size: 26px; } .emap .v circle { r: 24; } }
.villa-card .ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.house .ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.facts b, .vc-facts, .register td, .tel-big { font-variant-numeric: lining-nums tabular-nums; }
/* header between tablet and wide desktop: everything on one line (16 Oct 2026) */
@media (min-width: 900px) { .top nav a, .top .call, .top .btn { white-space: nowrap; } }
@media (min-width: 900px) and (max-width: 1239px) {
  .top { padding-left: 32px; padding-right: 32px; }
  .top .logo, .top.solid .logo { width: 150px; }
  .top nav { gap: 18px; }
  .top nav .nav-item > a, .top nav > a { font-size: 12px; letter-spacing: .1em; }
  .top .call { display: none; }
}
/* floor plans: one scale for every villa (Alex, 17 Oct 2026). Every plan image is 40 px per metre and carries its
   width in metres (--m). Desktop shows 15.5 px per metre, so a cottage sits beside its house in true proportion and every
   villa's rooms read at the same size; phones show each plan the full width (true scale would shrink a cottage to a
   thumbnail), and "Open full size" is the same 40 px per metre everywhere. */
.plans { display: grid; gap: 34px; }
.plan { margin: 0; }
.plan-art { position: relative; background: #fff; outline: 1px solid var(--line); outline-offset: 12px; margin: 13px auto; max-width: calc(100% - 26px); }
.plan-art img { display: block; width: 100%; height: auto; }
.plan-art span { position: absolute; transform: translate(-50%, -50%); font: 500 10px/1.2 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); background: rgba(255,255,255,.82); padding: 2px 4px; white-space: nowrap; pointer-events: none; }
.plan figcaption { margin-top: 24px; font: 500 12px/1 var(--f); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); text-align: center; }
.plan-open { margin-left: 12px; color: var(--lagoon); letter-spacing: .12em; }
@media (max-width: 599px) { .plan-art span { font-size: 8px; letter-spacing: .08em; padding: 1px 2px; } }
@media (min-width: 900px) {
  .plans { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 48px 64px; }
  .plan { flex: none; width: max(calc(var(--m) * 15.5px + 26px), 300px); max-width: 100%; }
  .plan-art { width: calc(var(--m) * 15.5px); max-width: calc(100% - 26px); margin: 13px auto; }
  .plan figcaption { white-space: nowrap; }
  .plan-art span { font-size: 11px; }
}
/* Batu's changes, 16 Oct 2026 */
.copymail { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.copymail .addr { user-select: all; }
.copymail .copy { font: 500 10px/1 var(--f); letter-spacing: .16em; text-transform: uppercase; color: var(--lagoon); background: transparent; border: 1px solid currentColor; padding: 5px 8px; cursor: pointer; min-height: 26px; }
footer .copymail .copy { color: #cfe3e1; }
.copymail .copy:focus-visible { outline: 2px solid var(--lagoon); outline-offset: 2px; }
.bookform { display: grid; gap: 4px; }
.bookform input[type=date], .bookform input[type=number] { min-height: 46px; }
.props { list-style: none; border-top: 1px solid var(--ink); display: grid; }
@media (min-width: 900px) { .props { grid-template-columns: repeat(3, 1fr); gap: 0 40px; border-top: 0; } .props li { border-top: 1px solid var(--ink); } }
.props li { padding: 18px 0; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.props a { font: 400 26px/1.15 var(--serif); text-decoration: none; }
.props a::after { content: " \2197"; font-size: 16px; color: var(--lagoon); }
.props span { font-size: 15px; color: var(--ink-soft); }
footer .lhw { margin-top: 14px; font-size: 13px; color: #a9b8b9; letter-spacing: .04em; }

/* LHW and Leaders Club (Arthur, 16 Oct 2026): LHW's own logos, recoloured only */
.lhw-logo { margin: 8px 0 24px; }
.lhw-logo img { width: 240px; height: auto; }
.club-logo { display: block; width: 150px; height: auto; margin-bottom: 18px; }
footer a.lhw { display: inline-block; margin-top: 22px; opacity: .9; }
footer a.lhw img { width: 132px; height: auto; display: block; }

/* Map: villa numbers link to their villas; partner logos (Arthur, 16 Oct 2026) */
.emap a .v circle { transition: fill .15s; }
.emap a:hover .v circle, .emap a:focus .v circle { fill: var(--lagoon); }
.emap-legend a.n { display: block; font: 500 13px/26px var(--f); color: #fff; text-decoration: none; }
.emap-legend a.n:hover { background: var(--lagoon); }
.brand-intro { align-items: center; }
.club-brand { width: 220px; height: auto; display: block; }
@media (max-width: 699px) { .club-brand { width: 170px; margin-bottom: 8px; } }

/* Batu's review, 17 Oct 2026 (Arthur) */
.top .logo { width: 124px; }
@media (min-width: 900px) { .top .logo { width: 132px; } }
.lhw-head { display: none; }
@media (min-width: 1100px) { .lhw-head { display: inline-block; margin: 0 4px 0 6px; } .lhw-head img { height: 38px; width: auto; display: block; } }
.estate .props { grid-template-columns: 1fr; border-top: 1px solid var(--ink); gap: 0; }
.estate .props li { border-top: 0; }
.estate .props a::after { content: ""; }
.key-card { display: grid; gap: 8px; margin-top: 26px; padding: 22px 24px; background: var(--ink); color: #fff; text-decoration: none; border-radius: 2px; }
.key-card small { font: 500 12px/1 var(--f); letter-spacing: .22em; text-transform: uppercase; opacity: .8; }
.key-card span { font: 400 24px/1.25 var(--serif); }
.key-card b { font: 500 12px/1 var(--f); letter-spacing: .18em; text-transform: uppercase; color: #9fd3cf; margin-top: 6px; }
.key-card:hover b { text-decoration: underline; }
.srs { display: grid; gap: 34px; border-top: 1px solid var(--ink); padding-top: 30px; }
@media (min-width: 900px) { .srs { grid-template-columns: repeat(3, 1fr); gap: 48px; } }
.sr { display: grid; gap: 10px; align-content: start; }
.sr .sr-logo { height: 70px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; margin-bottom: 8px; }
.sr p { color: var(--ink-soft); }
.ik-head .ik-mark img { width: min(420px, 80%); height: auto; display: block; }
.ik-trio { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 18px 0 36px; padding-top: 14px; border-top: 1px solid var(--line); }
.ik-trio a { font: 500 12px/1.6 var(--f); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--ink-soft); }
.groupform { display: grid; gap: 14px; }
.groupform .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.groupform select { min-height: 46px; }
.form-msg { font-size: 15px; color: var(--ink-soft); }
.form-msg.err { color: #A7562D; }
@media (max-width: 599px) { .row2 { grid-template-columns: 1fr; } }
.tablewrap { overflow-x: auto; }
table.venues { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 560px; }
table.venues th { font: 500 11px/1 var(--f); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); text-align: left; padding: 0 12px 12px 0; border-bottom: 1px solid var(--ink); }
table.venues td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.venues td:first-child { font: 400 21px/1.2 var(--serif); }
table.venues td small { display: block; font: 400 13px/1.4 var(--f); color: var(--ink-soft); margin-top: 3px; }
.footnote { font-size: 14px; color: var(--ink-soft); max-width: 46em; border-top: 1px solid var(--line); padding-top: 14px; }
.groupform .check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.4; }
.groupform .check input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.credit { font-size: 12px; color: var(--ink-soft); letter-spacing: .04em; padding-top: 8px; padding-bottom: 0; }
.outlets { display: grid; gap: 0 40px; border-top: 1px solid var(--ink); }
@media (min-width: 700px) { .outlets { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .outlets { grid-template-columns: repeat(3, 1fr); } }
.outlet { padding: 22px 0; border-bottom: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.outlet h3 { font: 400 26px/1.15 var(--serif); }
.outlet p:not(.label) { color: var(--ink-soft); }
.outlet a { font-size: 14px; }
/* seven menu items + LHW + Book now: tighten between 900 and 1599 px; the phone number shows from 1600 px (it stays in the phone bar, the footer and Contact) */
@media (min-width: 900px) and (max-width: 1599px) {
  .top .call { display: none !important; }
  .top nav { gap: 20px; }
  .top nav .nav-item > a, .top nav > a { font-size: 12px; letter-spacing: .1em; }
}
@media (min-width: 900px) and (max-width: 1239px) {
  .top nav { gap: 14px; }
  .top nav .nav-item > a, .top nav > a { font-size: 11px; letter-spacing: .06em; }
  .top .menu .btn { padding: 0 12px; }
}
.estate .props li { display: block; padding: 16px 0; }
.estate .props a { display: block; font: 400 24px/1.2 var(--serif); }
.estate .props span { display: block; margin-top: 4px; font-size: 15px; }
.marina-crest { width: 120px; height: auto; display: block; }
.outlet small.label { display: block; }
@media (min-width: 1100px) { .lhw-head { margin: 0 0 0 18px; } .lhw-head img { height: 44px; } }
/* form fields: a little room inside the white boxes (Alex, 17 Oct 2026) */
.bookform .field input, .bookform .field select, .groupform .field input, .groupform .field select, .groupform .field textarea { padding: 10px 12px; }

/* cross-links in running text: lagoon colour, no underline (Alex, 17 Oct 2026: "the very big underline" under the
   home Estate paragraph; colour as the map's villa links). A hairline appears on hover. */
a.xl { color: var(--lagoon); text-decoration: none; }
a.xl:hover, a.xl:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
/* cross-links inside a list note stay inline at the note's size */
.props span a.xl, .estate .props span a.xl { display: inline; font: inherit; }
.props span a.xl::after { content: ""; }
.props span.lm, .estate .props span.lm { display: block; margin: 0; font-size: inherit; color: inherit; }
/* a phone number never breaks across lines (Alex, 17 Oct 2026) */
a[href^="tel:"] { white-space: nowrap; }
.contact-line .contact-mail { margin-top: 8px; font-size: 17px; color: var(--ink-soft); }
.contact-line a { color: var(--lagoon); text-decoration: none; }
.contact-line a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
/* restaurants with photographs (18 Oct 2026) */
.outlet .ph { aspect-ratio: 3 / 2; overflow: hidden; margin-bottom: 6px; }
.outlet .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.outlet .note { font: 500 12px/1.3 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--lagoon); }
.outlets { gap: 12px 40px; }
/* island chapter navigation: everything visible, wrapping onto two lines, no hidden sideways scroll
   (Batu, 18 Oct 2026: "some sort of indicator"; Alex: "put it onto two lines instead") */
.chapters .wrap { flex-wrap: wrap; overflow: visible; white-space: normal; gap: 0 26px; padding-top: 6px; padding-bottom: 6px; }
.chapters a { padding: 12px 0 10px; white-space: nowrap; }
@media (max-width: 699px) {
  .chapters { position: static; }
  .chapters .wrap { gap: 0 16px; }
  .chapters a { font-size: 11px; letter-spacing: .12em; padding: 10px 0 8px; }
}
.to-top { position: fixed; right: 18px; bottom: 22px; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.94); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font: 500 16px/1 var(--f); opacity: 0; pointer-events: none; transition: opacity .25s; box-shadow: 0 2px 10px rgba(22,50,58,.12); }
.to-top span { font: 500 8px/1 var(--f); letter-spacing: .16em; text-transform: uppercase; margin-top: 3px; }
.to-top.on { opacity: 1; pointer-events: auto; }
@media (max-width: 899px) { .to-top { bottom: 82px; right: 14px; } }
/* Batu's review, 18 Oct 2026 (Arthur): the Invisible Key's key, Leaders Club in words under the LHW logo */
.key-ic { width: 1.05em; height: 1.05em; vertical-align: -.16em; margin-right: .45em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.lhw-head { text-align: center; text-decoration: none; }
.lhw-head span { display: block; margin-top: 3px; font: 500 9px/1 var(--f); letter-spacing: .2em; text-transform: uppercase; color: inherit; }
.top:not(.solid) .lhw-head span { color: #fff; }
.top.solid .lhw-head span { color: var(--ink); }
.hero-sub3 { margin-top: 10px; font: 500 12px/1.3 var(--f); letter-spacing: .22em; text-transform: uppercase; color: #fff; }
.rates td.price { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Book now as a pop-up (Batu, 18 Oct 2026) */
.book-dialog { margin: auto; max-height: calc(100vh - 32px); overflow: auto; border: 0; padding: 34px 30px 26px; width: min(560px, calc(100vw - 32px)); background: var(--paper, #FBFAF6); color: var(--ink); box-shadow: 0 24px 60px rgba(22,50,58,.25); }
.book-dialog::backdrop { background: rgba(22,50,58,.55); }
.book-dialog .bookform { margin-top: 18px; }
.bd-close-f { position: absolute; top: 8px; right: 8px; }
.bd-close { width: 44px; height: 44px; border: 0; background: none; font: 300 30px/1 var(--f); color: var(--ink); cursor: pointer; }
.pair-frames { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.pair-frames .frame { aspect-ratio: 4 / 3; }
.hero-sub2 { font: 400 clamp(26px, 3.2vw, 42px)/1.1 var(--serif); color: #fff; margin-top: 6px; }
.rates th, .rates td { padding-right: 14px; }
.rates th:last-child, .rates td:last-child { padding-right: 0; }
/* full-size floor plan on the same page, with a close button (Alex, 18 Oct 2026) */
.plan-view { margin: auto; border: 0; padding: 0; width: calc(100vw - 32px); max-width: none; height: calc(100vh - 32px); max-height: none; background: #fff; color: var(--ink); }
.plan-view::backdrop { background: rgba(22,50,58,.6); }
.plan-view .pv-body { height: 100%; overflow: auto; padding: 64px 24px 24px; }
.plan-view .plan-art { width: max(1400px, 100%); max-width: none; margin: 0 auto; }
.pv-close { position: fixed; top: 24px; right: 28px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--ink); background: #fff; font: 500 12px/1 var(--f); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.pv-close span { display: inline; }
@media (max-width: 699px) { .plan-view .plan-art { width: 1000px; } .plan-view .pv-body { padding-top: 80px; } .pv-close { top: 20px; right: 20px; } }
/* extra photographs on a page (Kids Club, 18 Oct 2026) */
.page-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
@media (min-width: 900px) { .page-photos { grid-template-columns: repeat(4, 1fr); } }
.page-photos .pp { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.page-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.credit-line { margin-top: 10px; font-size: 12px; letter-spacing: .04em; color: var(--ink-soft); }
/* the group enquiry, once sent: the form gives way to a thank-you (Alex, 18 Oct 2026) */
.form-thanks { border-top: 1px solid var(--ink); padding: 26px 0 8px; outline: none; }
.form-thanks h3 { font: 400 34px/1.15 var(--serif); margin: 0 0 12px; }
.form-thanks p { font-size: 17px; max-width: 30em; }
/* Big Blue Ocean and Little Blue Ocean together, in the villa grid (Alex, 18 Oct 2026) */
.villa-pair { grid-column: 1 / -1; display: grid; gap: 22px 32px; background: var(--mist); padding: 22px; }
@media (min-width: 900px) { .villa-pair { grid-template-columns: 1.2fr 1fr; align-items: center; padding: 28px; } }
.vp-ph { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.vp-ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.vp-text h3 { font: 400 34px/1.1 var(--serif); margin: 8px 0 12px; }
.vp-links { display: flex; gap: 22px; margin-top: 14px; }
/* homepage Getting here: Batu's three steps (18 Oct 2026) */
.gh-2 { font: 400 clamp(22px, 2.2vw, 30px)/1.15 var(--serif); color: var(--ink); margin: 0; }
.gh-3 { font: 500 12px/1.3 var(--f); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); margin: 10px 0 28px; }
/* In the press (Batu, 19 Oct 2026) */
.press-list { list-style: none; border-top: 1px solid var(--ink); }
.press-list li { display: grid; gap: 4px 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 700px) { .press-list li { grid-template-columns: 200px 1fr; align-items: baseline; } }
.press-list .pl-out { font: 500 12px/1.4 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.press-list .pl-out small { display: block; letter-spacing: .08em; color: var(--ink-soft); text-transform: none; font-weight: 400; font-size: 13px; }
.press-list a { font: 400 21px/1.3 var(--serif); text-decoration: none; }
.nb { white-space: nowrap; } @media (max-width: 479px) { .nb { white-space: normal; } }
/* In the press as cards with our own photographs (Batu, 19 Oct 2026) */
.press-grid { display: grid; gap: 40px 28px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .press-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .press-grid { grid-template-columns: repeat(3, 1fr); } }
.press-card { display: block; text-decoration: none; color: var(--ink); }
.press-card .ph { aspect-ratio: 3 / 2; overflow: hidden; margin-bottom: 14px; }
.press-card .ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.press-card:hover .ph img { transform: scale(1.03); }
.press-card .pl-out { display: block; font: 500 12px/1.4 var(--f); letter-spacing: .14em; text-transform: uppercase; }
.press-card .pl-out small { margin-left: 10px; letter-spacing: .06em; text-transform: none; font-weight: 400; font-size: 13px; color: var(--ink-soft); }
.press-card .pl-title { display: block; margin-top: 6px; font: 400 22px/1.25 var(--serif); }
@media (prefers-reduced-motion: reduce) { .press-card .ph img { transition: none; } }
/* press page from Batu's shortlist (19 Oct 2026): awards, then typographic cards */
.awards { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); grid-template-columns: 1fr; }
@media (min-width: 700px) { .awards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .awards { grid-template-columns: repeat(4, 1fr); } }
.award { display: block; background: var(--paper, #FBFAF6); padding: 22px 20px; text-decoration: none; color: var(--ink); }
.award .aw-org { display: block; font: 500 12px/1.4 var(--f); letter-spacing: .16em; text-transform: uppercase; }
.award .aw-what { display: block; margin-top: 8px; font: 400 22px/1.2 var(--serif); }
.press-card { border-top: 1px solid var(--ink); padding-top: 16px; }
.press-card .pc-mast { display: block; font: 400 30px/1.05 var(--serif); letter-spacing: -.01em; margin-bottom: 12px; }
.press-card .pl-title { margin: 0 0 12px; font-size: 19px; }
/* the press book (Alex, 18 Oct 2026): cuttings laid slightly askew, a soft shadow, straightened on hover */
.press-card.clip { border-top: 0; padding-top: 0; }
.press-card .cut { display: block; padding: 10px 10px 18px; background: var(--mist); margin-bottom: 16px; }
.press-card .cut img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; box-shadow: 0 2px 4px rgba(22,50,58,.10), 0 10px 24px rgba(22,50,58,.12); transform: rotate(-1deg); transition: transform .3s; }
.press-grid .press-card.clip:nth-child(3n+2) .cut img { transform: rotate(.8deg); }
.press-grid .press-card.clip:nth-child(3n) .cut img { transform: rotate(-.4deg); }
.press-grid .press-card.clip:hover .cut img { transform: rotate(0) scale(1.01); }
.press-card.clip .pl-title { font-size: 19px; margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .press-card .cut img { transition: none; } }

/* A painting as the page opener: on white, title underneath (tennis, Alex 19 Oct 2026) */
.phero { padding: 28px 0 8px; }
.phero img { width: 100%; height: auto; max-height: 64svh; object-fit: contain; display: block; margin: 0 auto 10px; }
.phero .label { margin-top: 6px; }
.phero h1 { margin-top: 12px; color: var(--ink, #16323A); }
.shot .phero img { max-height: 620px; }

/* media enquiry form: the visit block, set apart (Arthur, 20 Oct 2026) */
.groupform fieldset.visit { border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 4px 0; padding: 14px 0 16px; display: grid; gap: 14px; min-width: 0; }
.groupform fieldset.visit legend { padding: 0 8px 0 0; font: 500 11px/1 var(--f); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.row2 > * { min-width: 0; }
.emap a .lg { cursor: pointer; transition: opacity .15s; } .emap a:hover .lg { opacity: .7; }
/* homepage Getting here: the Twin Otter above the route map (Batu, 20 Oct 2026: "photo of the aircraft to add please") */
.gh-photo { margin: 0 0 18px; aspect-ratio: 3 / 2; overflow: hidden; }
.gh-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Leaders Club page: the two logos side by side, the same height, each to its website (Batu, 20 Oct 2026) */
.lhw-pair { display: flex; align-items: center; gap: 48px; flex-wrap: wrap; padding: 8px 0 28px; border-bottom: 1px solid var(--line); }
.lhw-pair img { height: 72px; width: auto; display: block; }
@media (max-width: 599px) { .lhw-pair { gap: 28px; } .lhw-pair img { height: 54px; } }

/* Batu, 21 Oct 2026: getting here, the photo as a panorama and "arranged by us" in a neutral green */
.gh-pano { margin: 0 0 56px; aspect-ratio: 21 / 8; overflow: hidden; }
.gh-pano img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; display: block; }
.gh-us { color: #557a63; }
@media (max-width: 899px) { .gh-pano { aspect-ratio: 3 / 2; margin-bottom: 36px; } }
@media (min-width: 900px) { .page-photos.two { grid-template-columns: 1fr 1fr; } .page-photos.two .pp { aspect-ratio: 3 / 2; } }
/* Batu, 21 Oct 2026: the LHW logo larger, near the Canouan logo's size; "Leaders Club" is now a menu item */
@media (min-width: 1100px) { .lhw-head img { height: 62px; } }
/* eight menu items since Leaders Club joined the menu (21 Oct 2026): tighter still below 1600 px, the LHW logo a step smaller */
@media (min-width: 900px) and (max-width: 1599px) {
  .top nav { gap: 15px; }
  .top nav .nav-item > a, .top nav > a { font-size: 11.5px; letter-spacing: .07em; }
  .top.solid .logo { width: 168px; }
  .top .logo { width: 180px; }
  .lhw-head { margin-left: 10px !important; }
  .lhw-head img { height: 50px !important; }
}
@media (min-width: 900px) and (max-width: 1239px) {
  .top nav { gap: 11px; }
  .top nav .nav-item > a, .top nav > a { font-size: 10.5px; letter-spacing: .04em; }
  .top.solid .logo, .top .logo { width: 132px; }
  .lhw-head img { height: 40px !important; }
}
/* final header steps (21 Oct 2026), checked at 1100, 1280, 1440, 1600 and 1920 */
@media (min-width: 1600px) {
  .top .call { display: none !important; }
  .top nav { gap: 26px; }
  .top nav .nav-item > a, .top nav > a { font-size: 12.5px; letter-spacing: .12em; }
  .lhw-head img { height: 58px !important; }
}
@media (min-width: 1240px) and (max-width: 1439px) {
  .top nav { gap: 12px; }
  .top nav .nav-item > a, .top nav > a { font-size: 11px; letter-spacing: .05em; }
  .top.solid .logo, .top .logo { width: 150px; }
  .lhw-head img { height: 46px !important; }
}
@media (min-width: 900px) and (max-width: 1239px) {
  .lhw-head { display: none !important; }
  .top nav { gap: 10px; }
  .top nav .nav-item > a, .top nav > a { font-size: 10px; letter-spacing: .03em; }
  .top.solid .logo, .top .logo { width: 118px; }
  .top .menu .btn { padding: 0 10px; font-size: 11px; }
}
@media (min-width: 900px) { .top .menu { margin-left: 18px; } }
@media (min-width: 1600px) and (max-width: 1799px) { .top nav { gap: 20px; } .top nav .nav-item > a, .top nav > a { letter-spacing: .1em; } .lhw-head img { height: 54px !important; } }
@media (min-width: 1240px) and (max-width: 1439px) { .top nav { gap: 10px; } .top nav .nav-item > a, .top nav > a { font-size: 10.5px; letter-spacing: .04em; } }
/* the LHW logo stays at every width (Alex, 21 Oct 2026: "Batu has made so much of it"); below 1240 px the logo
   stands in for the "Leaders Club" menu item, which goes to the same page */
.lhw-head { display: inline-block !important; margin-left: 8px !important; }
.lhw-head img { height: 30px !important; width: auto; display: block; }
@media (min-width: 900px) and (max-width: 1239px) {
  .lhw-head img { height: 42px !important; }
  .top nav .nav-item:has(> a[href*="leaders-club"]) { display: none; }
  .top nav { gap: 13px; }
  .top nav .nav-item > a, .top nav > a { font-size: 10.5px; letter-spacing: .05em; }
}
@media (min-width: 1240px) and (max-width: 1439px) { .lhw-head img { height: 46px !important; } }
@media (max-width: 899px) { .top .menu { gap: 8px; } .top .menu .btn { padding: 0 12px; } }
@media (max-width: 380px) { .lhw-head img { height: 26px !important; } .top .menu .btn { padding: 0 10px; font-size: 11px; } }
.top .menu .btn { white-space: nowrap; }
@media (min-width: 1440px) and (max-width: 1599px) { .lhw-head img { height: 56px !important; } }
@media (min-width: 1600px) and (max-width: 1799px) { .lhw-head img { height: 54px !important; } }
@media (min-width: 1800px) { .lhw-head img { height: 60px !important; } }
@media (min-width: 900px) and (max-width: 1239px) {
  .top nav { gap: 9px; }
  .top nav .nav-item > a, .top nav > a { font-size: 10px; letter-spacing: .03em; }
  .top.solid .logo, .top .logo { width: 112px; }
  .top .menu { margin-left: 10px; gap: 6px; }
  .lhw-head img { height: 36px !important; }
}
@media (min-width: 900px) and (max-width: 1019px) {
  .top { padding-left: 20px; padding-right: 20px; }
  .top nav { gap: 7px; }
  .top nav .nav-item > a, .top nav > a { font-size: 9.5px; letter-spacing: .02em; }
}
@media (min-width: 900px) and (max-width: 1019px) {
  .top.solid { padding-left: 16px !important; padding-right: 16px !important; }
  .top.solid .logo, .top .logo { width: 100px; }
  .top .menu .btn { padding: 0 9px; font-size: 10.5px; }
  .lhw-head img { height: 32px !important; }
}
.groupform .row2 { align-items: end; }  /* fields line up when one label wraps (21 Oct 2026) */