/* Visibility In Numbers — static site styles
   Closely matches the live Squarespace look (Montserrat, brand blue/yellow/cyan).
   token: visual-parity-font-weights-v1 */

:root {
  --color-bg: #f4f4f3; /* live lightAccent / site canvas */
  --color-brand: #2d719f;          /* Squarespace --black-hsl → rgb(45,113,159) */
  --color-accent: #f9c117;         /* Squarespace --accent-hsl → rgb(249,193,23) */
  --color-values: #68c6d9;         /* section-theme "dark" on live */
  --color-text: #2d719f;
  --color-text-muted: #3e5a73;
  --color-text-on-brand: #ffffff;
  --color-border: #e4eaf0;
  --font: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  /* Live Squarespace site styles: maxPageWidth 1700px, pagePadding 4vw */
  --max: 1700px;
  --page-pad: 4vw;
  --gutter: var(--page-pad);
  /* Live header ≈ logo 35px + 2vw vert padding each side (≥800px) */
  --header-h: calc(35px + 4vw);
  --radius: 4px;
  --divider-h: 7vw;
  /* Squarespace fluid type size-values */
  --h1-n: 3;
  --h2-n: 2;
  --h3-n: 1.5;
  --large-n: 1.5;
  /* Desktop fluid (matches live site.css landscape formula vs maxPageWidth) */
  --fs-h1: min(calc((var(--h1-n) - 1) * 1.2vw + 1rem),
               max(calc((var(--h1-n) - 1) * 0.012 * 1700px + 1rem), calc(var(--h1-n) * 1rem)));
  --fs-h2: min(calc((var(--h2-n) - 1) * 1.2vw + 1rem),
               max(calc((var(--h2-n) - 1) * 0.012 * 1700px + 1rem), calc(var(--h2-n) * 1rem)));
  --fs-h3: min(calc((var(--h3-n) - 1) * 1.2vw + 1rem),
               max(calc((var(--h3-n) - 1) * 0.012 * 1700px + 1rem), calc(var(--h3-n) * 1rem)));
  --fs-large: min(calc((var(--large-n) - 1) * 1.2vw + 1rem),
                  max(calc((var(--large-n) - 1) * 0.012 * 1700px + 1rem), calc(var(--large-n) * 1rem)));
}
/* Live header inset: 6vw each side below 800px (burger layout), 2vw vert above */
@media (max-width: 799px) {
  :root {
    --header-h: calc(37px + 12vw); /* live ≈82px @375, 133px @799 */
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.75rem;
  letter-spacing: 0;
  color: var(--color-brand);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
@media (max-width: 767px) and (orientation: portrait) {
  /* Base element sizes; component overrides are corrected in the final block below */
  h1 { font-size: calc((var(--h1-n) - 1) * 0.012 * min(100vh, 900px) + 1rem); }
  h2 { font-size: calc((var(--h2-n) - 1) * 0.012 * min(100vh, 900px) + 1rem); }
  h3 { font-size: calc((var(--h3-n) - 1) * 0.012 * min(100vh, 900px) + 1rem); }
}
p { margin: 0 0 1rem; }
/* Live body/headings wrap on resize; avoid nowrap/overflow clipping */
h1, h2, h3, p, li, .tagline, .mission {
  overflow-wrap: break-word;
  word-wrap: break-word;
  max-width: 100%;
}
ul { margin: 0 0 1rem; padding-left: 1.25rem; }
li { margin-bottom: 0.35rem; }

.container {
  width: min(calc(100% - (var(--page-pad) * 2)), var(--max));
  margin-inline: auto;
}
.container--narrow { width: min(calc(100% - (var(--page-pad) * 2)), 720px); }
.container--wide {
  width: min(calc(100% - (var(--page-pad) * 2)), var(--max));
  margin-inline: auto;
}

/* —— Header / Nav —— */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  height: var(--header-h);
  /* Live Squarespace header-dropshadow / .header-background::after */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  width: min(calc(100% - (var(--page-pad) * 2)), var(--max));
  margin-inline: auto;
  gap: 1rem;
}
.site-logo img {
  height: 35px;
  width: auto;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.site-nav a {
  color: var(--color-brand);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  text-decoration: none;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.site-nav__social {
  display: inline-flex;
  align-items: center;
  gap: 1.35rem; /* live LI→FB gap ≈21.6px at 1440 */
  margin-left: 0.25rem;
}
.site-nav__social a {
  display: inline-flex;
  color: var(--color-brand);
  line-height: 0;
}
.site-nav__social a:hover { opacity: 0.75; text-decoration: none; }
.site-nav__social svg { width: 20px; height: 20px; fill: currentColor; }
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.4rem 0.65rem;
  font: inherit;
  color: var(--color-brand);
  cursor: pointer;
}

@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none;
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    padding: 0.75rem 1.25rem 1rem;
    gap: 0.25rem;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 0.6rem 0.25rem; }
  .site-nav__social { margin: 0.5rem 0 0; }
}

/* —— Buttons —— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Live primary button grows a bit faster than font above ~1280 */
  min-height: calc(var(--fs-large) * 2.6 + max(0px, (100vw - 1280px) * 0.025));
  padding: 0 2.5rem;
  background: var(--color-accent);
  color: #fff !important;
  font-weight: 700;
  font-size: var(--fs-large);
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none !important;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
  line-height: 1.2;
}
.btn:hover { filter: brightness(0.95); }
.btn--light {
  background: #fff;
  color: var(--color-brand) !important;
}
.btn--light:hover { filter: none; background: #f5f8fb; }

/* —— Section dividers (match Squarespace rounded / wavy) —— */
.has-divider {
  position: relative;
  padding-bottom: var(--divider-h);
}
.has-divider > .section-divider {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--divider-h);
  line-height: 0;
  pointer-events: none;
  z-index: 2;
}
.has-divider > .section-divider svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* —— Hero (mountain, no text overlay) —— */
.section--hero {
  position: relative;
  /* Live section-height--small: min ~297px; ~52vw tablet; ~40.8vw desktop */
  height: clamp(297px, 40.8vw, 760px);
  min-height: 297px;
  background-color: var(--color-brand);
  background-size: cover;
  background-position: 47.8437% 29.603%;
  background-repeat: no-repeat;
  /* No dark overlay — live imageEffect is none */
}
@media (max-width: 900px) {
  .section--hero {
    height: clamp(297px, 52vw, 480px);
  }
}
.section--hero.has-divider { padding-bottom: var(--divider-h); }
.section--hero .section-divider { color: var(--color-brand); }

/* —— Tagline band (yellow on brand blue) —— */
.section--tagline {
  background: var(--color-brand);
  color: var(--color-accent);
  padding: 0.35rem 0 1.6rem;
  /* sit flush under hero wave (wave already paints brand blue) */
  margin-top: 0;
}
.section--tagline .tagline {
  margin: 0;
  font-size: var(--fs-h2); /* live tagline is heading-2 fluid */
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-accent);
}

/* —— Mission + Venn —— */
.section--mission {
  padding: 2.5rem 0 1rem;
  background: #fff;
}
.section--mission .mission {
  margin: 0 0 1.75rem;
  font-size: var(--fs-h3); /* live mission is heading-3 fluid */
  font-weight: 700;
  line-height: 1.27;
  color: var(--color-brand);
  max-width: 100%;
}
.section--venn {
  padding: 0 0 2.5rem;
  background: #fff;
  text-align: center;
}
.section--venn img {
  width: min(100%, 840px);
  margin-inline: auto;
}

/* —— Values (cyan band, 6-up) —— */
.section--values {
  background: var(--color-values);
  color: #fff;
  padding: 2.25rem 0 calc(2rem + var(--divider-h));
  position: relative;
}
.section--values h2 {
  color: #fff;
  font-size: var(--fs-h2);
  margin: 0 0 1.5rem;
  text-align: left;
}
.section--values .section-divider { color: #fff; }
.values-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem 1.25rem;
}
@media (max-width: 1100px) {
  .values-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); }
}
.value-card {
  background: transparent;
  border: none;
  padding: 0;
  text-align: center; /* live values cards are text-align:center */
}
.value-card h3 {
  font-size: var(--fs-h3);
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 0.35rem;
  color: #fff;
  text-align: center;
}
.value-card p {
  margin: 0;
  font-size: 1rem;
  color: #fff;
  line-height: 1.35;
  text-align: center;
}

/* —— Services (3-column: title, image, body) —— */
.section--services {
  padding: 3rem 0 2rem;
  background: #fff;
}
.services-intro {
  max-width: 100%;
  margin: 0 0 2rem;
  text-align: left;
}
.services-intro h2 {
  margin-bottom: 1rem;
  font-size: var(--fs-h1); /* live "Our Bespoke Services" is heading-1 */
  color: var(--color-accent); /* live accent yellow span */
  font-weight: 700;
}
.services-intro p {
  max-width: 70ch;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem 2rem;
  align-items: start;
}
@media (max-width: 640px) {
  .services-grid { grid-template-columns: 1fr; }
}
.service-col h3 {
  font-size: var(--fs-h2); /* live service titles are heading-2 */
  margin-bottom: 0.15rem;
  text-align: center; /* live text-align:center */
}
.service-col .tagline {
  font-style: normal; /* live is not italic */
  font-weight: 400;
  color: var(--color-brand); /* live sqsrte-text-color--black = brand */
  margin: 0 0 1rem;
  font-size: 1rem;
  text-align: center;
}
.service-col img {
  width: 100%;
  /* Default ≈ live 1440 fluid cell AR 1.026 */
  aspect-ratio: 1.026 / 1;
  object-fit: cover;
  object-position: 50% 50%;
  margin-bottom: 1.25rem;
  /* Live applies no CSS filter — keep natural tone */
  filter: none;
}
/* Live fluid-engine cell ARs by viewport (measured) */
@media (max-width: 640px) {
  .service-col img { aspect-ratio: 1.41 / 1; } /* live mobile ~330x234 */
}
@media (min-width: 641px) and (max-width: 900px) {
  .service-col img { aspect-ratio: 0.824 / 1; } /* live tablet ~228x277 */
}
@media (min-width: 901px) and (max-width: 1200px) {
  .service-col img { aspect-ratio: 0.922 / 1; } /* live ~307x333 */
}
@media (min-width: 1600px) {
  .service-col img { aspect-ratio: 1.092 / 1; } /* live 1920 ~559x512 */
}
/* Live data-image-focal-point crops */
.service-col:nth-child(1) img { object-position: 57.7727% 88.8044%; }
.service-col:nth-child(2) img { object-position: 11.1729% 46.3964%; }
.service-col:nth-child(3) img { object-position: 50% 50%; }
.service-col p,
.service-col li {
  font-size: 1rem;
  color: var(--color-text);
}

/* —— Founder —— */
.section--founder {
  padding: 2.5rem 0 3rem;
  background: #fff;
}
.section--founder > .container > h2 {
  margin-bottom: 1.25rem;
  font-size: var(--fs-h1); /* live "Meet the Founder" is heading-1 */
  color: var(--color-accent); /* live accent yellow span */
  font-weight: 700;
}
.founder {
  display: grid;
  grid-template-columns: minmax(0, 379fr) minmax(0, 935fr); /* live ~28.8% / 71.2% */
  gap: 2rem;
  align-items: stretch; /* image column stretches to text height like live */
}
@media (max-width: 640px) {
  /* Live stacks founder image above text only on narrow mobile */
  .founder { grid-template-columns: 1fr; }
}
.founder img {
  width: 100%;
  /* height:0 + min-height:100% → fill row sized by text column (live fluid) */
  height: 0;
  min-height: 100%;
  object-fit: cover;
  object-position: 50% 50%; /* live data-image-focal-point 0.5,0.5 */
  filter: none;
}
@media (max-width: 640px) {
  /* Live mobile founder slot is landscape (~1.658 AR) */
  .founder img {
    height: auto;
    min-height: 0;
    aspect-ratio: 1.658 / 1;
  }
}

/* Live Squarespace: first founder paragraph is an <h4> (font-weight 700, 16px, lh 1.3) */
.founder__lead {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 1rem;
  color: var(--color-brand);
}
.founder__signoff {
  font-weight: 700;
  margin-top: 1.25rem;
  color: var(--color-brand);
}

/* —— CTA —— */
.section--cta {
  padding: 2.5rem 0 3rem;
  text-align: center;
  background: #fff;
}

/* —— Contact hero —— */
/* Live Squarespace: full-bleed section under fixed white header, with
   <img object-fit:cover; object-position from focal 0.5317,0.8321>,
   min-height 66vh, and brand-blue overlay @ 0.15.
   Prior preview used background-image BELOW a sticky header — so the top
   of the photo (sky on mobile; upper hillside on desktop) stayed visible
   while live hid that same band under the header. Y focal tweaks could not
   fix mobile tops (no vertical overflow to position). Match live technique. */
body.page-contact .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: #fff;
}
.contact-hero {
  position: relative;
  min-height: 66vh; /* live .section-height--medium */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  /* live: section padding-top ≈ header height + content-wrapper 6.6vmax */
  padding: calc(var(--header-h) + 6.6vmax) 1.5rem 6.6vmax;
  overflow: hidden;
}
.contact-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.contact-hero__bg img {
  width: 100%;
  height: 100%;
  max-width: none; /* override global img max-width */
  object-fit: cover;
  /* live data-image-focal-point 0.5317295246416947,0.832053955078125 */
  object-position: 53.17295246416946% 83.2053955078125%;
}
.contact-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Live .section-background-overlay: brand blue @ overlayOpacity 0.15 */
  background: rgba(45, 113, 159, 0.15);
}
.contact-hero .container {
  position: relative;
  z-index: 2;
  max-width: 40rem;
}
.contact-hero h1,
.contact-hero .contact-lines,
.contact-hero .contact-tag {
  color: #fff;
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 0.75rem;
}
.contact-hero a {
  color: #fff;
  text-decoration: none;
}
.contact-hero a:hover { text-decoration: underline; }
.contact-hero .contact-note {
  margin-top: 1.75rem;
  font-size: 0.95rem;
  font-weight: 400;
  opacity: 0.95;
  max-width: 36rem;
  margin-inline: auto;
  line-height: 1.45;
}

/* Legacy contact card (unused on home-matched contact, kept for safety) */
.contact-block {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 2rem;
  max-width: 520px;
  margin: 2rem auto 3rem;
  text-align: center;
}

/* Privacy — match live Squarespace text block (all 16px; titles = bold body) */
.prose, .prose p { color: var(--color-text); }
.prose h2 { margin-top: 2rem; color: var(--color-brand); }
.prose h2:first-of-type { margin-top: 0; }

/* Live privacy: section-height medium padding ≈ 6.6vmax; content gutter 6vw mobile */
.section--privacy {
  padding: 6.6vmax 0;
  background: transparent; /* sit on site canvas #f4f4f3 */
}
.container--privacy {
  width: min(calc(100% - 12vw), 720px); /* live mobile gutter ~6vw each side; desktop capped */
  margin-inline: auto;
}
@media (min-width: 768px) {
  .container--privacy {
    width: min(calc(100% - (var(--page-pad) * 2)), 720px);
  }
}
.prose--privacy {
  font-size: 16px;
  line-height: 1.4; /* live 22.4/16 */
  color: var(--color-text);
}
.prose--privacy p {
  margin: 0 0 1rem; /* live 16px bottom */
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text);
}
.prose--privacy p:last-child {
  margin-bottom: 0;
}
/* Live section titles are <p><strong>, not headings — keep body size */
.prose--privacy p > strong,
.prose--privacy strong {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text);
  letter-spacing: normal;
}
/* Ensure no global h1/h2 fluid rules leak if markup regresses */
.prose--privacy h1,
.prose--privacy h2,
.prose--privacy h3 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 1rem;
  color: var(--color-text);
}

/* —— Site chrome footer (credentials + legal) —— */
.site-chrome-footer {
  background: #fff;
  border-top: 1px solid var(--color-border);
  padding: 2rem 0 1.5rem;
}
.site-chrome-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
}
.site-chrome-footer__legal {
  flex: 1 1 280px;
  font-size: 0.95rem;
  color: var(--color-brand);
  text-align: left; /* live footer legal column is left-aligned at content inset */
}
.site-chrome-footer__legal a {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-brand);
}
.site-chrome-footer__legal p { margin: 0.35rem 0 0; max-width: 42rem; }
/* Live sqsrte-small: liability + copyright share one left-aligned block */
.site-chrome-footer__small {
  margin: 0.35rem 0 0;
  max-width: 42rem;
  font-size: 0.784rem; /* ≈ live sqsrte-small ~12.5px at 1440 */
  line-height: 1.4;
  font-weight: 400;
  color: var(--color-brand);
  text-align: left;
}
.credentials__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* live fluid blocks use align-items: center */
  justify-content: flex-end;
  /* Live desktop: Fathom/Xero nearly flush (~0), Xero→TPB ≈6px */
  gap: 0 0.4rem;
}
.credentials__row a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.credentials__row img {
  /* Xero bronze composite — live ~110.4×63.5 at 1440 */
  height: 63.5px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
}
.credentials__row img.credentials__tpb {
  /* Live portrait TPB badge ~97.6×120.5 at 1440 */
  height: 120.5px;
  max-width: 100px;
}
.credentials__row img.credentials__fathom {
  /* Live Fathom badge ~55.2×55 at 1440 */
  height: 55px;
  max-width: 60px;
}
@media (max-width: 700px) {
  .site-chrome-footer__inner { flex-direction: column; align-items: flex-start; }
  .credentials__row { justify-content: flex-start; }
}

.site-footer {
  /* Copyright moved into .site-chrome-footer__legal to match live;
     keep a small bottom pad so credentials band isn't flush to viewport */
  background: #fff;
  padding: 0 0 2rem;
  min-height: 0;
}
.site-footer:empty { display: none; }
.site-footer .container {
  width: min(calc(100% - (var(--page-pad) * 2)), var(--max));
  margin-inline: auto;
}
.site-footer p { margin: 0; }

/* 404 */
.page-404 {
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1rem;
}

/* —— Preview-only artefacts (strip for production) ——
   See README.md → “Preview artefacts”.
   Remove: .preview-badge rules here, the badge markup in HTML,
   the robots meta + "(preview)" title suffix, and site/_headers. */


/* —— Final mobile portrait fluid (must follow component font-size rules) —— */
@media (max-width: 767px) and (orientation: portrait) {
  h1,
  .services-intro h2,
  .section--founder > .container > h2 {
    font-size: calc((var(--h1-n) - 1) * 0.012 * min(100vh, 900px) + 1rem);
  }
  h2,
  .section--tagline .tagline,
  .section--values h2,
  .service-col h3 {
    font-size: calc((var(--h2-n) - 1) * 0.012 * min(100vh, 900px) + 1rem);
  }
  h3,
  .section--mission .mission,
  .value-card h3 {
    font-size: calc((var(--h3-n) - 1) * 0.012 * min(100vh, 900px) + 1rem);
  }
}