/* Service pages (hospitality, bookkeeping, BAS, payroll, virtual CFO). Same palette and type as the home page:
   black #030303, white, light grey #EEEEEE and navy #001789 (dots and button text only, never text on black),
   with the dark grey #232323 the home page uses for form lines. Founders Grotesk throughout. */

@font-face {
  font-family: "Founders Grotesk";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/founders-grotesk-web-regular.woff2") format("woff2"),
       url("/assets/fonts/founders-grotesk-web-regular.woff") format("woff");
}

:root {
  --blue: #001789;
  --black: #030303;
  --white: #FFFFFF;
  --light: #EEEEEE;
  --line: #232323;
}

* { box-sizing: border-box; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: "Founders Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 100%;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--white); }
p { margin: 0 0 1rem; }

.wrap { max-width: 70rem; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 768px) { .wrap { padding: 0 2.5rem; } }

/* ---------- Wave video behind the page (as on the home page) ---------- */
/* Fixed behind everything; a black layer fades in to 55% once the visitor scrolls past the first screen
   (service.js), so text further down stays easy to read. The light band and white cards cover it. */

.site-waves, .site-waves-dim { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.site-waves { object-fit: cover; }
.site-waves-dim { background: var(--black); opacity: 0; }
.site-header, main, .site-footer { position: relative; z-index: 1; }

/* ---------- Header and footer ---------- */

.site-header .wrap { display: flex; justify-content: space-between; align-items: center; padding-top: 1.5rem; padding-bottom: 1.5rem; }
.site-header .logo img { display: block; height: 2rem; width: auto; }

.site-footer { border-top: 1px solid var(--line); color: var(--light); font-size: .95rem; }
.site-footer .wrap { padding-top: 2rem; padding-bottom: 3rem; }
.site-footer p { margin: 0 0 .5rem; }

/* ---------- Type ---------- */

.eyebrow {
  position: relative;
  margin: 0 0 1.25rem;
  padding-left: 1.1em;
  font-size: 1rem;
  letter-spacing: .02em;
  color: var(--light);
}
.eyebrow::before {
  content: '';
  position: absolute;
  left: 0;
  top: .5em;
  width: .5em;
  height: .5em;
  border-radius: 50%;
  background: var(--blue);
}

h1 {
  font-weight: 400;
  font-size: clamp(2.75rem, 7.2vw, 5.75rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  margin: 0 0 1.5rem;
  max-width: 13ch;
}

h2 {
  font-weight: 400;
  font-size: clamp(2.1rem, 4.8vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0 0 1.5rem;
  max-width: 18ch;
}

h3 { font-weight: 600; font-size: 1.2rem; line-height: 1.3; margin: 0 0 .5rem; }

.lede {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.35;
  color: var(--light);
  max-width: 32ch;
  margin: 0 0 2.25rem;
}

.prose p { font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.45; color: var(--light); max-width: 40ch; }

/* ---------- Buttons and links ---------- */

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; }

.button {
  display: inline-block;
  background: var(--light);
  color: var(--blue);
  border: 0;
  border-radius: 2em;
  padding: .8em 1.6em;
  font: inherit;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms, color 200ms;
}
.button:hover, .button:focus-visible { background: var(--blue); color: var(--white); }
.button:focus-visible, .text-link:focus-visible, summary:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.button[disabled] { cursor: default; opacity: 1; }
.site-header .button { padding: .6em 1.25em; font-size: .95rem; }

.text-link { color: var(--white); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .1em; }

/* ---------- Sections ---------- */

.section { padding: 4.5rem 0; }
@media (min-width: 1024px) { .section { padding: 7.5rem 0; } }
.hero { padding-top: 2.5rem; padding-bottom: 3rem; }
@media (min-width: 1024px) { .hero { padding-top: 5rem; padding-bottom: 4rem; } }

/* Wide screens: headline left, intro and buttons right; section headings beside their text. */
@media (min-width: 1024px) {
  .hero-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 4rem; align-items: end; }
  .hero-grid .lede { margin-bottom: 2rem; }
  .split { display: grid; grid-template-columns: 5fr 7fr; gap: 4rem; align-items: start; }
  .split h2 { margin-bottom: 0; }
  .split p { max-width: 44ch; }
}
.duo { display: grid; gap: 4rem; }
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; gap: 5rem; } }

/* A dark section that follows another dark one: no doubled gap, a fine rule instead. */
.section.divided { padding-top: 0; }
.section.divided > .wrap { position: relative; padding-top: 4.5rem; }
.section.divided > .wrap::before { content: ''; position: absolute; top: 0; left: 1.25rem; right: 1.25rem; height: 1px; background: var(--line); }
@media (min-width: 768px) { .section.divided > .wrap::before { left: 2.5rem; right: 2.5rem; } }
@media (min-width: 1024px) { .section.divided > .wrap { padding-top: 6rem; } }

.photo { margin: 0; }
.photo img, .photo video { display: block; width: 100%; height: auto; border-radius: 1.25rem; }
/* Photos (and the lake video) shared with the home page: cropped to the hospitality photo's shapes (4:3 on phones,
   a wide strip above). */
.photo-crop img, .photo-crop video { aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 768px) { .photo-crop img, .photo-crop video { aspect-ratio: 1200 / 471; } }

/* A person: portrait beside their credentials (virtual CFO). */
.person { display: grid; gap: 3rem; }
@media (min-width: 900px) { .person { grid-template-columns: 4fr 8fr; gap: 5rem; align-items: start; } }
.portrait { margin: 0; max-width: 24rem; }
.portrait img { display: block; width: 100%; height: auto; border-radius: 1.25rem; }
.credentials { list-style: none; padding: 0; margin: 2rem 0 3rem; border-top: 1px solid var(--line); }
.credentials li { border-bottom: 1px solid var(--line); padding: .9rem 0; color: var(--light); font-size: 1.1rem; line-height: 1.4; }

.band-light { background: var(--light); color: var(--black); }
.band-light .eyebrow { color: var(--black); }
.band-light p { color: var(--black); }

/* Tiles: white cards on the light band, each led by a navy dot. */
.tiles { list-style: none; padding: 0; margin: 3rem 0 0; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tiles { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.tile { background: var(--white); border-radius: 1.25rem; padding: 2rem 1.75rem 1.75rem; }
.tile h3 { position: relative; padding-top: 1.6rem; }
.tile h3::before { content: ''; position: absolute; left: 0; top: 0; width: .7rem; height: .7rem; border-radius: 50%; background: var(--blue); }
.tile p { margin: 0; line-height: 1.45; }

/* Steps */
.steps { list-style: none; padding: 0; margin: 3rem 0 0; display: grid; gap: 2.5rem; counter-reset: step; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.steps li { border-top: 1px solid var(--line); padding-top: 1.5rem; counter-increment: step; }
.steps li::before { content: '0' counter(step); display: block; margin-bottom: 1.25rem; color: var(--light); font-size: 1rem; }
.steps h3 { font-size: 1.6rem; font-weight: 400; margin-bottom: .75rem; }
.steps p { color: var(--light); font-size: 1.1rem; line-height: 1.45; margin: 0; }

/* Systems */
.pills { list-style: none; padding: 0; margin: 2.5rem 0 1.5rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.pills li { border: 1px solid var(--light); border-radius: 2em; padding: .55em 1.2em; font-size: 1.1rem; }
.note { color: var(--light); }

/* "Other services": the same pills as links, filling light grey with navy text on hover like the buttons. */
.pills-links { margin: 0; }
.pills-links li { padding: 0; }
.pills-links a { display: block; padding: .55em 1.2em; border-radius: 2em; color: var(--white); text-decoration: none; transition: background-color 200ms, color 200ms; }
.pills-links a:hover, .pills-links a:focus-visible { background: var(--light); color: var(--blue); }
.pills-links a:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* Links inside the light band (tiles) take the band's black text colour. */
.band-light a { color: var(--black); }

/* Questions */
.faq { margin-top: 2.5rem; border-bottom: 1px solid var(--line); }
.faq details { border-top: 1px solid var(--line); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.35rem 0;
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.6rem; line-height: 1; color: var(--light); }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { color: var(--light); font-size: 1.1rem; line-height: 1.5; max-width: 60ch; margin: 0 0 1.5rem; }

/* Contact */
.contact-grid { display: grid; gap: 3rem; margin-top: 2.5rem; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 3fr 2fr; gap: 5rem; } }
.fields { display: grid; gap: 1.5rem; }
@media (min-width: 600px) { .fields { grid-template-columns: 1fr 1fr; gap: 1.75rem 2rem; } .field-wide { grid-column: 1 / -1; } }
.field label { display: block; margin-bottom: .35rem; font-size: .95rem; color: var(--light); }
.field input, .field textarea {
  display: block;
  width: 100%;
  padding: .35rem 0 .6rem;
  border: 0;
  border-bottom: 2px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--white);
  font: inherit;
  font-size: 1.25rem;
}
.field textarea { resize: vertical; min-height: 6.5rem; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--light); }
.enquiry .button { margin-top: 2rem; }
.form-status { min-height: 1.5em; margin: 1.25rem 0 0; color: var(--light); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-details p { color: var(--light); font-size: 1.1rem; }
.contact-details a { text-decoration: none; border-bottom: 1px solid currentColor; }