/* Brand: the logo's colours, used exactly as is.
   --green is Pantone 376 C from the brief.
   --grey is sampled from the logo JPG.
   The green fails contrast as text on white, so it is only used for fills,
   accents and on the dark band, never for body text. */
:root {
  --green: #84bd00;
  --grey: #4c4848;
  --ink: #2b2a29;
  --muted: #5f5d5b;
  --tint: #f4f6f0;
  --line: #e2e4dd;
  --white: #ffffff;
  --radius: 10px;
  --wrap: 1120px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
}

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

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }

h1, h2, h3 { line-height: 1.2; color: var(--grey); margin: 0 0 .6em; text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.2rem; }
p, li { text-wrap: pretty; }
p  { margin: 0 0 1em; }

.eyebrow {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  border-left: 4px solid var(--green);
  padding-left: .6em;
  margin-bottom: 1em;
}
.lead { font-size: 1.15rem; color: var(--muted); max-width: 46em; }

:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; }
.brand img { height: 56px; width: auto; }
.nav { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav a { display: block; padding: 8px 12px; text-decoration: none; font-weight: 600; font-size: .95rem; color: var(--grey); border-radius: 6px; }
.nav a:hover { background: var(--tint); }
.nav .nav-cta { background: var(--green); color: var(--ink); }
.nav .nav-cta:hover { background: var(--green); filter: brightness(.95); }
.menu-toggle { display: none; }

/* Phones: the links fold behind a menu button. Without JavaScript,
   no-js.css hides the button and shows the links as a wrapped row. */
@media (max-width: 760px) {
  .brand img { height: 40px; }
  .menu-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 14px; border: 2px solid var(--grey); border-radius: 999px;
    background: var(--white); color: var(--grey); font: inherit; font-weight: 700; cursor: pointer;
  }
  .menu-icon, .menu-icon::before, .menu-icon::after {
    display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px;
    transition: transform .2s, opacity .2s;
  }
  .menu-icon { position: relative; }
  .menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; }
  .menu-icon::before { top: -6px; }
  .menu-icon::after { top: 6px; }
  .menu-toggle[aria-expanded="true"] .menu-icon { background: transparent; }
  .menu-toggle[aria-expanded="true"] .menu-icon::before { transform: translateY(6px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-icon::after { transform: translateY(-6px) rotate(-45deg); }

  .nav {
    display: none;
    position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--white); border-bottom: 1px solid var(--line);
    padding: 8px 16px 16px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
  }
  .nav.open { display: flex; }
  .nav a { padding: 14px 12px; font-size: 1.05rem; }
  .nav .nav-cta { margin-top: 8px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-icon, .menu-icon::before, .menu-icon::after { transition: none; }
}

/* 404 page */
.not-found { min-height: 70vh; }
.not-found .brand img { height: 56px; margin-bottom: 40px; }

/* Buttons */
.buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.5em; }
.btn {
  display: inline-block;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  transition: filter .15s, background .15s;
}
.btn-primary { background: var(--green); color: var(--ink); }
.btn-primary:hover { filter: brightness(.95); }
.btn-secondary { border-color: var(--grey); color: var(--grey); background: transparent; }
.btn-secondary:hover { background: var(--grey); color: var(--white); }

/* Placeholders for photos still to come */
.placeholder {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: repeating-linear-gradient(45deg, #eef0ea, #eef0ea 12px, #e6e9e0 12px, #e6e9e0 24px);
  color: var(--muted);
  font-size: .9rem; font-weight: 600;
  border-radius: var(--radius);
}

/* Photos fill their slot; the slot's aspect-ratio sets the shape */
.photo { width: 100%; height: auto; object-fit: cover; border-radius: var(--radius); background: var(--tint); }

/* Hero */
.hero { padding: 48px 0 64px; }
.hero-inner { display: grid; gap: 32px; align-items: center; }
.hero-image { aspect-ratio: 4 / 3; }
@media (min-width: 900px) {
  .hero { padding: 80px 0 96px; }
  .hero-inner { grid-template-columns: 1.15fr 1fr; gap: 56px; }
}

/* Sections */
.section { padding: 64px 0; }
.section-tint { background: var(--tint); }
.section-dark { background: var(--grey); }
.section-dark h2 { color: var(--white); }
.section-dark .eyebrow { color: #d9d7d5; }

.split { display: grid; gap: 24px; }
@media (min-width: 900px) {
  .section { padding: 88px 0; }
  .split { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
}

.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding: 12px 0 12px 36px; border-bottom: 1px solid var(--line); }
.ticks li:last-child { border-bottom: 0; }
.ticks li::before {
  content: ""; position: absolute; left: 4px; top: 18px;
  width: 16px; height: 9px;
  border-left: 3px solid var(--green); border-bottom: 3px solid var(--green);
  transform: rotate(-45deg);
}

/* Spaces */
.cards { display: grid; gap: 24px; margin-top: 32px; }
@media (min-width: 760px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.card-image { aspect-ratio: 3 / 2; border-radius: 0; }
.card-body { padding: 20px 22px 24px; }
.card-body h3 { margin-bottom: .2em; }
.capacity { display: inline-block; font-weight: 700; color: var(--ink); background: var(--green); padding: 2px 10px; border-radius: 999px; font-size: .85rem; margin-bottom: 1em; }
.features { color: var(--muted); font-size: .95rem; margin: 0; }

/* What we take care of */
.services { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.services li { background: rgba(255, 255, 255, .08); color: var(--white); padding: 16px 18px; border-radius: 6px; font-weight: 600; }

/* "What we take care of" over the client's welcome-drinks photo. The dark
   wash keeps white text readable; the grey shows if the photo doesn't load. */
.section-photo {
  background:
    linear-gradient(rgba(36, 34, 34, .74), rgba(36, 34, 34, .86)),
    url("assets/img/photos/services-bg-800.jpg") center / cover no-repeat,
    var(--grey);
}
@media (min-width: 800px) {
  .section-photo {
    background:
      linear-gradient(rgba(36, 34, 34, .74), rgba(36, 34, 34, .86)),
      url("assets/img/photos/services-bg-1280.jpg") center / cover no-repeat,
      var(--grey);
  }
}
.section-photo .services li {
  background: rgba(20, 19, 19, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Service cards: icon, name, one-line detail. One column on small phones,
   two on larger phones and tablets, three on desktop. */
.services { grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 520px) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .services { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.services li { display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 24px; border-radius: var(--radius); }
.service-icon {
  width: 32px; height: 32px; margin-bottom: 8px;
  fill: none; stroke: var(--green); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.services strong { font-size: 1.1rem; }
.services span { font-weight: 400; color: #dcdad8; font-size: .97rem; line-height: 1.5; }

/* Location */
.address-block { background: var(--tint); border-radius: var(--radius); padding: 24px; }
address { font-style: normal; font-size: 1.1rem; line-height: 1.7; margin-bottom: 1.2em; color: var(--ink); }

/* Enquire */
.contacts { display: grid; gap: 16px; margin-top: 24px; }
@media (min-width: 640px) { .contacts { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; } }
.contact { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.contact p { margin: 0 0 .3em; overflow-wrap: anywhere; }
.contact a { color: var(--grey); font-weight: 600; }

/* Footer */
.site-footer { background: var(--ink); color: #cfcdcb; font-size: .9rem; padding: 28px 0; }
.footer-inner p { margin: 0 0 .3em; }