/* =========================================================
   Poddington Cottage — style.css
   Design language taken from the reference layout
   - A warm off-white ground with the browns of wood and stone
   - Large corner radii, white cards, hairline rules
   - Pill labels with a dot to mark each section
   - Dark pill buttons with a circular arrow
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* color */
  --cream:       #F4F1EC;
  --cream-deep:  #EDE7DF;
  --paper:       #FFFFFF;
  --ink:         #1F1A16;
  --ink-2:       #443A32;
  --muted:       #8B8076;
  --line:        #E3DACF;
  --line-soft:   #EDE6DD;
  --accent:      #8A5A3C;   /* brick of the building, brown of the wooden door */
  --accent-2:    #CBA88F;   /* light earth colour of the roof tiles */
  --accent-3:    #6E7A63;   /* green of the hedge */
  --dark:        #33241B;   /* deep brown to match the shaded woodwork */
  --brand:       #7B4A33;   /* logo ground colour: brick */
  --brand-ink:   #F2E7DC;   /* logo icon colour */

  /* radius */
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 36px;
  --r-pill: 999px;

  /* spacing rhythm */
  --gap: 24px;
  --sec-y: 116px;
  --shell: 1180px;

  /* type */
  --ff: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;

  /* motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* shadow */
  --sh-sm: 0 1px 2px rgba(35,30,24,.04), 0 6px 18px rgba(35,30,24,.05);
  --sh-md: 0 2px 6px rgba(35,30,24,.05), 0 18px 42px rgba(35,30,24,.09);
  --sh-lg: 0 30px 70px rgba(35,30,24,.14);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; }

body{
  margin:0;
  font-family:var(--ff);
  font-size:16px;
  line-height:1.9;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  /* Horizontal overflow is handled on html. Setting overflow on body breaks sticky */
}
/* Scroll locking goes on html. Setting overflow on body turns body into the
   scroll container, which stops the header's position:sticky from working */
html.is-locked{ overflow:hidden; }

img,svg{ max-width:100%; display:block; }
[hidden]{ display:none !important; }   /* so it wins over author display rules */
ul,ol{ list-style:none; margin:0; padding:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4,p{ margin:0; }

::selection{ background:var(--accent-2); color:var(--ink); }

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

.skip-link{
  position:fixed; top:10px; left:10px; z-index:200;
  padding:10px 18px; background:var(--dark); color:#fff;
  border-radius:var(--r-pill); transform:translateY(-200%);
  transition:transform .25s var(--ease);
}
.skip-link:focus{ transform:none; }

.shell{
  width:min(100% - 40px, var(--shell));
  margin-inline:auto;
}

/* ---------- 3. Typography ---------- */
.h2{
  font-size:clamp(26px, 3.4vw, 40px);
  line-height:1.35;
  font-weight:600;
  letter-spacing:-.01em;
}
.h3{
  font-size:clamp(20px, 2.2vw, 26px);
  line-height:1.5;
  font-weight:600;
  margin-bottom:14px;
}
.h4{
  font-size:15px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:12px;
}
.body-sm{
  font-size:14.5px;
  line-height:1.95;
  color:var(--ink-2);
}
.note{
  font-size:13px;
  line-height:1.85;
  color:var(--muted);
  padding:14px 16px;
  border:1px dashed var(--line);
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.5);
}

/* ---------- 4. Pill labels ---------- */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 16px 7px 9px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--paper);
  font-size:12.5px; font-weight:600;
  letter-spacing:.04em;
  color:var(--ink-2);
  box-shadow:var(--sh-sm);
}
.pill__dot{
  width:16px; height:16px; border-radius:50%;
  background:var(--dark);
  position:relative; flex:none;
}
.pill__dot::after{
  content:""; position:absolute; inset:5px;
  border-radius:50%; background:var(--accent-2);
}
.pill--light{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.34);
  color:#fff;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:none;
}
.pill--light .pill__dot{ background:#fff; }
.pill--light .pill__dot::after{ background:var(--accent); }

/* ---------- 5. Buttons ---------- */
.btn{
  --btn-bg:var(--dark);
  --btn-fg:#fff;
  --btn-bd:transparent;
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 13px 11px 22px;
  border:1px solid var(--btn-bd);
  border-radius:var(--r-pill);
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-size:13.5px; font-weight:600; letter-spacing:.02em;
  cursor:pointer;
  overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease),
             background-color .3s var(--ease), color .3s var(--ease);
}
.btn > span{ position:relative; z-index:1; white-space:nowrap; }
.btn::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--accent);
  transform:translateY(101%);
  transition:transform .42s var(--ease-out);
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--sh-md); }
.btn:hover::before{ transform:translateY(0); }
.btn:active{ transform:translateY(0); }

.btn__arrow{
  position:relative; z-index:1;
  width:26px; height:26px; flex:none;
  border-radius:50%;
  background:var(--btn-fg);
  display:grid; place-items:center;
  overflow:hidden;
  transition:background-color .3s var(--ease);
}
.btn__arrow::before,
.btn__arrow::after{
  content:"";
  position:absolute;
  width:9px; height:9px;
  border-top:1.6px solid var(--btn-bg);
  border-right:1.6px solid var(--btn-bg);
  transform:rotate(45deg);
  transition:transform .38s var(--ease-out), opacity .3s linear;
}
.btn__arrow::before{ transform:rotate(45deg) translate(-1px,0); }
.btn__arrow::after{ transform:rotate(45deg) translate(-11px,10px); opacity:0; }
.btn:hover .btn__arrow::before{ transform:rotate(45deg) translate(9px,-10px); opacity:0; }
.btn:hover .btn__arrow::after{ transform:rotate(45deg) translate(-1px,0); opacity:1; }

.btn--dark{ --btn-bg:var(--dark); --btn-fg:#fff; }
.btn--cream{ --btn-bg:var(--cream); --btn-fg:var(--ink); }
.btn--cream::before{ background:#fff; }
.btn--outline{
  --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--line);
  padding:11px 22px;
}
.btn--outline::before{ background:var(--dark); }
.btn--outline:hover{ --btn-fg:#fff; border-color:var(--dark); }
.btn--ghost-light{
  --btn-bg:transparent; --btn-fg:#fff; --btn-bd:rgba(255,255,255,.45);
  padding:11px 22px;
}
.btn--ghost-light::before{ background:#fff; }
.btn--ghost-light:hover{ --btn-fg:var(--ink); border-color:#fff; }
.btn--block{ width:100%; justify-content:space-between; }
.header__cta{ justify-self:end; }

/* ---------- 6. Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  padding:16px 0;
  transition:padding .35s var(--ease), box-shadow .35s var(--ease),
             border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
/* The frosted glass lives on a pseudo-element. Applying backdrop-filter to the
   header itself makes the drawer inside it (position:fixed) resolve against the
   header rather than the viewport, so a menu opened mid-page is drawn off screen */
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(244,241,236,0);
  transition:background-color .35s var(--ease);
  pointer-events:none;
}
.site-header.is-stuck::before{
  background:rgba(244,241,236,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.site-header.is-stuck{
  padding:9px 0;
  border-bottom-color:var(--line);
  box-shadow:0 10px 30px rgba(35,30,24,.05);
}
.header__inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;   /* keeps the nav centred whatever the logo / button widths */
  align-items:center; gap:20px;
}
/* Columns are set explicitly. On phones the nav becomes position:fixed and no
   longer occupies a column, so auto-placement would pull the burger inwards */
.header__inner > .brand{ grid-column:1; justify-self:start; }
.header__inner > .nav{ grid-column:2; }
.header__inner > .header__cta,
.header__inner > .burger{ grid-column:3; justify-self:end; }

.brand{ display:flex; align-items:center; gap:11px; }
.brand__mark{
  width:36px; height:36px; flex:none;
  background:none;            /* no fill, just the shape of the house */
  color:var(--dark);          /* same dark brown as the CTA button */
  display:grid; place-items:center;
  transition:transform .4s var(--ease-out);
}
.brand__mark svg{ width:36px; height:36px; }
.brand:hover .brand__mark{ transform:rotate(-6deg) scale(1.06); }
.brand__text{
  display:flex; flex-direction:column; line-height:1.15;
  font-weight:700; font-size:17px; letter-spacing:-.01em;
}
.brand__text em{
  font-style:normal; font-size:10px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  margin-top:4px;
}

.nav{ justify-self:center; }
.nav ul{ display:flex; align-items:center; gap:4px; }
.nav ul a{
  display:block; padding:8px 14px;
  font-size:13.5px; font-weight:500;
  border-radius:var(--r-pill);
  color:var(--ink-2);
  position:relative;
  transition:color .25s var(--ease), background-color .25s var(--ease);
}
.nav ul a::after{
  content:""; position:absolute; left:50%; bottom:3px;
  width:0; height:2px; border-radius:2px; background:var(--accent);
  transform:translateX(-50%);
  transition:width .3s var(--ease);
}
.nav ul a:hover{ color:var(--ink); background:rgba(255,255,255,.7); }
.nav ul a:hover::after,
.nav ul a.is-active::after{ width:16px; }
.nav ul a.is-active{ color:var(--ink); font-weight:600; }
.nav .nav__cta{ display:none; }

.burger{
  display:none; justify-self:end;
  width:44px; height:44px; flex:none;
  border:1px solid var(--line); border-radius:50%;
  background:var(--paper); cursor:pointer;
  position:relative;
}
.burger span{
  position:absolute; left:13px; width:18px; height:1.6px;
  background:var(--ink); border-radius:2px;
  transition:transform .35s var(--ease), opacity .2s linear;
}
.burger span:nth-child(1){ top:15px; }
.burger span:nth-child(2){ top:21px; }
.burger span:nth-child(3){ top:27px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; transform:scaleX(.4); }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---------- 6b. Header right side (social + CTA + burger) ---------- */
.header__end{
  grid-column:3; justify-self:end;
  display:flex; align-items:center; gap:12px;
}
.social-link{
  width:40px; height:40px; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--line); border-radius:50%;
  background:var(--paper); color:var(--dark);
  transition:background-color .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .3s var(--ease-out);
}
/* the viewBox is trimmed to the glyph itself, so it sits dead centre in the circle */
.social-link svg{ width:21px; height:21px; }
/* Hover only where there is a real pointer. On a touch screen the hover state
   sticks to whatever was tapped last, so coming back from Facebook would leave
   the icon filled in and lifted, as though it had grown */
@media (hover:hover) and (pointer:fine){
  .social-link:hover{
    background:var(--dark); color:#fff; border-color:var(--dark);
    transform:translateY(-2px);
  }
}
/* and the keyboard focus ring hugs the circle instead of drawing a larger
   rounded square around it */
.social-link:focus-visible{ border-radius:50%; outline-offset:2px; }
.social-link:active{ transform:none; }
@media (max-width:860px){
  /* where the nav becomes a drawer, the header is 2 columns: logo | (social + burger) */
  .header__end{ grid-column:2; gap:10px; }
  .social-link{ width:44px; height:44px; }
  .social-link svg{ width:23px; height:23px; }
}

.scroll-progress{
  position:absolute; left:0; bottom:-1px; height:2px;
  width:0%; background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width .1s linear;
}

.nav-scrim{
  position:fixed; inset:0; z-index:90;
  background:rgba(29,27,24,.4);
  backdrop-filter:blur(3px);
  opacity:0; transition:opacity .3s var(--ease);
}
.nav-scrim.is-on{ opacity:1; }

/* ---------- 7. Placeholders ---------- */
.ph{
  position:relative;
  width:100%;
  border-radius:inherit;
  overflow:hidden;
  background:
    linear-gradient(135deg, #E9E2D6 0%, #DCD2C2 42%, #CFC3AE 100%);
  display:grid; place-items:center;
  color:rgba(40,34,26,.5);
  isolation:isolate;
}
.ph::before{  /* diagonal stripe texture */
  content:"";
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(
    -45deg, rgba(255,255,255,.5) 0 1px, transparent 1px 13px);
  opacity:.55;
}
.ph::after{  /* label */
  content:attr(data-ph) "\2003" attr(data-size);
  position:absolute; left:50%; bottom:14px;
  transform:translateX(-50%);
  padding:6px 14px;
  font-size:11px; font-weight:600; letter-spacing:.06em;
  white-space:nowrap;
  color:var(--ink-2);
  background:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.9);
  border-radius:var(--r-pill);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.ph__icon{
  position:relative; z-index:1;
  width:clamp(38px, 7vw, 64px);
  opacity:.42;
}
.ph__icon svg{ width:100%; height:auto; }
.ph--4x3{ aspect-ratio:4/3; }
.ph--16x11{ aspect-ratio:16/11; }
.ph--hero{ aspect-ratio:16/9; min-height:440px; will-change:transform; }
.ph--hero::after{ content:none; }  /* the label goes in .hero__phtag instead, as scaling would crop it */
.ph--map{
  aspect-ratio:7/5;
  background:linear-gradient(150deg,#E4E7DC 0%,#DCE0D2 55%,#D2D8C6 100%);
}
.ph--map::before{
  background-image:
    linear-gradient(rgba(255,255,255,.65) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.65) 1px, transparent 1px),
    linear-gradient(115deg, transparent 46%, rgba(190,178,156,.55) 46% 48%, transparent 48%);
  background-size:34px 34px, 34px 34px, 100% 100%;
  opacity:.9;
}
.ph__pin{
  position:relative; z-index:2;
  width:18px; height:18px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 6px rgba(142,114,83,.22);
}
.ph__pin::after{
  content:""; position:absolute; inset:-14px;
  border:1.5px solid rgba(142,114,83,.4); border-radius:50%;
  animation:ping 2.6s var(--ease-out) infinite;
}
@keyframes ping{
  0%{ transform:scale(.6); opacity:.9; }
  75%,100%{ transform:scale(1.9); opacity:0; }
}

/* ---------- 7b. Fitting real photographs to the frames ----------
   Portrait or landscape, every photograph is cropped to the same ratio as the
   placeholder, so any picture can go in any frame without breaking the layout. */
.hero__frame > img{
  width:100%; height:auto; display:block;
  aspect-ratio:16/9; object-fit:cover; object-position:center;
  border-radius:var(--r-xl);
  will-change:transform;
}
.about-grid__media img{
  width:100%; display:block;
  aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--r-lg);
  transition:transform .9s var(--ease-out);
}
.about-grid__media:hover img{ transform:scale(1.035); }

.card__media > img{
  width:100%; display:block;
  aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--r-md);
  transition:transform .9s var(--ease-out);
}
.card:hover .card__media > img{ transform:scale(1.06); }

/* ---- Photo viewer inside a card (click to enlarge / buttons to switch) ---- */
.shots{ position:relative; border-radius:var(--r-md); }
.shots__open{
  position:relative; display:block; width:100%; padding:0;
  aspect-ratio:16/11;
  border:0; background:var(--cream-deep);
  border-radius:var(--r-md); overflow:hidden;
  cursor:zoom-in;
}
.shots__img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0;
  transition:opacity .5s var(--ease), transform .9s var(--ease-out);
}
.shots__img.is-on{ opacity:1; }
.card:hover .shots__img.is-on{ transform:scale(1.05); }

.shots__zoom{          /* zoom icon, top right */
  position:absolute; top:12px; right:12px; z-index:2;
  width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.9);
  opacity:0; transform:scale(.8);
  transition:opacity .3s var(--ease), transform .35s var(--ease-out);
}
.shots__zoom{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333241B' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16.1 16.1 20.5 20.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:17px 17px;
}
.shots:hover .shots__zoom,
.shots__open:focus-visible .shots__zoom{ opacity:1; transform:none; }
@media (hover:none){   /* touch devices have no hover, so keep it visible */
  .shots__zoom{ opacity:.85; transform:none; }
}

.shots__count{
  position:absolute; left:12px; bottom:12px; z-index:2;
  padding:5px 11px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.9);
  font-size:11px; font-weight:700; letter-spacing:.06em;
  color:var(--ink-2);
  pointer-events:none;
}
.shots__nav{
  position:absolute; bottom:11px; z-index:2;
  width:34px; height:34px; padding:0;
  border:1px solid rgba(255,255,255,.65);
  border-radius:50%;
  background:rgba(255,255,255,.9);
  cursor:pointer;
  transition:background-color .25s var(--ease), transform .3s var(--ease-out);
}
/* The arrows are SVG background images. background-position:center keeps them dead centre in the circle */
.shots__nav{
  background-repeat:no-repeat;
  background-position:center;
  background-size:17px 17px;
}
.shots__nav:hover{ background-color:#fff; transform:translateY(-2px); }
.shots__nav--prev{
  right:55px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333241B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18 9 12l6-6'/%3E%3C/svg%3E");
}
.shots__nav--next{
  right:12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333241B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}

.tile__btn img{
  width:100%; display:block;
  aspect-ratio:16/11; object-fit:cover;
  border-radius:var(--r-lg);
  transition:transform 1s var(--ease-out);
}
.tile__btn:hover img{ transform:scale(1.06); }

.location__map img,
.location__map iframe{
  width:100%; height:100%; min-height:340px; display:block; border:0;
  aspect-ratio:7/5; object-fit:cover;
  border-radius:var(--r-lg);
}

/* ---------- 8. Hero ---------- */
.hero{ padding:8px 0 0; }
.hero__frame{
  position:relative;
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--sh-lg);
}
.hero__frame .ph{ border-radius:var(--r-xl); }
.hero__phtag{
  position:absolute; z-index:2; top:78px; right:18px;
  padding:6px 14px;
  font-size:11px; font-weight:600; letter-spacing:.06em; white-space:nowrap;
  color:var(--ink-2);
  background:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.9);
  border-radius:var(--r-pill);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(to top,
      rgba(20,17,14,.74) 0%,
      rgba(20,17,14,.44) 30%,
      rgba(20,17,14,.10) 58%,
      rgba(20,17,14,0)   78%);
}
.hero__body{
  position:absolute; left:0; right:0; bottom:0;
  padding:clamp(24px, 4vw, 52px);
  padding-bottom:clamp(96px, 11vw, 120px);
  color:#fff;
  max-width:760px;
}
.hero__title{
  margin:18px 0 14px;
  font-size:clamp(32px, 5.6vw, 60px);
  line-height:1.16;
  font-weight:600;
  letter-spacing:-.02em;
  text-shadow:0 2px 30px rgba(0,0,0,.25);
}
.hero__lead{
  font-size:clamp(13.5px, 1.4vw, 15.5px);
  line-height:1.95;
  color:rgba(255,255,255,.86);
  max-width:52ch;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }

.hero__meta{
  position:absolute; left:clamp(24px,4vw,52px); right:clamp(24px,4vw,52px);
  bottom:clamp(24px,3vw,34px);
  display:flex; gap:8px; flex-wrap:wrap;
}
.hero__meta li{
  flex:1 1 120px;
  padding:12px 18px;
  border-radius:var(--r-md);
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#fff;
  display:flex; flex-direction:column; line-height:1.4;
  transition:background-color .3s var(--ease), transform .3s var(--ease);
}
.hero__meta li:hover{ background:rgba(255,255,255,.2); transform:translateY(-3px); }
.hero__meta strong{ font-size:19px; font-weight:700; letter-spacing:-.01em; }
.hero__meta span{ font-size:11px; letter-spacing:.08em; color:rgba(255,255,255,.72); }

/* ---------- 9. Shared section styles ---------- */
.section{ padding:var(--sec-y) 0; }
.section--tint{
  background:var(--cream-deep);
  border-block:1px solid var(--line-soft);
}

.lede{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:40px;
  align-items:start;
  padding-bottom:54px;
  border-bottom:1px solid var(--line);
}
.lede > .pill{ justify-self:start; }
.lede__text{
  font-size:clamp(16px, 1.9vw, 20px);
  line-height:1.95;
  letter-spacing:-.005em;
}

.sec-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:end;
  margin-bottom:44px;
}
.sec-head .pill{ margin-bottom:18px; }
.sec-head__side{
  display:flex; flex-direction:column; align-items:flex-start; gap:20px;
  padding-bottom:4px;
}

/* ---------- 10. About ---------- */
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
  padding:56px 0;
}
.about-grid--flip{ padding:0; }
.about-grid--flip .about-grid__media{ order:2; }
.about-grid--flip .about-grid__body{ order:1; }
.about-grid__body .pill{ margin-bottom:16px; }
.dogs__title{ margin-bottom:14px; }
.about-grid__media{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm); }
.about-grid__media .ph{ border-radius:var(--r-lg); transition:transform .9s var(--ease-out); }
.about-grid__media:hover .ph{ transform:scale(1.035); }
.about-grid__body{ display:flex; flex-direction:column; gap:30px; }
.about-grid__body .btn{ margin-top:20px; align-self:flex-start; }

.stats{ display:flex; gap:44px; padding-bottom:28px; border-bottom:1px solid var(--line); }
.stat__num{
  display:block;
  font-size:clamp(32px, 4.4vw, 46px);
  font-weight:700; line-height:1.1;
  letter-spacing:-.03em;
  color:var(--ink);
}
.stat__label{ font-size:12.5px; color:var(--muted); letter-spacing:.03em; }

.logos{
  margin-top:24px; padding-top:36px;
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:90px 1fr; gap:24px; align-items:center;
}
.logos__label{
  font-size:11px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}
.logos__list{
  display:flex; flex-wrap:wrap; gap:14px 40px; align-items:center;
}
.logos__list li{
  font-size:13px; font-weight:700; letter-spacing:.1em;
  color:var(--muted); opacity:.6;
  filter:grayscale(1);
  transition:opacity .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
  cursor:default;
}
.logos__list li:hover{ opacity:1; color:var(--accent); transform:translateY(-2px); }

/* ---------- 11. Cards ---------- */
.cards{ display:grid; gap:var(--gap); grid-auto-rows:1fr; }   /* give every card the same height */
.cards--3{ grid-template-columns:repeat(3,1fr); }
.cards--2{ grid-template-columns:repeat(2,1fr); }
.cards--rooms .card__body{ padding:20px 14px 16px; }

.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:12px;
  display:flex; flex-direction:column;
  transition:transform .42s var(--ease-out), box-shadow .42s var(--ease-out),
             border-color .3s var(--ease);
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:var(--sh-md);
  border-color:transparent;
}
.card__media{ border-radius:var(--r-md); overflow:hidden; }
.card__media .ph{ border-radius:var(--r-md); transition:transform .9s var(--ease-out); }
.card:hover .card__media .ph{ transform:scale(1.06); }
.card__body{ padding:18px 12px 14px; }
.card__title{
  font-size:16.5px; font-weight:600; letter-spacing:-.005em;
  margin-bottom:8px;
  display:flex; align-items:center; gap:8px;
}
.card__title::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--accent-2); flex:none;
  transition:background-color .3s var(--ease), transform .3s var(--ease);
}
.card:hover .card__title::before{ background:var(--accent); transform:scale(1.5); }
.card__text{ font-size:13.5px; line-height:1.9; color:var(--muted); }

.amenities{
  margin-top:42px; padding:34px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
}
.amenities__title{
  font-size:13px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-bottom:18px;
}
.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.amenities__note{
  margin-top:20px; padding-top:18px; border-top:1px solid var(--line);
  font-size:13px; color:var(--muted); line-height:1.85;
}
.chips li{
  padding:7px 15px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  font-size:12.5px; color:var(--ink-2);
  background:var(--cream);
  transition:background-color .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease);
  cursor:default;
}
.chips li:hover{
  background:var(--dark); color:#fff; border-color:var(--dark);
  transform:translateY(-2px);
}

/* ---------- 12. Gallery ---------- */
.gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap); }
.tile{ border-radius:var(--r-lg); }
.tile__btn{
  display:block; width:100%; padding:0;
  border:0; background:none; cursor:pointer;
  border-radius:var(--r-lg);
  overflow:hidden;
  position:relative;
  box-shadow:var(--sh-sm);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.tile__btn:hover{ transform:translateY(-6px); box-shadow:var(--sh-md); }
.tile__btn .ph{ border-radius:var(--r-lg); transition:transform 1s var(--ease-out); }
.tile__btn .ph::after{ bottom:auto; top:14px; }
.tile__btn:hover .ph{ transform:scale(1.06); }
.tile__bar{
  position:absolute; left:14px; right:14px; bottom:14px; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 11px 11px 20px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-radius:var(--r-pill);
  font-size:13.5px; font-weight:600;
  transform:translateY(4px); opacity:.96;
  transition:transform .4s var(--ease-out), opacity .3s var(--ease);
}
.tile__btn:hover .tile__bar{ transform:translateY(0); opacity:1; }
.tile__arrow{
  width:28px; height:28px; flex:none; border-radius:50%;
  background:var(--dark); position:relative;
  transition:transform .4s var(--ease-out), background-color .3s var(--ease);
}
.tile__arrow::before{
  content:""; position:absolute; top:50%; left:50%;
  width:8px; height:8px; margin:-4px 0 0 -6px;
  border-top:1.6px solid #fff; border-right:1.6px solid #fff;
  transform:rotate(45deg);
}
.tile__btn:hover .tile__arrow{ background:var(--accent); transform:rotate(45deg); }

/* ---------- 13. Location ---------- */
.location{
  display:grid; grid-template-columns:1.15fr .85fr; gap:var(--gap);
  align-items:stretch;
}
.location__map{
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--sh-sm);
}
.location__map .ph{ border-radius:var(--r-lg); height:100%; }
.location__info{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:34px;
  display:flex; flex-direction:column; gap:10px;
}
.location__info .h4:not(:first-child){ margin-top:18px; }
.facts li{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:11px 0;
  border-bottom:1px dashed var(--line);
  font-size:13.5px;
  transition:padding-left .3s var(--ease), color .3s var(--ease);
}
.facts li:hover{ padding-left:8px; color:var(--accent); }
.facts li span{ color:var(--muted); }
.facts li b{ font-weight:600; white-space:nowrap; }
.location__info .note{ margin-top:14px; }

/* ---------- 14. Reviews ---------- */
.rating{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.rating__score{ font-size:34px; font-weight:700; letter-spacing:-.03em; line-height:1; }
.rating__count{ font-size:13px; color:var(--muted); }
.stars{ display:flex; gap:3px; }
.stars i{
  width:15px; height:15px;
  background:var(--accent);
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.scores{
  display:grid; grid-template-columns:260px 1fr; gap:var(--gap);
  align-items:center;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(24px, 3vw, 34px);
  margin-bottom:var(--gap);
}
.scores__overall{
  display:flex; flex-direction:column; gap:6px;
  padding-right:28px; border-right:1px solid var(--line);
}
.scores__num{ font-size:clamp(40px, 5vw, 54px); font-weight:700; letter-spacing:-.035em; line-height:1; }
.scores__meta{ font-size:12.5px; color:var(--muted); }
.scores__grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:18px 32px;
}
.scores__grid li{ display:grid; grid-template-columns:1fr auto; gap:2px 10px; align-items:baseline; }
.scores__grid span{ font-size:12.5px; color:var(--muted); }
.scores__grid b{ font-size:13.5px; font-weight:700; }
.scores__grid i{
  grid-column:1 / -1;
  height:3px; border-radius:3px;
  background:var(--line-soft);
  position:relative; overflow:hidden;
}
.scores__grid i::after{
  content:""; position:absolute; inset:0 auto 0 0;
  width:var(--v, 0%); border-radius:3px;
  background:linear-gradient(90deg, var(--accent-2), var(--accent));
  transform-origin:left center; transform:scaleX(0);
  transition:transform 1s var(--ease-out);
}
.scores.is-in .scores__grid i::after{ transform:scaleX(1); }

.card--quote{ padding:32px; position:relative; display:flex; flex-direction:column; }
.quote__mark{
  position:absolute; top:14px; right:26px;
  font-size:72px; line-height:1; color:var(--accent-2); opacity:.45;
  font-family:Georgia, serif;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.card--quote:hover .quote__mark{ opacity:.8; transform:translateY(-3px); }
.quote__text{
  font-size:15px; line-height:1.95; color:var(--ink-2);
  margin-bottom:24px; position:relative; z-index:1;
}
.quote__text + .quote__text{ margin-top:-12px; }
.card--slot{
  background:rgba(255,255,255,.45);
  border-style:dashed;
  border-color:var(--accent-2);
}
.card--slot .quote__text{ color:var(--muted); }
.card--slot .person__ava{ background:var(--line); color:var(--muted); }
.card--slot .person__meta b,
.card--slot .person__meta em{ color:var(--muted); }
.slot__tag{
  display:inline-block; align-self:flex-start; margin-bottom:16px;
  padding:5px 13px; border-radius:var(--r-pill);
  background:var(--accent-2); color:var(--dark);
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.person{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:18px; border-top:1px solid var(--line); }
.person__ava{
  width:40px; height:40px; flex:none; border-radius:50%;
  background:linear-gradient(140deg,var(--accent-2),var(--accent));
  color:#fff; font-weight:700; font-size:15px;
  display:grid; place-items:center;
}
.person__meta{ display:flex; flex-direction:column; line-height:1.4; }
.person__meta b{ font-size:14px; font-weight:600; }
.person__meta em{ font-style:normal; font-size:12px; color:var(--muted); }

/* ---------- 15. Rates & enquiry panel ---------- */
.enquire{
  display:grid; grid-template-columns:1.05fr .95fr; gap:var(--gap);
  align-items:stretch;
}
.enquire__panel{
  background:var(--dark); color:#fff;
  border-radius:var(--r-lg);
  padding:clamp(28px, 3.4vw, 42px);
  display:flex; flex-direction:column;
  box-shadow:var(--sh-md);
  position:relative; overflow:hidden;
}
.enquire__panel::after{   /* very faint diagonal texture, bottom right (same motif as the hero) */
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(
    -45deg, rgba(255,255,255,.045) 0 1px, transparent 1px 13px);
  pointer-events:none;
}
.enquire__title{
  font-size:clamp(20px, 2.3vw, 27px); font-weight:600; line-height:1.5;
  letter-spacing:-.01em; margin-bottom:26px;
}
.enquire__contact{ margin-bottom:30px; flex:1; }
.enquire__contact li{
  display:flex; flex-direction:column; gap:3px;
  padding:14px 0; border-top:1px solid rgba(255,255,255,.14);
}
.enquire__contact li:last-child{ border-bottom:1px solid rgba(255,255,255,.14); }
.enquire__contact span{
  font-size:10.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-2);
}
.enquire__contact a{
  font-size:15px; font-weight:600; word-break:break-word;
  position:relative; display:inline-block;
  transition:color .25s var(--ease);
}
.enquire__contact a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background:var(--accent-2); transition:width .3s var(--ease);
}
.enquire__contact a:hover{ color:var(--accent-2); }
.enquire__contact a:hover::after{ width:100%; }
.enquire__panel .btn--dark{ --btn-bg:#fff; --btn-fg:var(--dark); align-self:flex-start; }
.enquire__panel .btn--dark::before{ background:var(--accent-2); }
.enquire__panel .btn--dark .btn__arrow{ background:var(--dark); }
.enquire__panel .btn--dark .btn__arrow::before,
.enquire__panel .btn--dark .btn__arrow::after{ border-color:#fff; }

.enquire__side{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(26px, 3.2vw, 38px);
  display:flex; flex-direction:column; gap:18px;
}

/* Ticked list */
.ticks{ display:flex; flex-direction:column; gap:12px; }
.ticks li{
  position:relative; padding-left:28px;
  font-size:14px; line-height:1.85; color:var(--ink-2);
}
.ticks li::before{
  content:""; position:absolute; left:2px; top:9px;
  width:12px; height:6.5px;
  border-left:1.9px solid var(--accent); border-bottom:1.9px solid var(--accent);
  transform:rotate(-45deg);
}

.steps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap);
  margin-top:44px;
}
.step{
  position:relative;
  padding:30px 28px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.55);
  overflow:hidden;
  transition:background-color .35s var(--ease), transform .35s var(--ease-out);
}
.step::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--accent);
  transition:width .5s var(--ease-out);
}
.step:hover{ background:var(--paper); transform:translateY(-4px); }
.step:hover::after{ width:100%; }
.step__no{
  display:inline-block; margin-bottom:16px;
  font-size:12px; font-weight:700; letter-spacing:.14em;
  color:var(--accent);
}
.step__title{ font-size:16px; font-weight:600; margin-bottom:8px; }
.step__text{ font-size:13.5px; line-height:1.9; color:var(--muted); }

/* ---------- 16. FAQ ---------- */
.faq{ margin-top:56px; }
.faq__head{ text-align:center; margin-bottom:26px; }
.acc{
  max-width:820px; margin-inline:auto;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.acc__item + .acc__item{ border-top:1px solid var(--line); }
.acc__q{
  width:100%; text-align:left; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:22px 26px;
  background:none; border:0;
  font-size:15px; font-weight:600;
  transition:background-color .25s var(--ease), color .25s var(--ease);
}
.acc__q:hover{ background:var(--cream); color:var(--accent); }
.acc__q i{
  position:relative; width:24px; height:24px; flex:none;
  border:1px solid var(--line); border-radius:50%;
  transition:transform .4s var(--ease-out), background-color .3s var(--ease),
             border-color .3s var(--ease);
}
.acc__q i::before,
.acc__q i::after{
  content:""; position:absolute; top:50%; left:50%;
  background:var(--ink); border-radius:2px;
  transform:translate(-50%,-50%);
  transition:opacity .3s var(--ease), background-color .3s var(--ease);
}
.acc__q i::before{ width:9px; height:1.5px; }
.acc__q i::after{ width:1.5px; height:9px; }
.acc__q[aria-expanded="true"] i{
  transform:rotate(180deg); background:var(--dark); border-color:var(--dark);
}
.acc__q[aria-expanded="true"] i::before{ background:#fff; }
.acc__q[aria-expanded="true"] i::after{ opacity:0; }
.acc__a{
  overflow:hidden; height:0;
  transition:height .42s var(--ease-out);
}
.acc__a p{
  padding:0 26px 24px;
  font-size:14px; line-height:1.95; color:var(--muted);
  max-width:64ch;
}

/* ---------- 16b. House rules ---------- */
.rules{ margin-top:56px; }
.rules__head{ text-align:center; margin-bottom:8px; }
.rules__lead{
  text-align:center; max-width:60ch; margin:0 auto 26px;
  font-size:14px; line-height:1.9; color:var(--muted);
}
.rules__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(285px, 1fr));   /* gives a 3 then 3 + 2 arrangement */
  gap:var(--gap);
}
.rules__block{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:26px 24px;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.rules__block:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); }
.rules__block .h4{ margin-bottom:10px; }
.rules__list li{
  font-size:13.5px; line-height:1.85; color:var(--ink-2);
  padding:9px 0;
  border-bottom:1px dashed var(--line);
}
.rules__list li:last-child{ border-bottom:0; padding-bottom:0; }

/* ---------- 17. Contact ---------- */
.contact{
  display:grid; grid-template-columns:1fr 1fr; gap:56px;
  align-items:start;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:clamp(28px, 4.4vw, 56px);
  box-shadow:var(--sh-sm);
}
.contact__intro .pill{ margin-bottom:18px; }
.contact__intro .h2{ margin-bottom:16px; }
.contact__list{ margin-top:28px; border-top:1px solid var(--line); }
.contact__list li{
  display:flex; gap:16px; align-items:baseline;
  padding:12px 0; border-bottom:1px solid var(--line);
  font-size:13.5px;
}
.contact__list li span{
  width:66px; flex:none; color:var(--muted);
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.contact__list li b{ font-weight:600; word-break:break-word; }
.contact__list li b a{
  position:relative; transition:color .25s var(--ease);
}
.contact__list li b a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background:var(--accent); transition:width .3s var(--ease);
}
.contact__list li b a:hover{ color:var(--accent); }
.contact__list li b a:hover::after{ width:100%; }
.form__note a{ color:var(--accent); font-weight:600; }
.acc__a a{ color:var(--accent); font-weight:600; }

.form{ display:flex; flex-direction:column; gap:16px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field__label{
  font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--ink-2);
}
.field__label i{ color:var(--accent); font-style:normal; }
.field input,
.field select,
.field textarea{
  width:100%;
  padding:13px 16px;
  font-family:inherit; font-size:14px; color:var(--ink);
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  transition:border-color .25s var(--ease), background-color .25s var(--ease),
             box-shadow .25s var(--ease);
}
.field textarea{ resize:vertical; min-height:110px; line-height:1.8; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  background:var(--paper);
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(142,114,83,.13);
}
.field input::placeholder,
.field textarea::placeholder{ color:#B6AEA3; }
.field.is-invalid input,
.field.is-invalid textarea{ border-color:#C0553F; background:#FDF4F1; }
.field__error{
  font-size:11.5px; color:#C0553F; min-height:0;
  opacity:0; max-height:0; overflow:hidden;
  transition:opacity .25s var(--ease), max-height .25s var(--ease);
}
.field.is-invalid .field__error{ opacity:1; max-height:2em; }
.form__note{ font-size:11.5px; color:var(--muted); line-height:1.7; }
.form__fail{
  padding:14px 18px; border-radius:var(--r-sm);
  background:#FDF4F1; border:1px solid #E7C6BC;
  color:#A2402C; font-size:13px; line-height:1.7; font-weight:600;
}
.form__done{
  padding:14px 18px; border-radius:var(--r-sm);
  background:#EEF2E9; border:1px solid #D6DFC8;
  color:#4A5A3C; font-size:13.5px; font-weight:600;
  animation:popIn .45s var(--ease-out) both;
}
@keyframes popIn{
  from{ opacity:0; transform:translateY(8px) scale(.98); }
  to{ opacity:1; transform:none; }
}

/* ---------- 18. Footer ---------- */
.footer{
  background:var(--dark); color:rgba(255,255,255,.72);
  padding:76px 0 30px;
  margin-top:0;
}
.footer__top{
  display:grid; grid-template-columns:1fr 1fr; gap:40px;
  padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.12);
}
.brand--footer .brand__mark{ background:none; color:var(--brand-ink); }   /* light colour, as it sits on a dark background */
.brand--footer .brand__text{ color:#fff; }
.brand--footer .brand__text em{ color:rgba(255,255,255,.45); }
.footer__lead{ font-size:15px; line-height:1.9; color:rgba(255,255,255,.6); }

.footer__cols{
  display:grid; grid-template-columns:repeat(3,1fr); gap:40px;
  padding:44px 0;
}
.footer__col h4{
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-2); margin-bottom:16px;
}
.footer__col li{ font-size:13.5px; line-height:2.2; }
.footer__col a{
  position:relative; transition:color .25s var(--ease), padding-left .25s var(--ease);
}
.footer__col a::before{
  content:""; position:absolute; left:0; top:50%;
  width:0; height:1px; background:var(--accent-2);
  transition:width .25s var(--ease);
}
.footer__col a:hover{ color:#fff; padding-left:16px; }
.footer__col a:hover::before{ width:10px; }

.footer__bottom{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  flex-wrap:wrap;
  padding-top:26px; border-top:1px solid rgba(255,255,255,.12);
  font-size:12px; color:rgba(255,255,255,.45);
}
.to-top{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:600; color:rgba(255,255,255,.75);
  transition:color .25s var(--ease);
}
.to-top i{
  width:28px; height:28px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  position:relative;
  transition:background-color .3s var(--ease), transform .3s var(--ease-out),
             border-color .3s var(--ease);
}
.to-top i::before{
  content:""; position:absolute; top:11px; left:50%;
  width:8px; height:8px; margin-left:-4px;
  border-top:1.5px solid currentColor; border-right:1.5px solid currentColor;
  transform:rotate(-45deg);
}
.to-top:hover{ color:#fff; }
.to-top:hover i{ background:rgba(255,255,255,.14); transform:translateY(-3px); border-color:transparent; }

/* ---------- 18b. Floating "back to top" button (bottom right) ---------- */
.to-top-fab{
  position:fixed; right:22px; bottom:22px; z-index:95;
  width:48px; height:48px; padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--dark);
  color:#fff;
  cursor:pointer;
  display:grid; place-items:center;
  box-shadow:var(--sh-md);
  opacity:0; transform:translateY(14px) scale(.9);
  pointer-events:none;
  transition:opacity .35s var(--ease), transform .45s var(--ease-out),
             background-color .3s var(--ease);
}
.to-top-fab.is-on{ opacity:1; transform:none; pointer-events:auto; }
.to-top-fab:hover{ background:var(--accent); }
.to-top-fab__arrow{
  position:relative; width:12px; height:14px; display:block;
  transition:transform .3s var(--ease-out);
}
.to-top-fab__arrow::before{
  content:""; position:absolute; top:2px; left:1px;
  width:9px; height:9px;
  border-top:1.8px solid currentColor; border-right:1.8px solid currentColor;
  transform:rotate(-45deg);
}
.to-top-fab__arrow::after{
  content:""; position:absolute; top:1px; left:5.1px;
  width:1.8px; height:12px; background:currentColor; border-radius:2px;
}
.to-top-fab:hover .to-top-fab__arrow{ transform:translateY(-2px); }

@media (max-width:600px){
  .to-top-fab{ right:16px; bottom:16px; width:44px; height:44px; }
}

/* ---------- 19. Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:150;
  display:grid; place-items:center;
  padding:24px;
  background:rgba(22,19,16,.9);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  transition:opacity .3s var(--ease);
}
.lightbox[hidden]{ display:none; }   /* so display:grid does not override [hidden] */
.lightbox.is-on{ opacity:1; }
.lightbox__inner{
  margin:0; width:min(100%, 960px);
  transform:scale(.96) translateY(10px);
  transition:transform .42s var(--ease-out);
}
.lightbox.is-on .lightbox__inner{ transform:none; }
.lightbox__inner .ph{ border-radius:var(--r-lg); }
.lightbox__img{
  width:100%; height:auto; border-radius:var(--r-lg);
  max-height:78vh; object-fit:contain; margin-inline:auto;
}
.lightbox__inner figcaption{
  margin-top:16px; text-align:center;
  color:rgba(255,255,255,.78); font-size:13.5px;
}
.lightbox__close,
.lightbox__nav{
  position:absolute;
  width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);
  cursor:pointer;
  transition:background-color .25s var(--ease), transform .25s var(--ease-out);
}
.lightbox__close:hover,
.lightbox__nav:hover{ background-color:rgba(255,255,255,.2); transform:scale(1.07); }
.lightbox__close{ top:22px; right:22px; }
.lightbox__close::before,
.lightbox__close::after{
  content:""; position:absolute; top:50%; left:50%;
  width:16px; height:1.6px; background:#fff;
  transform:translate(-50%,-50%) rotate(45deg);
}
.lightbox__close::after{ transform:translate(-50%,-50%) rotate(-45deg); }
.lightbox__nav{ top:50%; margin-top:-23px; }
.lightbox__nav{
  background-repeat:no-repeat;
  background-position:center;
  background-size:20px 20px;
}
.lightbox__nav:hover{ background-color:rgba(255,255,255,.2); }
.lightbox__nav--prev{
  left:22px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18 9 12l6-6'/%3E%3C/svg%3E");
}
.lightbox__nav--next{
  right:22px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}

/* ---------- 20. Scroll reveal ---------- */
.reveal{
  opacity:0;
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay:calc(var(--d, 0) * 90ms);
  will-change:opacity, transform;
}
.reveal[data-reveal="fade-up"]{ transform:translateY(28px); }
.reveal[data-reveal="fade-right"]{ transform:translateX(-28px); }
.reveal[data-reveal="fade-left"]{ transform:translateX(28px); }
.reveal.is-in{ opacity:1; transform:none; }

/* ---------- 21. Responsive ---------- */
@media (max-width:1024px){
  :root{ --sec-y:86px; --gap:18px; }
  .cards--3{ grid-template-columns:repeat(2,1fr); }
  .location{ grid-template-columns:1fr; }
  .location__map .ph{ aspect-ratio:16/9; }
  .about-grid{ gap:36px; }
  .contact{ gap:36px; }
}

@media (max-width:860px){
  .nav{
    position:fixed; inset:0 0 0 auto; z-index:95;
    width:min(86vw, 340px);
    margin:0;
    padding:96px 26px 40px;
    background:var(--cream);
    border-left:1px solid var(--line);
    box-shadow:-20px 0 60px rgba(35,30,24,.14);
    transform:translateX(100%);
    visibility:hidden;   /* keeps it out of the focus order while closed */
    transition:transform .45s var(--ease-out), visibility 0s linear .45s;
    display:flex; flex-direction:column; gap:26px;
    overflow-y:auto;
  }
  .nav.is-open{ transform:none; visibility:visible; transition-delay:0s; }
  .nav ul{ flex-direction:column; align-items:stretch; gap:2px; }
  .nav ul a{
    padding:14px 16px; font-size:15.5px;
    border-radius:var(--r-sm);
    border-bottom:1px solid var(--line-soft);
  }
  .nav ul a::after{ display:none; }
  .nav ul a.is-active{ background:var(--paper); }
  .nav .nav__cta{ display:inline-flex; align-self:stretch; justify-content:space-between; }
  .header__cta{ display:none; }
  .burger{ display:block; position:relative; z-index:110; }   /* in front of the drawer */
  /* The nav becomes a drawer, so the header is 2 columns: logo | burger.
     With 3 columns the logo would be held to half the width and wrap */
  .header__inner{ grid-template-columns:1fr auto; }
  .header__inner > .burger{ grid-column:2; }

  .lede{ grid-template-columns:1fr; gap:20px; padding-bottom:36px; }
  .sec-head{ grid-template-columns:1fr; gap:24px; align-items:start; }
  .about-grid{ grid-template-columns:1fr; padding:40px 0; }
  .about-grid--flip{ padding:0; }
  .about-grid--flip .about-grid__media{ order:1; }
  .about-grid--flip .about-grid__body{ order:2; }
  .cards--2{ grid-template-columns:1fr; }
  .scores{ grid-template-columns:1fr; }
  .scores__overall{
    padding:0 0 20px; border-right:0; border-bottom:1px solid var(--line);
  }
  .scores__grid{ grid-template-columns:repeat(2, 1fr); }
  .gallery{ grid-template-columns:1fr; }
  .enquire{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .contact{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; gap:24px; }
  .footer__cols{ grid-template-columns:1fr 1fr; gap:28px; }
}

@media (max-width:600px){
  :root{ --sec-y:68px; --r-xl:24px; --r-lg:20px; }
  body{ font-size:15px; }
  .shell{ width:min(100% - 32px, var(--shell)); }

  .hero{ padding-top:4px; }
  /* On phones the hero fits the height of the screen exactly.
     svh keeps that height steady as the address bar grows and shrinks */
  .hero__frame{
    height:calc(100vh - 82px);
    height:calc(100svh - 82px);
    /* The photograph and the veil are absolute, so only the body and the meta
       are stacked to the bottom - text can grow without overlapping */
    display:flex; flex-direction:column; justify-content:flex-end;
  }
  .hero__frame > img,
  .ph--hero{
    position:absolute; inset:0;
    width:100%; height:100%;
    aspect-ratio:auto; min-height:0;
    object-fit:cover;
  }
  .hero__body{
    position:static;
    padding:0 20px 14px;
  }
  .hero__meta{
    position:static;
    margin:0; padding:0 16px 16px;
  }
  .hero__phtag{ top:14px; right:14px; font-size:10px; padding:5px 10px; }
  .hero__title{ font-size:clamp(25px, 7.2vw, 32px); margin:14px 0 12px; }
  .hero__lead{ font-size:13px; line-height:1.8; }
  .hero__lead br{ display:none; }
  .hero__actions{ margin-top:18px; gap:8px; }
  .hero__actions .btn{ flex:1 1 auto; justify-content:center; }
  .hero__meta{ gap:6px; }
  .hero__meta li{ flex:1 1 0; min-width:0; padding:9px 11px; }
  .hero__meta strong{ font-size:14px; }
  .hero__meta span{ font-size:9.5px; line-height:1.35; }

  .h2 br,.hero__title br{ }
  .stats{ gap:24px; }
  .cards--3{ grid-template-columns:1fr; }
  .logos{ grid-template-columns:1fr; gap:14px; }
  .logos__list{ gap:12px 24px; }
  .logos__list li{ font-size:11.5px; }
  .amenities{ padding:24px 20px; }
  .location__info{ padding:24px 20px; }
  .card--quote{ padding:24px 22px; }
  .form__row{ grid-template-columns:1fr; }
  .scores__grid{ grid-template-columns:1fr; gap:14px; }
  .acc__q{ padding:18px 20px; font-size:14px; }
  .acc__a p{ padding:0 20px 20px; }
  .footer{ padding-top:56px; }
  .footer__cols{ grid-template-columns:1fr; }
  .ph::after{ font-size:10px; padding:5px 10px; bottom:10px; }
  .lightbox__nav{ top:auto; bottom:22px; margin-top:0; }
  .lightbox__nav--prev{ left:calc(50% - 56px); }
  .lightbox__nav--next{ right:calc(50% - 56px); }
}

/* ---------- 22. Accessibility ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
}

@media print{
  .site-header,.footer,.lightbox,.burger{ display:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  body{ background:#fff; }
}