/* 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;
}

/* Headings: Fraunces (SIL OFL, see assets/fonts/Fraunces-OFL.txt), self-hosted */
@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/fraunces-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 76px; }
@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 { font-family: "Fraunces", Georgia, "Times New Roman", serif; font-weight: 600; line-height: 1.15; 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; }

/* Dark focus ring: the green alone is too faint on white for keyboard users */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* Skip link: hidden until a keyboard user tabs to it */
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 20;
  background: var(--ink); color: var(--white);
  padding: 10px 16px; border-radius: 6px; font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* 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 a[aria-current="true"]:not(.nav-cta), .nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--green); border-radius: 0; }
.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); }

/* 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; }

/* FAQs page */
.faq-intro { padding-bottom: 0; }
.faq-intro .lead { margin-bottom: 0; }
.faq-intro + .faq-group { padding-top: 40px; }
@media (min-width: 900px) { .faq-intro { padding-top: 64px; } .faq-intro + .faq-group { padding-top: 48px; } }
.faq-intro .lead a { color: var(--grey); font-weight: 600; }
.faq-wrap { max-width: 820px; }
.faq-group h2 { margin-bottom: .8em; }

/* Each question is a native <details> dropdown: works with the keyboard and
   without JavaScript, and the answer text stays in the page for search. */
.faq { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; }
.faq summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 18px 56px 18px 20px; border-radius: var(--radius);
  font-family: "Fraunces", Georgia, "Times New Roman", serif; font-weight: 600;
  font-size: 1.1rem; line-height: 1.35; color: var(--grey);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--tint); }
.faq[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* Plus sign that becomes a minus when open */
.faq summary::before, .faq summary::after {
  content: ""; position: absolute; right: 22px; top: 50%;
  width: 14px; height: 2px; margin-top: -1px; background: var(--grey); border-radius: 2px;
  transition: transform .2s;
}
.faq summary::after { transform: rotate(90deg); }
.faq[open] summary::after { transform: rotate(0deg); }
.faq-answer { padding: 4px 20px 20px; }
.faq-answer p:last-child, .faq-answer ul:last-child { margin-bottom: 0; }
.faq-answer ul { padding-left: 1.2em; margin: 0 0 1em; }
.faq-answer li { margin-bottom: .4em; }
.faq-answer a { color: var(--grey); font-weight: 600; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .faq summary::before, .faq summary::after { transition: none; } }

/* Answers waiting on the client's wording. Must all be gone before launch. */
.needs-wording { background: #fff4c2; border-color: #e6c64a; }
.needs-wording summary:hover { background: #fbeaa6; }
.wording-note { margin-top: 1em; padding-top: .8em; border-top: 1px dashed #c9a400; font-size: .95rem; }