.hero{display:grid;grid-template-columns:1.08fr .92fr;min-height:520px}.heroimg{background:url('../images/si-deck-lounge.jpg') center/cover}.herotxt{background:var(--cream);padding:70px 7vw;display:flex;flex-direction:column;justify-content:center}h1{font-size:clamp(50px,6vw,76px);line-height:.95;margin-bottom:20px}h2{font-size:46px}.herotxt p{font-size:19px;line-height:1.55;max-width:540px}.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.tags span{background:#fff;border:1px solid #ccd2cd;padding:7px 9px;font-size:13px}.booking{padding:52px 0;border-bottom:1px solid var(--line)}.booking h2{font-size:34px;margin-bottom:7px}.booking p{color:var(--muted);margin-bottom:22px}.engine{border:1px solid var(--line);padding:22px;min-height:110px;box-shadow:0 5px 22px #0000000c}.engine-note{margin-top:11px;font-size:12px;color:#5d6962}.rooms{padding:85px 0}.sectionintro{max-width:700px;margin-bottom:38px}.sectionintro p{font-size:17px;line-height:1.55;color:#526058}.roomgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.room{border:1px solid var(--line);background:#fff;overflow:hidden}.room-image{height:220px;background-size:cover;background-position:center;position:relative}.room-body{padding:25px;border-top:6px solid var(--blue)}.room.red .room-body{border-color:var(--pink)}.room.blue .room-body{border-color:var(--blue)}.room.green .room-body{border-color:var(--green)}.room.yellow .room-body{border-color:var(--yellow)}.room-meta{font-size:11px;text-transform:uppercase;letter-spacing:.15em;font-weight:800;color:#6f7973}.room h3{font-size:26px;margin:7px 0}.room-facts{font-size:13px;font-weight:700;color:#536159}.room p{line-height:1.5;color:#46534c;font-size:14px}.room-actions{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;align-items:center;margin-top:18px}.room-actions button{border:1px solid #cbd1cc;background:#fff;padding:10px 13px;font-weight:700;cursor:pointer}.room-actions a{font-weight:800;color:var(--blue);font-size:14px}.shared{display:grid;grid-template-columns:1.08fr .92fr;background:#073e5c;color:#fff}.shared-img{background:url('../images/si-deck-aerial.jpg') center/cover;min-height:470px}.shared-copy{padding:70px 7vw;display:flex;flex-direction:column;justify-content:center}.shared-copy p{font-size:18px;line-height:1.65;color:#dceaf0}.info{padding:85px 0;background:var(--cream)}.infogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.infoCard{background:#fff;padding:25px;border-top:5px solid var(--blue)}.infoCard:nth-child(2){border-color:var(--green)}.infoCard:nth-child(3){border-color:var(--pink)}.infoCard h3{font-size:22px;margin-bottom:9px}.infoCard p{font-size:14px;line-height:1.55;color:#4d5952}.footerbook{padding:62px 0;text-align:center;background:#eaf5f3}.footerbook h2{margin-bottom:8px}.footerbook p{color:#536159}.button{display:inline-block;background:var(--pink-btn);color:#fff;padding:13px 19px;border-radius:4px;font-weight:800}dialog{width:min(760px,92vw);max-height:85vh;border:0;border-radius:7px;padding:0;box-shadow:0 22px 70px #0006}dialog::backdrop{background:#0007}.modal{padding:34px 38px;overflow:auto}.modal h2{font-size:40px;margin-bottom:18px}.modal p{font-size:16px;line-height:1.62;color:#445049}.modal-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.16em;font-weight:800;color:#6b756f}.close{float:right;border:0;background:#eee;padding:8px 10px;cursor:pointer}.bookbutton{display:inline-block;margin-top:12px;background:var(--pink-btn);color:#fff;padding:12px 16px;font-weight:800;border-radius:4px}@media(max-width:850px){.navlinks a:not(.bookpill){display:none}.hero,.shared{grid-template-columns:1fr}.heroimg{min-height:400px}.roomgrid,.infogrid{grid-template-columns:1fr}}.icon-row{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}.icon-row span{font-size:12px;background:#f4f6f4;border:1px solid #e0e4e1;border-radius:4px;padding:7px 9px;color:#3f4a44}.room.red{border-color:rgba(255,51,153,.35);background:linear-gradient(180deg,#fff 0%,#fff8fb 100%)}.room.blue{border-color:rgba(0,112,192,.35);background:linear-gradient(180deg,#fff 0%,#f5fbff 100%)}.room.green{border-color:rgba(49,201,52,.35);background:linear-gradient(180deg,#fff 0%,#f7fff7 100%)}.room.yellow{border-color:rgba(239,198,46,.45);background:linear-gradient(180deg,#fff 0%,#fffdf4 100%)}.room.red .room-meta,.room.red .room-actions a{color:#c92476}.room.blue .room-meta,.room.blue .room-actions a{color:#0069ad}.room.green .room-meta,.room.green .room-actions a{color:#1f8e2b}.room.yellow .room-meta,.room.yellow .room-actions a{color:#9a7610}.facility-icons{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.facility-icons span{display:inline-block;padding:9px 11px;border:1px solid rgba(255,255,255,.28);border-radius:4px;font-size:13px;color:#fff}.faqgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.faq{background:#fff;border:1px solid #dfe3df;border-radius:4px}.faq summary{cursor:pointer;list-style:none;font-weight:800;padding:18px 20px}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";float:right;font-size:20px;font-weight:400}.faq[open] summary:after{content:"–"}.faq div{padding:0 20px 18px}.faq p{font-size:14px;line-height:1.6;color:#4d5952;margin:8px 0}.faq[open]{box-shadow:0 4px 14px rgba(0,0,0,.04)}@media(max-width:1100px){.roomgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.roomgrid,.faqgrid{grid-template-columns:1fr}}.amenity-strip{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 6px}.amenity{display:inline-flex;align-items:center;gap:7px;background:#f4f6f4;border:1px solid #e0e4e1;border-radius:4px;padding:8px 10px;font-size:12px;color:#34423a}.amenity svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}.accomgrid{display:grid;grid-template-columns:1.3fr .7fr;gap:22px}.accom{border:1px solid var(--line);background:#fff;overflow:hidden}.accom.studios{border-color:rgba(0,112,192,.35);background:linear-gradient(180deg,#fff 0%,#f7fbff 100%)}.accom.cottage{border-color:rgba(239,198,46,.45);background:linear-gradient(180deg,#fff 0%,#fffdf4 100%)}.accom-image{height:330px;background-size:cover;background-position:center;position:relative}.accom-body{padding:28px}.accom h3{font-size:34px;margin:0 0 8px}.accom p{font-size:15px;line-height:1.55;color:#46534c}.tabs{display:flex;gap:8px;position:absolute;left:14px;bottom:14px}.tabs button{border:0;padding:8px 11px;border-radius:4px;background:rgba(255,255,255,.92);font-weight:800;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.12)}.tabs button.active[data-room="red"]{background:#ffe9f4;color:#b51f68}.tabs button.active[data-room="blue"]{background:#e7f5ff;color:#0064a3}.tabs button.active[data-room="green"]{background:#ebfaeb;color:#237d2a}.room-note{font-size:13px;color:#5d6962;margin-top:10px}.accom-actions{display:flex;gap:14px;align-items:center;margin-top:20px}.accom-actions a{font-weight:800;color:var(--blue);font-size:14px}.accom-actions button{border:1px solid #cbd1cc;background:#fff;padding:10px 13px;font-weight:700;cursor:pointer}@media(max-width:950px){.accomgrid{grid-template-columns:1fr}.accom-image{height:300px}}

/* One vertical flow, not two columns. The earlier layout put the accommodation
   list beside the booking widget, so a visitor read the studios and the cottage
   on the left, then met the same two again inside the widget on the right, in a
   384px column that squeezed its own controls together. Now: read the rooms,
   read what guests said, then book — each at full width. */
.rooms2{padding:70px 0}
.accomgrid{display:grid;grid-template-columns:1fr;gap:20px}
.accom{display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr)}
.accom-image{height:auto;min-height:340px}
.accom-body{padding:30px 34px}
.accom h3{font-size:30px}

/* The colour choice sits beside the photograph, in the copy, where it is a
   deliberate control rather than something laid over the picture. */
.picker{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:20px 0 0}
.picker-label{font-size:11px;text-transform:uppercase;letter-spacing:.13em;font-weight:800;color:#6f7973}
.accom-body .tabs{position:static;left:auto;bottom:auto}
.room-note{font-size:13px;color:#5d6962;margin:9px 0 0}

.facts-row{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 22px}
.facts-row li{display:flex;align-items:center;gap:8px;font-size:14px;color:#3f4d45}
.facts-row svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;color:var(--muted)}
.facts-row b{font-size:17px;font-weight:800;color:var(--ink)}

.includes{margin-top:26px;border-top:1px solid var(--line);padding-top:22px}
.includes h3{font-size:16px;text-transform:uppercase;letter-spacing:.12em;margin:0 0 10px}

/* Guest reviews. A single quote read as a token; a set reads as a record. */
.revs{padding:66px 0;background:var(--cream);border-top:1px solid var(--line)}
.revhead{margin-bottom:26px}
.revhead h2{font-size:36px;margin:0 0 5px}
.revhead p{font-size:14px;line-height:1.5;color:#526058;margin:0;max-width:620px}
.revgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rev{margin:0;background:#fff;border:1px solid var(--line);border-radius:4px;padding:20px 22px}
.rev blockquote{margin:0}
.rev p{margin:0;font-size:15px;line-height:1.6;color:#3f4d45}
.revmore{margin-top:14px}
.revmore summary{cursor:pointer;list-style:none;display:inline-block;font-weight:800;font-size:14px;
  padding:12px 16px;background:#fff;border:1px solid #cbd1cc;border-radius:4px}
.revmore summary::-webkit-details-marker{display:none}
.revmore summary:after{content:" ↓"}
.revmore[open] summary:after{content:" ↑"}
.revmore[open] summary{margin-bottom:14px}

/* The widget gets room to lay itself out; at 384px its own Apply and Search
   controls sat on top of one another. */
.book{padding:66px 0 78px}
.bookband{max-width:900px}
.bookmeta{font-size:13px;line-height:1.7;color:#526058;margin:0 0 18px;max-width:840px}
.bookmeta p{margin:0}

@media(max-width:900px){
  .accom{grid-template-columns:1fr}
  .accom-image{min-height:250px}
  .accom-body{padding:24px 22px}
  .revgrid{grid-template-columns:1fr}
  .revhead h2{font-size:29px}
}
@media(max-width:700px){.bookmeta{font-size:13px;line-height:1.7;color:#526058;margin:0 0 18px;max-width:840px}}


/* Three photographs for the facilities section, which described breakfast, the
   guest lounge and the setting in words but showed none of them. */
.infopics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 34px}
.infopics figure{margin:0}
.infopics img{width:100%;height:230px;object-fit:cover;display:block;background:#e8ebe8}
.infopics figcaption{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.45}
@media(max-width:1000px){.infopics{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.infopics{grid-template-columns:1fr 1fr;gap:12px}.infopics img{height:132px}.infopics figcaption{font-size:12px;margin-top:6px}}

/* Phones and small tablets get 800px versions of the full-bleed photographs.
   CSS backgrounds cannot use srcset, so this is the equivalent. */
@media (max-width: 900px){
  .heroimg{background-image:url('../images/si-deck-lounge-sm.jpg')}
  .shared-img{background-image:url('../images/si-deck-aerial-sm.jpg')}
  /* named for a file that the photo rebuild replaced, so the card showed nothing
     at all below 900px; !important is needed to beat the inline background */
  .accom-image--cottage{background-image:url('../images/cottage-01-sm.jpg')!important}
}

/* The hero now carries the booking CTA. The home page's Short Stays button still
   goes to /short-stays/ rather than a booking widget, per the brief. */
.heroCta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px}
.bookpill--lg{padding:15px 22px;font-size:16px}
.heroCta-note{font-size:13px;color:var(--muted)}

/* Aggregate rating: quiet, factual, no logo or link. */

/* Where we are — drive times from the guest guide, no embedded map. */
.whereweare{padding:78px 0;border-top:1px solid var(--line)}
.drivetimes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;margin:0}
.drivetimes > div{display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--line)}
.drivetimes dt{font-weight:700;font-size:15px}
.drivetimes dd{margin:0;font-variant-numeric:tabular-nums;color:var(--muted);font-size:15px;white-space:nowrap}

/* What we actually do */
.planet{padding:78px 0;background:var(--cream)}
.planetgrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.planetgrid h2{font-size:clamp(30px,3.4vw,42px)}
.planetgrid > div > p{color:var(--muted);font-size:15px;line-height:1.6}
.planetlist{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.planetlist li{position:relative;padding-left:26px;font-size:16px;line-height:1.6;color:#3f4d45}
.planetlist li:before{content:"";position:absolute;left:0;top:8px;width:11px;height:11px;
  border-radius:50%;background:var(--green)}
@media(max-width:820px){
  .drivetimes{grid-template-columns:1fr;gap:0}
  .planetgrid{grid-template-columns:1fr;gap:26px}
  .whereweare,.planet{padding:56px 0}
}

/* Read before it matters, not after. */
.engine-note--before{margin:0 0 14px;font-size:13px;line-height:1.55;color:#4b584f;
  background:#fff;border-left:3px solid var(--blue);padding:11px 13px}

/* The studio tabs were 31px tall — above the 24px minimum but uncomfortable. */
.tabs button { padding: 12px 15px }

/* A written route for offers — deliberately quieter than the booking CTA. */
.offers{margin:0 0 14px;font-size:14px;line-height:1.55;color:#46534c}
.offers-link{font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.offers .js-mail{font-weight:700}

/* Scannable rather than prose: the shared kit as chips, then only the real
   differences, side by side. Reuses the prototype's chip treatment. */
.chips{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{display:inline-flex;align-items:center;gap:7px;
  background:#f4f6f4;border:1px solid #e0e4e1;border-radius:4px;
  padding:7px 10px;font-size:13px;color:#34423a}
.chips li svg{flex:none;width:16px;height:16px;color:#5d6962}


/* the offers sentence now carries the booking reassurance with it */
.offers{border-left:3px solid var(--blue);background:#fff;padding:11px 13px;margin:0 0 14px}
/* inline in a sentence, so WCAG 2.5.8 exempts it — but a little more to aim at */
.offers-link{padding:5px 0}

/* The cancellation terms and a guest voice, at the point of decision. */
.reassure{margin:0 0 14px;font-size:13px;line-height:1.55;color:#46534c}


/* The score, high on the page. Text only — no logo, no route to a commissioned booking. */
.heroproof{margin:22px 0 0;font-size:14px;color:#46534c}
.heroproof strong{font-size:26px;font-weight:800;color:var(--ink)}
.heroproof span{display:block;font-size:12px;color:var(--muted);margin-top:3px}

/* The refund line now carries a link to the full terms; keep it quiet next to
   the reassurance itself. */
.reassure-link{display:inline-block;margin-left:4px;color:var(--blue);font-weight:700;text-decoration:underline}

/* The engine box padded 22px all round, but the widget already carries its own
   trailing whitespace, so the bottom read as a gap rather than as padding. */
.engine{padding:22px 22px 4px}

/* Platform ratings strip.

   Each rating is drawn the way its own platform draws it — a filled score
   badge, five stars, five circles — because that is what a visitor recognises
   at a glance. Shapes and colours only: no logo or wordmark is reproduced, the
   platform names are set in the page's own typeface, and nothing links out. */
.ratings{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 6px;padding:0}
.rt{display:flex;flex-direction:column;gap:5px;min-width:132px;padding:0 18px 0 0}
.rt-name{font-size:11px;text-transform:uppercase;letter-spacing:.13em;font-weight:800;color:#5d6962}
.rt-line{display:flex;align-items:center;gap:9px}
.rt-score{font-size:23px;font-weight:800;line-height:1}
.rt-count{font-size:11px;color:#5d6962}

/* Booking.com shows its score as a solid navy tile with one square corner. */
.rt-badge{background:#003b95;color:#fff;font-weight:800;font-size:19px;line-height:1;
          padding:8px 10px;border-radius:6px 6px 6px 0;display:inline-block}

.marks{display:flex;gap:2px}
.mk{position:relative;display:block;width:17px;height:17px}
.mk-fill{position:absolute;inset:0;overflow:hidden;display:block}
.mk--star svg{width:17px;height:17px;display:block;fill:#dfe3df;stroke:none}
.mk--star .mk-bg{position:absolute;inset:0}
.mk--star .mk-fill svg{fill:#faaf00}
.mk--circle{border-radius:50%;background:#dfe3df;overflow:hidden}
.mk--circle .mk-fill{background:#00aa6c}
.heroproof-link a{font-size:14px;font-weight:800;color:#0a5c94;text-decoration:underline}


.revmore summary{cursor:pointer;font-weight:800;padding:13px 0}

/* Quote cards carry the words, not a scoreboard. */
.rev blockquote{margin:0}
.rev figcaption{margin-top:12px;font-size:13px;font-weight:700;color:#5d6962}
.includes--stay{margin-bottom:26px}

.bookmeta a,.bookmeta .js-mail,.bookmeta .offers-link{color:#0a5c94;font-weight:700;text-decoration:underline;cursor:pointer}

/* The address and how to find the turn-off. */
.findus{margin-top:14px;font-size:15px;line-height:1.6;color:#4d5952}
.findus a{color:#0a5c94;font-weight:800;text-decoration:underline}