:root {

  --green:#254936;

  --dark-green:#193629;

  --sage:#718879;

  --cream:#f6f2e9;

  --light:#fbfaf7;

  --gold:#b49762;

  --dark:#252823;

  --white:#fff;

  --border:#ddd8cd;

  --shadow:0 18px 50px rgba(25,54,41,.12);

  --max:1200px;

}



/* =========================

   RESET / BASE

========================= */

* {

  box-sizing:border-box;

  margin:0;

  padding:0;

}

html {

  scroll-behavior:smooth;

}

body {

  font-family:Arial,Helvetica,sans-serif;

  color:var(--dark);

  background:var(--light);

  line-height:1.7;

}

body.menu-open {

  overflow:hidden;

}

h1,

h2,

h3 {

  font-family:Georgia,"Times New Roman",serif;

  font-weight:400;

  line-height:1.15;

  color:var(--green);

}

h1 {

  font-size:clamp(3rem,7vw,6.2rem);

}

h2 {

  font-size:clamp(2.2rem,4.5vw,4rem);

}

h3 {

  font-size:1.55rem;

}

p {

  margin-bottom:1rem;

}

a {

  color:inherit;

  text-decoration:none;

}

button,

input,

select,

textarea {

  font:inherit;

}

img {

  display:block;

  width:100%;

  height:100%;

  object-fit:cover;

  content-visibility:auto;

}



/* =========================

   LAYOUT

========================= */

.container {

  width:min(92%,var(--max));

  margin:0 auto;

}

.container-wide {

  width:100%;

  padding:0 4%;

}

.section {

  padding:110px 0;

}

.section-heading {

  max-width:760px;

  margin:0 auto 55px;

  text-align:center;

}

.eyebrow {

  display:block;

  color:var(--gold);

  font-size:.76rem;

  font-weight:700;

  letter-spacing:3px;

  text-transform:uppercase;

  margin-bottom:14px;

}



/* =========================

   BUTTONS

========================= */

.btn {

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:15px 28px;

  border:1px solid var(--green);

  background:var(--green);

  color:#fff;

  font-weight:700;

  transition:.25s ease;

  cursor:pointer;

}

.btn:hover {

  background:var(--dark-green);

  transform:translateY(-2px);

}

.btn-outline {

  background:transparent;

  border-color:#fff;

}

.btn-outline:hover {

  background:#fff;

  color:var(--green);

}



/* =========================

   HEADER

========================= */

/*

 Large logo layout retained:

 Desktop 238px header

 Logo max 680px

 Navigation below logo

*/

.site-header {

  height:238px;

  min-height:238px;

  width:100%;

  background:rgba(25,54,41,.95);

  color:#fff;

  position:relative;

  z-index:100;

  backdrop-filter:blur(10px);

}



.site-header .nav {

  width:100%;

  max-width:none;

  height:238px;

  padding:0 30px;

  display:flex;

  flex-direction:column;

  justify-content:flex-start;

  align-items:center;

  gap:0;

}



.site-header .logo {

  display:flex;

  align-items:center;

  justify-content:center;

  width:min(680px,90vw);

  height:178px;

  flex:0 0 178px;

  line-height:0;

}



.site-header .logo img {

  width:min(680px,90vw);

  height:178px;

  max-width:none;

  max-height:none;

  object-fit:contain;

  object-position:center;

}



.site-header nav {

  width:100%;

  height:60px;

  text-align:center;

}



.site-header nav ul {

  display:flex;

  justify-content:center;

  align-items:center;

  height:60px;

  gap:26px;

  list-style:none;

}



.site-header nav a {

  font-size:.82rem;

  white-space:nowrap;

  transition:.2s;

}



.site-header nav a:hover {

  color:#d9ccb0;

}



.nav-cta {

  padding:10px 17px;

  border:1px solid rgba(255,255,255,.5);

}



.menu-toggle {

  display:none;

  border:0;

  background:none;

  color:#fff;

  font-size:1.8rem;

  cursor:pointer;

}



/* =========================

   HERO

========================= */

.hero {

  min-height:81.1vh;

  position:relative;

  display:flex;

  align-items:center;

  color:#fff;

  background-image:var(--hero-image);

  background-position:center;

  background-size:cover;

  background-color:#456052;

}



.hero-overlay {

  position:absolute;

  inset:0;

  background:

    linear-gradient(

      90deg,

      rgba(20,40,29,.72),

      rgba(20,40,29,.28) 70%,

      rgba(20,40,29,.55)

    );

}



.hero-content {

  position:relative;

  z-index:1;

  max-width:820px;

}



.hero .eyebrow {

  color:#e3c27b;

  font-size:1rem;

  font-weight:800;

  text-shadow:

    2px 3px 8px rgba(0,0,0,.75),

    0 0 13px rgba(0,0,0,.4);

}



.hero h1 {

  color:#fff;

  margin-bottom:15px;

  text-shadow:

    2px 3px 8px rgba(0,0,0,.75),

    0 0 13px rgba(0,0,0,.4);

}



.hero p {

  max-width:680px;

  font-size:1.15rem;

  color:#f4f5f1;

  margin-bottom:32px;

  text-shadow:

    1px 2px 5px rgba(0,0,0,.7);

}



.hero-actions {

  display:flex;

  flex-wrap:wrap;

  gap:12px;

}



.scroll-hint {

  position:absolute;

  z-index:2;

  bottom:8px;

  left:50%;

  transform:translateX(-50%);

  font-size:.75rem;

  letter-spacing:2px;

  text-transform:uppercase;

  color:#fff;

}



.scroll-hint span {

  display:block;

  text-align:center;

  font-size:1.3rem;

}



/* =========================

   INTRO

========================= */

.intro {

  background:var(--cream);

}



.intro-grid {

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:80px;

  align-items:start;

}



.intro-grid p {

  font-size:1.05rem;

}



.text-link {

  font-weight:700;

  color:var(--green);

  border-bottom:1px solid var(--gold);

  padding-bottom:3px;

}



/* =========================

   COTTAGE CARDS

========================= */



.cottage-grid {

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:25px;

}



.cottage-card {

  background:#fff;

  box-shadow:var(--shadow);

  transition:.3s ease;

}



.cottage-card:hover {

  transform:translateY(-6px);

}



.card-image {

  display:block;

  height:360px;

  position:relative;

  overflow:hidden;

  background:#d9ded8;

}



.card-image img {

  transition:transform .5s ease;

}



.cottage-card:hover .card-image img {

  transform:scale(1.04);

}



.image-label {

  position:absolute;

  right:16px;

  bottom:16px;

  background:rgba(25,54,41,.9);

  color:#fff;

  padding:8px 12px;

  font-size:.7rem;

  letter-spacing:1px;

  text-transform:uppercase;

}



.card-content {

  padding:30px;

}



.card-content .eyebrow {

  margin-bottom:7px;

}



.card-content h3 {

  font-size:2rem;

  margin-bottom:12px;

}



.card-link {

  display:inline-flex;

  gap:10px;

  margin-top:8px;

  color:var(--green);

  font-weight:700;

}



.card-link span {

  transition:.2s;

}



.card-link:hover span {

  transform:translateX(4px);

}



/* =========================

   FEATURE IMAGE SECTIONS

========================= */



.feature-photo {

  min-height:600px;

  position:relative;

  display:flex;

  align-items:center;

  color:#fff;

  background-image:var(--feature-image);

  background-position:center;

  background-size:cover;

  background-color:#506759;

}

.feature-overlay {

  position:absolute;

  inset:0;

  background:

    linear-gradient(

      90deg,

      rgba(20,40,29,.32),

      rgba(20,40,29,.10) 65%,

      rgba(20,40,29,.20)

    );

}

/* subtle text area at bottom */

.feature-content {

  position:relative;

  z-index:1;

  max-width:700px;

  padding:160px 0 35px;

}

.feature-content .eyebrow {

  color:#e3c27b;

  font-size:1rem;

  font-weight:800;

  text-shadow:

    2px 3px 8px rgba(0,0,0,.75),

    0 0 13px rgba(0,0,0,.4);

}

.feature-content h2 {

  color:#fff;

  margin-bottom:18px;

  text-shadow:

    2px 3px 8px rgba(0,0,0,.75),

    0 0 13px rgba(0,0,0,.4);

}

.feature-content p {

  max-width:620px;

  font-size:1.05rem;

  color:#fff;

  margin:0;

  padding:0;

  text-shadow:

    1px 2px 5px rgba(0,0,0,.7);

}

/* =========================

   FACILITIES

========================= */



.facilities {

  background:#fff;

}



.facility-grid {

  display:grid;

  grid-template-columns:repeat(4,1fr);

  border-top:1px solid var(--border);

}



.facility {

  overflow:hidden;

  border-right:1px solid var(--border);

  background:#fff;

}



.facility:last-child {

  border-right:0;

}



.facility-image {

  height:210px;

  overflow:hidden;

  background:#d9ded8;

}



.facility-image img {

  transition:transform .4s ease;

}



.facility:hover .facility-image img {

  transform:scale(1.04);

}



.facility-content {

  padding:28px 25px 32px;

}



.facility span,

.thing-card span {

  color:var(--gold);

  font-weight:700;

  font-size:.75rem;

  letter-spacing:2px;

}



.facility h3 {

  margin:12px 0 8px;

}



/* =========================

   MORE THAN JUST A PLACE

========================= */



.things {

  background:var(--cream);

}



.things-grid {

  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:10px;

}



.thing-card {

  min-height:420px;

  position:relative;

  display:flex;

  align-items:end;

  padding:25px;

  overflow:hidden;

  color:#fff;

  background-image:

    linear-gradient(

      transparent,

      rgba(20,40,29,.35)

    ),

    var(--thing-image);

  background-position:center;

  background-size:cover;

}



.thing-card::before {

  background:

    linear-gradient(

      to top,

      rgba(0,0,0,.45),

      rgba(0,0,0,.08) 70%

    );

}



.thing-card h3,

.thing-card p,

.thing-card span {

  position:relative;

  z-index:1;

}



.thing-card h3 {

  color:#fff;

  margin:8px 0;

  text-shadow:

    2px 3px 8px rgba(0,0,0,.95);

}



.thing-card p {

  font-size:.9rem;

  margin:0;

  color:#eef1ed;

  text-shadow:

    2px 3px 8px rgba(0,0,0,.95);

}



/* =========================

   GALLERY

========================= */



.gallery {

  background:#fff;

}



.gallery-grid {

  display:grid;

  grid-template-columns:2fr 1fr 1fr;

  grid-template-rows:270px 270px;

  gap:8px;

}



.gallery-item {

  border:0;

  padding:0;

  overflow:hidden;

  cursor:pointer;

  background:#d9ded8;

  position:relative;

}



.gallery-item img {

  transition:transform .4s ease;

}



.gallery-item:hover img {

  transform:scale(1.04);

}



.gallery-item-large {

  grid-row:span 2;

}



/* Gallery captions - always visible */

.gallery-caption {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:18px;
  background:
    linear-gradient(
      transparent,
      rgba(0,0,0,.85)
    );
  color:#fff;
  font-size:.95rem;
  text-align:left;
  opacity:1;
  transform:none;
  transition:none;
  text-shadow:
    0 2px 5px rgba(0,0,0,.8);
}



.gallery-item:hover .gallery-caption {

  opacity:1;

  transform:translateY(0);

}



/* =========================

   ENQUIRY

========================= */



.enquiry {

  background:var(--cream);

}



.enquiry-grid {

  display:grid;

  grid-template-columns:.85fr 1.15fr;

  gap:80px;

  align-items:start;

}



.contact-details {

  margin-top:35px;

  border-top:1px solid var(--border);

  padding-top:25px;

}



.contact-details a {

  color:var(--green);

  font-weight:700;

}



.enquiry-form {

  background:#fff;

  padding:35px;

  box-shadow:var(--shadow);

}



.enquiry-form label {

  display:block;

  font-size:.78rem;

  font-weight:700;

  color:var(--green);

  margin-bottom:18px;

}



.form-row {

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:18px;

}



input,

select,

textarea {

  width:100%;

  margin-top:7px;

  border:1px solid var(--border);

  background:#fff;

  padding:13px 14px;

  color:var(--dark);

  outline:none;

}



textarea {

  resize:vertical;

}



input:focus,

select:focus,

textarea:focus {

  border-color:var(--green);

}



.form-note {

  font-size:.75rem;

  color:#72766f;

  margin-top:15px;

}



.form-success {

  margin-top:18px;

  padding:14px;

  background:#edf3ee;

  color:var(--green);

  font-weight:700;

}





/* =========================

   FOOTER

========================= */



.site-footer {

  background:var(--dark-green);

  color:#dce4de;

  padding:65px 0 25px;

}



.footer-grid {

  display:grid;

  grid-template-columns:1.5fr 1fr 1fr;

  gap:60px;

}



.site-footer h3 {

  color:#fff;

  margin-bottom:15px;

}



.site-footer p {

  max-width:450px;

  font-size:.9rem;

}



.footer-grid>div>a:not(.footer-button) {

  display:block;

  margin:5px 0;

  font-size:.9rem;

}



.footer-button {

  display:inline-block;

  background:#fff;

  color:var(--green);

  padding:11px 17px;

  font-weight:700;

  margin-top:8px;

}



.copyright {

  border-top:1px solid rgba(255,255,255,.15);

  margin-top:50px;

  padding-top:20px;

  font-size:.75rem;

  color:#b8c4bd;

}





/* =========================

   LIGHTBOX

========================= */



.lightbox {

  position:fixed;

  inset:0;

  z-index:2000;

  background:rgba(8,15,11,.94);

  display:none;

  align-items:center;

  justify-content:center;

  padding:35px;

}



.lightbox.open {

  display:flex;

}



.lightbox img {

  max-width:95vw;

  max-height:88vh;

  width:auto;

  height:auto;

  object-fit:contain;

}



.lightbox-close {

  position:absolute;

  right:24px;

  top:16px;

  border:0;

  background:none;

  color:#fff;

  font-size:2.8rem;

  cursor:pointer;

  line-height:1;

}





/* =========================

   RESPONSIVE

========================= */



@media(max-width:950px){



  .intro-grid {

    grid-template-columns:1fr;

    gap:40px;

  }



  .cottage-grid {

    grid-template-columns:1fr;

  }



  .card-image {

    height:420px;

  }



  .facility-grid {

    grid-template-columns:1fr 1fr;

  }



  .things-grid {

    grid-template-columns:1fr 1fr;

  }



  .enquiry-grid {

    grid-template-columns:1fr;

    gap:45px;

  }

}





/* Tablet / mobile header */

@media(max-width:760px){



  .site-header {

    height:176px;

    min-height:176px;

  }



  .site-header .nav {

    height:176px;

    min-height:176px;

    padding:0 16px;

  }



  .site-header .logo {

    width:94vw;

    height:118px;

    flex-basis:118px;

  }



  .site-header .logo img {

    width:94vw;

    height:118px;

  }



  .site-header nav {

    height:58px;

    overflow-x:auto;

  }



  .site-header nav ul {

    justify-content:flex-start;

    width:max-content;

    min-width:100%;

    gap:18px;

    height:58px;

  }



  .menu-toggle {

    display:block;

  }



  .hero {

    min-height:90vh;

  }



  .section {

    padding:80px 0;

  }



  .gallery-grid {

    grid-template-columns:1fr 1fr;

    grid-template-rows:220px 220px 220px;

  }



  .gallery-item-large {

    grid-column:span 2;

    grid-row:auto;

  }



  .footer-grid {

    grid-template-columns:1fr;

    gap:35px;

  }

}





/* Small phones */

@media(max-width:520px){



  .hero h1 {

    font-size:3rem;

  }



  .hero-actions {

    flex-direction:column;

    align-items:stretch;

  }



  .btn {

    text-align:center;

  }



  .facility-grid,

  .things-grid,

  .form-row {

    grid-template-columns:1fr;

  }



  .facility {

    border-right:0;

    border-bottom:1px solid var(--border);

  }



  .facility-image {

    height:190px;

  }



  .gallery-grid {

    grid-template-columns:1fr;

    grid-template-rows:

      260px

      220px

      220px

      220px

      220px;

  }



  .gallery-item-large {

    grid-column:auto;

  }



  .enquiry-form {

    padding:24px;

  }

}



/* Thankyou page */

.thank-you-page {

      min-height: calc(100vh - 238px);

      display: flex;

      align-items: center;

      justify-content: center;

      padding: 70px 20px;

      box-sizing: border-box;

    }

    .thank-you-card {

      width: min(760px, 100%);

      text-align: center;

      background: rgba(255,255,255,.94);

      border-radius: 18px;

      padding: 48px 42px 52px;

      box-shadow: 0 18px 50px rgba(36, 52, 39, .12);

      border: 1px solid rgba(75, 96, 75, .12);

    }

    .thank-you-logo {

      display: block;

      width: min(560px, 92%);

      height: auto;

      max-height: 190px;

      object-fit: contain;

      margin: 0 auto 28px;

    }

    .thank-you-card h1 {

      margin: 0 0 16px;

      color: #405744;

      font-family: Georgia, "Times New Roman", serif;

      font-size: clamp(2.2rem, 5vw, 3.6rem);

      line-height: 1.08;

    }

    .thank-you-card p {

      max-width: 590px;

      margin: 0 auto 14px;

      color: #566056;

      font-size: 1.08rem;

      line-height: 1.7;

    }

    .thank-you-actions {

      margin-top: 30px;

    }

    .thank-you-actions a {

      display: inline-block;

      padding: 13px 24px;

      border-radius: 999px;

      background: #405744;

      color: #fff;

      text-decoration: none;

      font-weight: 600;

      transition: transform .2s ease, background .2s ease;

    }

    .thank-you-actions a:hover {

      transform: translateY(-2px);

      background: #314532;

    }

    @media (max-width: 760px) {

      .thank-you-page {

        min-height: calc(100vh - 176px);

        padding: 42px 16px;

      }

      .thank-you-card {

        padding: 34px 22px 38px;

      }

      .thank-you-logo {

        width: 96%;

        max-height: 145px;

        margin-bottom: 22px;

      }

    }



/* Privacy policy page */

.privacy-content {

  max-width:850px;

  margin:0 auto;

}

.privacy-content h3 {

  margin-top:45px;

  margin-bottom:15px;

}

.privacy-content p {

  font-size:1.05rem;

}

.privacy-content ul {

  margin:20px 0 30px 25px;

}

.privacy-content li {

  margin-bottom:8px;

}



/* Privacy page hero text shadow only */

.privacy-page .hero-content .eyebrow {

  text-shadow:

    1.5px 2px 6px rgba(0,0,0,.65),

    0 0 8px rgba(180,151,98,.3);

}



.privacy-page .hero-content h1 {

  text-shadow:

    2px 3px 8px rgba(0,0,0,.75);

}



.privacy-page .hero-content p {

  text-shadow:

    1px 2px 5px rgba(0,0,0,.65);

}



/* Honeypot field */

.website-field {

  position:absolute;

  left:-9999px;

  width:1px;

  height:1px;

  overflow:hidden;

}



/* =========================================================

   404 PAGE

   ========================================================= */

.error-page-content {

  max-width: 760px;

}

.error-page-content h1 {

  color: #fff;

  text-shadow:

    2px 3px 8px rgba(0,0,0,.75),

    0 0 13px rgba(0,0,0,.4);

}

.error-page-content p {

  max-width: 650px;

  color: #f4f5f1;

  text-shadow:

    1px 2px 5px rgba(0,0,0,.7);

}

/* Error code - 404, 500, 502, 503, 504 */
.error-page-content .error-code {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(5rem, 14vw, 10rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -4px;

  color: #fff;
  opacity: 0.9;

  margin: 10px 0 25px;

  text-shadow:
    2px 4px 12px rgba(0,0,0,.75);
}

.error-page-content .hero-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 14px;

  margin-top: 28px;

}

@media (max-width: 700px) {

  .error-page-content .hero-actions {

    flex-direction: column;

    align-items: flex-start;

  }

}



.lightbox-content {
  position:relative;
  max-width:90vw;
  max-height:90vh;
}

.lightbox-content img {
  display:block;
  max-width:90vw;
  max-height:90vh;
  width:auto;
  height:auto;
}

#lightbox-caption {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:18px;
  background:
    linear-gradient(
      transparent,
      rgba(0,0,0,.85)
    );
  color:#fff;
  font-size:.95rem;
  line-height:1.4;
  text-align:left;
  text-shadow:
    0 2px 5px rgba(0,0,0,.8);
  pointer-events:none;
}

/* =========================
   Gallery lightbox
   ========================= */

#lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;

  display: none;

  align-items: center;
  justify-content: center;

  width: 100vw;
  height: 100vh;

  padding: 35px;
  box-sizing: border-box;

  background: rgba(8, 15, 11, 0.94);
}

#lightbox.open {
  display: flex;
}

#lightbox .lightbox-content {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  max-width: 90vw;
  max-height: 90vh;
}

#lightbox-image {
  display: block;

  width: auto;
  height: auto;

  max-width: 90vw;
  max-height: 90vh;

  object-fit: contain;
}

#lightbox-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  padding: 18px;

  background:
    linear-gradient(
      transparent,
      rgba(0, 0, 0, 0.85)
    );

  color: #fff;
  font-size: 0.95rem;
  line-height: 1.4;
  text-align: left;

  text-shadow:
    0 2px 5px rgba(0, 0, 0, 0.8);

  pointer-events: none;
}

/* CSP-safe background images */

.hero-home {
  --hero-image: url("/images/optimised/hero.webp");
}

.feature-sea {
  --feature-image: url("/images/optimised/sea.webp");
}

.thing-coast {
  --thing-image: url("/images/optimised/coast.webp");
}

.thing-food {
  --thing-image: url("/images/optimised/food-drink.webp");
}

.thing-historic {
  --thing-image: url("/images/optimised/historic.webp");
}

.thing-tourist {
  --thing-image: url("/images/optimised/tourist.webp");
}

.hero-kerrowlodge {
  --hero-image: url("/images/optimised/kerrow-lodge-1.webp");
}

.hero-treyarnon {
  --hero-image: url("/images/optimised/treyarnon-1.webp");
}

.hero-rosevine {
  --hero-image: url("/images/optimised/rosevine-1.webp");
}

.hero-privacy {
  --hero-image: url("/images/optimised/sea.webp");
}