/* ==========================================================================
   Property Administrators — shared stylesheet
   Palette: navy ink #0F3A61 · coral #FFB0A1 · pale coral #FFE7E1
   paper #F7F9FB · hairline #E7EDF2 · body #2A3A48 · muted #66788A · ink #12212E
   Coral is the signature action fill; navy is the foreground on coral.
   ========================================================================== */

/* ----- Self-hosted fonts (no CDN) ----- */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/montserrat-400.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/montserrat-500.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/montserrat-600.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/montserrat-700.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/opensans-400.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/opensans-500.woff2") format("woff2");
}

:root {
  --navy: #0F3A61;
  --navy-hover: #1A4E7D;
  --coral: #FFB0A1;
  --coral-tint: #FFE7E1;
  --paper: #F7F9FB;
  --white: #FFFFFF;
  --hairline: #E7EDF2;
  --body: #2A3A48;
  --muted: #66788A;
  --ink: #12212E;

  --font-head: "Montserrat", system-ui, -apple-system, sans-serif;
  --font-body: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  --maxw: 1120px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(15, 58, 97, 0.06);
  --shadow-md: 0 8px 28px rgba(15, 58, 97, 0.10);
  --gap: clamp(1rem, 3vw, 2rem);
}

/* ----- Reset / base ----- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The header is sticky (70px min-height + 1px border = 71px at every width).
     Offset every in-page jump and scroll-restore by that height plus a small
     gap, so a targeted heading lands below the header instead of under it. */
  scroll-padding-top: 87px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.125rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.375rem); }

p { margin: 0; }
a { color: var(--navy); text-decoration-color: var(--coral); text-underline-offset: 2px; }
a:hover { color: var(--navy-hover); }

/* Visible focus rings everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: var(--white);
  padding: 0.75rem 1rem;
  z-index: 200;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  left: 0;
  color: var(--white);
}

/* ----- Layout helpers ----- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}
.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section--tint { background: var(--coral-tint); }
.section--paper { background: var(--paper); }
.section--white { background: var(--white); }

.eyebrow {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 0.75rem;
}
.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--body);
  max-width: 62ch;
}
.section__head { max-width: 62ch; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }

/* ----- Buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  padding: 0.85rem 1.4rem;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.05s ease;
}
.btn:active { transform: translateY(1px); }
/* Coral fill, navy foreground — the signature action (contrast 6.6:1) */
.btn--primary {
  background: var(--coral);
  color: var(--navy);
  border-color: var(--coral);
}
.btn--primary:hover { background: #FFA08E; border-color: #FFA08E; color: var(--navy); }
.btn--navy {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.btn--navy:hover { background: var(--navy-hover); border-color: var(--navy-hover); color: var(--white); }
.btn--ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn--ghost:hover { background: var(--navy); color: var(--white); }
.btn--block { width: 100%; }
.btn--lg { padding: 1rem 1.6rem; font-size: 1.0625rem; }

/* ----- Header ----- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 249, 251, 0.92);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 70px;
  padding-block: 0.5rem;
}
.brand-link { display: inline-flex; align-items: center; line-height: 0; }
.brand-link img { height: 40px; width: auto; }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.6rem;
  color: var(--navy);
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }

.primary-nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.75rem);
}
.primary-nav a {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--ink);
  text-decoration: none;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
}
.primary-nav a:hover { color: var(--navy); border-bottom-color: var(--coral); }
.primary-nav a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--coral); }
.primary-nav .btn { border-bottom: none; }

@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; }
  .primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--hairline);
    box-shadow: var(--shadow-md);
    display: none;
  }
  .primary-nav.is-open { display: block; }
  .primary-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem clamp(1rem, 4vw, 2rem) 1.25rem;
  }
  .primary-nav li { width: 100%; }
  .primary-nav a {
    display: block;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--hairline);
  }
  .primary-nav a[aria-current="page"] { border-bottom-color: var(--hairline); }
  .primary-nav .btn { margin-top: 0.85rem; width: 100%; }
}

/* ----- Hero ----- */
.hero { background: var(--paper); border-bottom: 1px solid var(--hairline); }
.hero__inner {
  padding-block: clamp(2.5rem, 7vw, 5rem);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  align-items: center;
}
.hero__mark { width: 100%; max-width: 460px; margin-inline: auto; }
.hero__tagline {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 1rem;
}
.hero h1 { margin-bottom: 1rem; }
.hero__positioning {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--navy);
  background: var(--coral-tint);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.75rem;
}
@media (max-width: 780px) {
  .hero__inner { grid-template-columns: 1fr; text-align: left; }
  .hero__media { order: -1; }
  .hero__mark { max-width: 340px; margin-inline: 0; }
}

/* ----- Feature / who-it's-for grids ----- */
.grid { display: grid; gap: var(--gap); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
/* A three-card set never breaks to 2+1 (a lone card beside empty space).
   It holds three-across while the cards stay readable, then drops straight
   to a single column. Below about 908px the longest title ("Chasing your
   vendors and suppliers") wraps to three lines three-across, so the single
   column takes over at 920px, keeping every title to two lines at most. */
@media (max-width: 920px) { .grid--3 { grid-template-columns: 1fr; } }
/* A two-column set (the four "who it is for" items) divides evenly 2+2,
   so it stays two-up until the single-column drop. */
@media (max-width: 560px) { .grid--2 { grid-template-columns: 1fr; } }

.card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  box-shadow: var(--shadow-sm);
  /* Internal subgrid: icon row, title row and body row are sized from the
     tallest sibling in the same displayed row, so titles and bodies line up. */
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  row-gap: 0.85rem;
}
.card h3 { margin: 0; }
.card p { color: var(--body); margin: 0; }
.card__icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--coral-tint);
  color: var(--navy);
  display: grid; place-items: center;
  margin: 0;
}
.card__icon svg { width: 24px; height: 24px; }

/* Bulleted "what we do" list */
.do-list { list-style: none; padding: 0; display: grid; gap: 0.85rem; }
.do-list li {
  position: relative;
  padding-left: 2rem;
  color: var(--body);
}
.do-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5rem;
  width: 12px; height: 12px;
  border-left: 2.5px solid var(--coral);
  border-top: 2.5px solid var(--coral);
  transform: rotate(45deg) translateY(1px);
  transform-origin: center;
}

.who-list { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.who-list li {
  padding: 0.75rem 1rem;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--coral);
  border-radius: var(--radius-sm);
  font-weight: 500;
  color: var(--ink);
}

/* ----- Founders ----- */
.founders { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
@media (max-width: 720px) { .founders { grid-template-columns: 1fr; } }
.founder {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  box-shadow: var(--shadow-sm);
  /* Name row, role row and body row tie to the tallest sibling in the row. */
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  row-gap: 0.5rem;
}
.founder__name { font-family: var(--font-head); font-weight: 600; color: var(--ink); font-size: 1.2rem; }
.founder__role {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--navy);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0;
}

/* ----- Pricing ----- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}
@media (max-width: 960px) { .pricing-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pricing-grid { grid-template-columns: 1fr; } }

.pricing__tier {
  position: relative;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.5rem 1.35rem;
  /* Six-row subgrid: name, hours, fee, rate, note and button each line up
     with the same row in every sibling tier, so buttons share one baseline.
     The absolutely positioned badge stays out of flow and takes no row. */
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 6;
  row-gap: 0;
  box-shadow: var(--shadow-sm);
}
.tier__name {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--ink);
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}
.tier__hours { color: var(--muted); font-weight: 500; font-size: 0.95rem; margin-bottom: 1rem; }
.tier__fee {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy);
  font-size: 2rem;
  line-height: 1;
}
.tier__fee span { font-size: 0.95rem; font-weight: 500; color: var(--muted); }
.tier__rate {
  display: inline-block;
  justify-self: start;
  margin-top: 0.85rem;
  padding: 0.3rem 0.65rem;
  background: var(--coral-tint);
  color: var(--navy);
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.9rem;
}
.tier__note { color: var(--muted); font-size: 0.9rem; margin-top: 0.85rem; }
.pricing__tier .btn { margin-top: 1.25rem; }

/* "Most Popular" flip: add class `is-popular` to a single .pricing__tier.
   The badge is hidden by default and revealed only on the flagged tier. */
.tier__badge {
  display: none;
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--coral);
  color: var(--navy);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  white-space: nowrap;
}
.pricing__tier.is-popular {
  border-color: var(--coral);
  border-width: 2px;
  box-shadow: var(--shadow-md);
}
.pricing__tier.is-popular .tier__badge { display: block; }

.rate-logic {
  margin-top: 1.5rem;
  color: var(--muted);
  font-size: 0.95rem;
  text-align: center;
}

/* ----- CTA band ----- */
.cta-band {
  background: var(--navy);
  color: #E8EEF4;
  border-radius: var(--radius);
  padding: clamp(1.75rem, 5vw, 3rem);
  text-align: center;
}
.cta-band h2 { color: var(--white); margin-bottom: 0.75rem; }
.cta-band p { color: #C7D4E0; max-width: 52ch; margin-inline: auto; }
.cta-band .cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
  margin-top: 1.5rem;
}

/* ----- Forms ----- */
.form-wrap {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(1.5rem, 5vw, 3rem);
  align-items: start;
}
@media (max-width: 820px) { .form-wrap { grid-template-columns: 1fr; } }

.form-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 4vw, 2rem);
  box-shadow: var(--shadow-sm);
}
.field { margin-bottom: 1.15rem; }
.field label {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.field .req { color: var(--navy); }
.field .optional { color: var(--muted); font-weight: 500; font-size: 0.82rem; }
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--body);
  background: var(--paper);
  border: 1px solid #D3DCE4;
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--navy);
  background: var(--white);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: #C0392B;
}
.field-error {
  display: none;
  color: #A5281B;
  font-size: 0.85rem;
  margin-top: 0.35rem;
}
.field-error.is-shown { display: block; }

/* Honeypot — visually hidden, kept in the a11y tree out of tab order */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-note { color: var(--muted); font-size: 0.9rem; margin-top: 0.5rem; }

.form-status {
  display: none;
  border-radius: var(--radius-sm);
  padding: 1rem 1.15rem;
  margin-bottom: 1.25rem;
  font-weight: 500;
}
.form-status.is-shown { display: block; }
.form-status--success {
  background: #E7F4EC;
  border: 1px solid #B6DCC4;
  color: #1E5B37;
}
.form-status--error {
  background: #FBEAE7;
  border: 1px solid #F0C3BB;
  color: #A5281B;
}

/* ----- Booking ----- */
.slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}
.slot-btn {
  font-family: var(--font-body);
  font-size: 0.95rem;
  text-align: left;
  background: var(--white);
  border: 1px solid #D3DCE4;
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  cursor: pointer;
  color: var(--body);
  line-height: 1.35;
  /* Day row and time row tie to the tallest button in the same displayed row. */
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  row-gap: 0;
}
.slot-btn:hover { border-color: var(--navy); }
.slot-btn[aria-pressed="true"] {
  background: var(--coral-tint);
  border-color: var(--coral);
  color: var(--navy);
  font-weight: 600;
}
.slot-btn .slot-btn__day { display: block; font-family: var(--font-head); font-weight: 600; color: var(--ink); }
.slots-state { color: var(--muted); margin-top: 1rem; }
.slots-state.is-hidden { display: none; }

/* ----- Footer ----- */
.site-footer {
  background: var(--navy);
  color: #C7D4E0;
  padding-block: clamp(2.5rem, 6vw, 3.5rem) 2rem;
  margin-top: auto;
}
.site-footer a { color: var(--coral); text-decoration: none; }
.site-footer a:hover { color: #FFC9BE; text-decoration: underline; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: clamp(1.5rem, 5vw, 3rem);
}
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; } }
.footer__logo img { height: 44px; width: auto; margin-bottom: 1rem; }
.footer__tagline { color: #9FB2C4; max-width: 34ch; }
.footer h4 {
  color: var(--white);
  font-family: var(--font-head);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.85rem;
}
.footer ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.footer address { font-style: normal; color: #C7D4E0; line-height: 1.7; }
.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  color: #9FB2C4;
  font-size: 0.9rem;
}

/* ----- Page hero (inner pages) ----- */
.page-hero {
  background: var(--navy);
  color: #E8EEF4;
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.page-hero h1 { color: var(--white); }
.page-hero p { color: #C7D4E0; max-width: 60ch; margin-top: 0.75rem; }
.page-hero .eyebrow { color: var(--coral); }

/* ----- Utility ----- */
.stack > * + * { margin-top: 1rem; }
.mt-2 { margin-top: 1.5rem; }
.text-center { text-align: center; }
.page { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }
.prose p { margin-bottom: 1rem; max-width: 68ch; }
.prose h2 { margin-top: 2rem; margin-bottom: 0.75rem; }
.prose h3 { margin-top: 1.5rem; margin-bottom: 0.5rem; }
.prose ul { margin: 0 0 1rem 1.25rem; }
.prose li { margin-bottom: 0.4rem; }