/* Authentus — shared styles: tokens, reset, chrome, shared bands.
   Palette is strict: every colour below comes from Misc/reference.PNG.
   Load order: shared.css first, then the page stylesheet. */

/* ---------- Tokens ---------- */

:root {
  --teal: #024647;
  --green: #01795E;
  --green-light: #3CAF8C;
  --terracotta: #EB5E42;
  --cream: #F3F2EC;
  --white: #FFFFFF;
  --text: #4C4C4C;
  --muted: #A6A6A6;

  --font-display: "Lexend", "Trebuchet MS", Verdana, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", Tahoma, sans-serif;

  --wrap: 1180px;
  --radius-card: 16px;
  --radius-ui: 10px;
  --shadow-card: 0 12px 28px rgba(2, 70, 71, 0.14);
  --shadow-header: 0 6px 18px rgba(2, 70, 71, 0.10);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ---------- Reset ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--green) var(--cream);
}

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

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

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--teal);
  line-height: 1.15;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.55rem, 3vw, 2.2rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }

p { margin: 0 0 1em; max-width: 68ch; }
ul { margin: 0 0 1em; padding-left: 1.2em; }

/* ---------- Browser surfaces ---------- */

::selection { background: var(--green); color: var(--white); }

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

body::-webkit-scrollbar { width: 12px; }
body::-webkit-scrollbar-track { background: var(--cream); }
body::-webkit-scrollbar-thumb {
  background: var(--green);
  border-radius: 6px;
  border: 2px solid var(--cream);
}

/* The native viewport scrollbar above spans the full viewport height, so it
   always crosses the sticky header and no styling of it can change that.
   Once script.js has built the replacement thumb it tags
   html.hasPageScrollbar, the native bar is hidden, and .pageScrollbar draws
   the page position in the band below the header only. With JS off nothing
   is hidden and the styled native bar remains. */
html.hasPageScrollbar { scrollbar-width: none; }
html.hasPageScrollbar::-webkit-scrollbar,
html.hasPageScrollbar body::-webkit-scrollbar { width: 0; height: 0; }
.pageScrollbar {
  position: fixed;
  top: 72px; right: 0; bottom: 0; width: 14px;
  z-index: 40; /* below the header (50), so it can never cover the nav bar */
  opacity: 0;
  pointer-events: none;
  touch-action: none;
  transition: opacity 200ms var(--ease-out);
}
.pageScrollbar.isVisible { opacity: 1; }
.pageScrollbarThumb {
  position: absolute;
  top: 0; right: 4px; width: 6px; min-height: 36px;
  border-radius: 999px;
  background: var(--green);
  cursor: grab;
  pointer-events: none;
  will-change: transform;
}
.pageScrollbar.isVisible .pageScrollbarThumb { pointer-events: auto; }
.pageScrollbarThumb:hover,
.pageScrollbar.isDragging .pageScrollbarThumb { background: var(--teal); }
.pageScrollbar.isDragging .pageScrollbarThumb { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) { .pageScrollbar { transition: none; } }

a {
  color: var(--green);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color 200ms var(--ease-out);
}
a:hover { color: var(--teal); }

/* ---------- Utilities ---------- */

.wrap {
  width: min(var(--wrap), 100% - 2.5rem);
  margin-inline: auto;
}

.skipLink {
  position: absolute;
  top: -3.5rem;
  left: 1rem;
  z-index: 100;
  padding: 0.6rem 1.1rem;
  background: var(--teal);
  color: var(--white);
  border-radius: var(--radius-ui);
  text-decoration: none;
  white-space: nowrap;
  /* Invisible as well as offscreen: negative top alone still shows during
     rubber-band overscroll above the page. */
  opacity: 0;
  pointer-events: none;
  transition: top 200ms var(--ease-out), opacity 200ms var(--ease-out);
}
.skipLink:focus-visible { top: 1rem; opacity: 1; pointer-events: auto; color: var(--white); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 0.8rem 1.7rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  border: 2px solid transparent;
  border-radius: var(--radius-ui);
  cursor: pointer;
  transition: background-color 200ms var(--ease-out),
              color 200ms var(--ease-out),
              border-color 200ms var(--ease-out),
              transform 160ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }

.btnSolid { background: var(--green); color: var(--white); }
.btnSolid:hover { background: var(--teal); color: var(--white); }

.btnGhost { background: transparent; color: var(--white); border-color: var(--white); }
.btnGhost:hover { background: var(--white); color: var(--teal); }

.btnLight { background: var(--white); color: var(--teal); }
.btnLight:hover { background: var(--teal); color: var(--white); }

/* ---------- Header ---------- */

.siteHeader {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  transition: box-shadow 250ms var(--ease-out);
}
.siteHeader.scrolled { box-shadow: var(--shadow-header); }

.headerBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}
.brand img { width: 36px; height: 36px; }
.brandName {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--teal);
  letter-spacing: -0.01em;
}

.navToggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.navToggle span {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--teal);
  transition: transform 250ms var(--ease-out), opacity 200ms var(--ease-out);
}
.navToggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.navToggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navToggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.siteNav ul {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.siteNav a {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--teal);
  text-decoration: none;
  padding: 0.4rem 0;
  border-bottom: 3px solid transparent;
  transition: border-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.siteNav a:hover { color: var(--green); }
.siteNav a[aria-current="page"] { border-bottom-color: var(--green); }
.siteNav .navCta {
  padding: 0.6rem 1.3rem;
  border-bottom: 0;
  border-radius: var(--radius-ui);
  background: var(--green);
  color: var(--white);
}
.siteNav .navCta:hover { background: var(--teal); color: var(--white); }
.siteNav .navCta[aria-current="page"] { background: var(--teal); }

@media (max-width: 900px) {
  .navToggle { display: flex; }
  .siteNav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    box-shadow: var(--shadow-header);
    display: none;
  }
  .siteNav.open { display: block; }
  .siteNav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 1.25rem 1.25rem;
  }
  .siteNav li { border-top: 1px solid var(--cream); }
  .siteNav li:first-child { border-top: 0; }
  .siteNav a { display: block; padding: 0.85rem 0.25rem; border-bottom: 0; }
  .siteNav a[aria-current="page"] { color: var(--green); }
  .siteNav .navCta { margin-top: 0.75rem; text-align: center; }
}

/* ---------- Bands ---------- */

.band { padding: 4.5rem 0; }
.bandCream { background: var(--cream); }
.bandTeal { background: var(--teal); }
.bandTeal h2, .bandTeal h3 { color: var(--white); }
.bandTeal p { color: var(--cream); }

.bandIntro { max-width: 62ch; margin-bottom: 2.5rem; }

/* ---------- Interior hero ---------- */

.pageHero { padding: 4rem 0 4.5rem; }
.pageHeroGrid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 3rem;
  align-items: center;
}
.pageHeroGrid img {
  width: 100%;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.pageHero .lede { font-size: 1.2rem; }

@media (max-width: 820px) {
  .pageHeroGrid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ---------- Cards ---------- */

.cardGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
}
@media (max-width: 900px) { .cardGrid { grid-template-columns: 1fr; } }

.valueCard {
  background: var(--white);
  border-radius: var(--radius-card);
  padding: 2rem 1.75rem 1.6rem;
  box-shadow: var(--shadow-card);
  border-bottom: 4px solid var(--terracotta);
}
.valueCard h3 { margin-bottom: 0.5rem; }
.valueCard p { margin-bottom: 0; }

.photoCard {
  display: block;
  background: var(--white);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out);
}
.photoCard:hover { transform: translateY(-6px); }
.photoCard:active { transform: translateY(-2px); }
.photoCard img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.photoCardBody { padding: 1.4rem 1.5rem 1.5rem; }
.photoCardBody h3 { color: var(--teal); }
.photoCardBody p { color: var(--text); margin-bottom: 0.75rem; }
.photoCardMore {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--green);
}
.photoCard:hover .photoCardMore { color: var(--teal); }

/* ---------- Accent CTA band ---------- */

.ctaBand { background: var(--terracotta); padding: 4.5rem 0; }
.ctaBandInner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem;
}
.ctaBand h2 { color: var(--white); margin: 0; }
@media (max-width: 720px) {
  .ctaBandInner { justify-content: flex-start; }
}

/* ---------- Forms ---------- */

.formGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
}
.formGrid .fieldFull { grid-column: 1 / -1; }
@media (max-width: 720px) { .formGrid { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--teal);
}
.field input,
.field select,
.field textarea {
  font: inherit;
  color: var(--text);
  padding: 0.7rem 0.9rem;
  border: 2px solid var(--cream);
  border-radius: var(--radius-ui);
  background: var(--white);
  transition: border-color 200ms var(--ease-out);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--green);
}
.field textarea { min-height: 130px; resize: vertical; }

/* Autofill keeps the brand surface: the browser's pale yellow/blue fill is
   painted over with the input's own white via an inset shadow, and the text
   and caret colours are pinned so the value stays readable. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field select:-webkit-autofill,
.field textarea:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0 1000px var(--white);
  -webkit-text-fill-color: var(--text);
  caret-color: var(--green);
}
.field input:autofill {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--green);
}

.field.hasError input,
.field.hasError select,
.field.hasError textarea { border-color: var(--terracotta); }
.fieldError {
  display: none;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text);
}
.field.hasError .fieldError { display: block; }

.honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formNote { font-size: 0.95rem; margin-top: 1rem; }

/* ---------- Footer ---------- */

.siteFooter { background: var(--teal); color: var(--cream); padding: 4rem 0 0; }
.footerGrid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
  gap: 2.5rem;
  padding-bottom: 3rem;
}
@media (max-width: 820px) { .footerGrid { grid-template-columns: 1fr; gap: 2rem; } }

.siteFooter h2 {
  color: var(--white);
  font-size: 1.1rem;
  margin-bottom: 0.9rem;
}
.siteFooter p { color: var(--cream); }
.siteFooter a { color: var(--cream); }
.siteFooter a:hover { color: var(--green-light); }
.footerBrand { display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; text-decoration: none; }
.footerBrand img { width: 32px; height: 32px; }
.footerBrand .brandName { color: var(--white); font-size: 1.2rem; }

.footerLinks { list-style: none; margin: 0; padding: 0; }
.footerLinks li { margin-bottom: 0.55rem; }
.footerLinks a { color: var(--cream); text-decoration: none; }
.footerLinks a:hover { color: var(--green-light); text-decoration: underline; }

.footerLegal {
  border-top: 1px solid rgba(243, 242, 236, 0.25);
  padding: 1.4rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.95rem;
}
.footerLegal p { margin: 0; }
.siteFooter .ll-credit { color: var(--cream); text-decoration: none; }
.siteFooter .ll-credit .ll-credit-built { color: var(--terracotta); }
.siteFooter .ll-credit .ll-credit-name {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color 200ms var(--ease-out);
}
.siteFooter .ll-credit:hover { color: var(--cream); }
.siteFooter .ll-credit:hover .ll-credit-name { color: var(--terracotta); }

/* ---------- Motion ---------- */

/* The one authored moment: the home hero entrance (defined in pageHome.css).
   Everything else moves only in response to the visitor. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Cookie consent card and settings overlay: the site's own palette. The consent
   stylesheet seeds its light theme with a navy and a grey-blue this site never
   uses, so the tokens are re-pointed at the white surface, the body grey and the
   green. Measured against #FFFFFF: #4C4C4C 8.59:1, #01795E 5.39:1, and white on
   the green accept button 5.39:1 (WCAG AA text is 4.5:1). Loaded before
   cookie-consent.css, so the extra `body` is what lets these rules win. */
body .cc-cookie, body .cc-cookie-overlay {
  --cc-surface: var(--white);
  --cc-text-primary: var(--text);
  --cc-text-secondary: var(--text);
  --cc-accent: var(--green);
  --cc-accent-text: var(--green);
}
body .cc-cookie-accept { background: var(--green); color: var(--white); }