/* ==========================================================================
   The Imperial — design system
   Replaces: bootstrap.min.css, plugins.css, style.css, type.css,
             color/leaf.css, imperial.css
   Guide: /DESIGN.md
   ==========================================================================

   Contents
   1. Fonts (Jost + Jam icons)
   2. Design tokens
   3. Base & typography
   4. Layout (container / row / col compat grid)
   5. Utilities (spacing, display, flex, text — only classes the site uses)
   6. Navbar, offcanvas & hamburger
   7. Hero (homepage)
   8. Page title band
   9. Buttons
   10. Content components (boxes, cards, tables, alerts, lists, posts…)
   11. Gallery & lightbox
   12. Footer
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Jost';
  src: url('../type/jost/Jost-Book.woff2') format('woff2'),
       url('../type/jost/Jost-Book.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Jost';
  src: url('../type/jost/Jost-BookItalic.woff2') format('woff2'),
       url('../type/jost/Jost-BookItalic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Jost';
  src: url('../type/jost/Jost-Medium.woff2') format('woff2'),
       url('../type/jost/Jost-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Jost';
  src: url('../type/jost/Jost-Semi.woff2') format('woff2'),
       url('../type/jost/Jost-Semi.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Jost';
  src: url('../type/jost/Jost-Bold.woff2') format('woff2'),
       url('../type/jost/Jost-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Jam';
  src: url('../type/jam/Jam.woff') format('woff'),
       url('../type/jam/Jam.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.jam {
  font-family: 'Jam';
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.jam-android:before            { content: "\e911"; }
.jam-apple:before              { content: "\e915"; }
.jam-arrow-circle-down:before  { content: "\e91d"; }
.jam-calendar:before           { content: "\e99a"; }
.jam-check:before              { content: "\e9a7"; }
.jam-chevron-right:before      { content: "\e9bc"; }
.jam-close:before              { content: "\ea05"; }
.jam-document:before           { content: "\ea44"; }
.jam-download:before           { content: "\ea46"; }
.jam-facebook:before           { content: "\ea62"; }
.jam-files:before              { content: "\ea73"; }
.jam-info:before               { content: "\eae2"; }
.jam-leaf:before               { content: "\eaf3"; }
.jam-phone:before              { content: "\eb6a"; }
.jam-star:before               { content: "\ebf4"; }
.jam-world:before              { content: "\ec72"; }

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */

:root {
  /* Palette */
  --ink: #24262a;            /* neutral charcoal — body text, dark UI */
  --ink-soft: #5a6067;       /* secondary text */
  --tangerine: #e8811c;      /* primary accent — keylines, rules, icons, focus */
  --tangerine-deep: #b35d08; /* buttons & small accents on light (AA with white text) */
  --tangerine-soft: #fdeedd; /* tangerine tint surface */
  --tangerine-light: #f5b26b;/* hovers on dark surfaces */
  --mist: #f3f4f7;           /* light section surface (gray-wrapper) — neutral, no green tint */
  --paper: #f9fafb;          /* page ground */
  --white: #ffffff;
  --night: #212327;          /* footer / dark-wrapper — neutral, not forest green */
  --plum: #7c4fc9;           /* links — drawn from the heritage purple gradient */
  --plum-deep: #61399f;      /* link hover */
  --clay: #b6543f;           /* notices & primary calls to action */
  --clay-deep: #9c4433;
  --slate: #4e6e84;          /* informational actions */
  --slate-deep: #405b6e;
  --gold: #c9a05a;           /* ratings */

  /* Legacy palette aliases (template classes still in markup) */
  --color-default: var(--tangerine-deep);
  --rgb-default: 179, 93, 8;
  --color-red: var(--clay);
  --color-blue: var(--slate);
  --color-green: var(--tangerine-deep);   /* no-green policy: legacy "green" maps to the accent */
  --color-teal: var(--slate);
  --color-orange: var(--gold);
  --color-rose: var(--clay);
  --color-hibiscus: var(--clay);
  --color-white: var(--white);

  /* Type */
  --font-sans: 'Jost', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --leading: 1.65;

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --section-pad: clamp(3.5rem, 7vw, 6rem);
  --section-pad-short: clamp(2.25rem, 4vw, 3rem);

  /* Shape & depth */
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 20px;
  --shadow-s: 0 1px 2px rgba(31, 38, 33, 0.06), 0 2px 8px rgba(31, 38, 33, 0.06);
  --shadow-m: 0 1px 2px rgba(31, 38, 33, 0.06), 0 6px 20px rgba(31, 38, 33, 0.1);
  --shadow-l: 0 2px 4px rgba(31, 38, 33, 0.08), 0 16px 40px rgba(31, 38, 33, 0.16);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --speed: 160ms;

  /* Chrome */
  --navbar-height: 76px;
}

/* --------------------------------------------------------------------------
   3. Base & typography
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--navbar-height) + 1rem);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 4.5vw, 2.75rem); font-weight: 500; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.1875rem; }
h5 { font-size: 1.0625rem; }
h6 { font-size: 0.9375rem; }

p {
  margin: 0 0 1rem;
  text-wrap: pretty;
}

a {
  color: var(--plum);
  text-decoration: none;
  transition: color var(--speed) var(--ease-out);
}

a:hover { color: var(--plum-deep); }

.inverse-text,
.inverse-text h1, .inverse-text h2, .inverse-text h3,
.inverse-text h4, .inverse-text h5, .inverse-text h6 { color: var(--white); }
.inverse-text a { color: var(--white); }
.inverse-text a:hover { color: var(--tangerine-light); }

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

figure { margin: 0 0 1rem; }

hr {
  border: 0;
  border-top: 1px solid rgba(35, 42, 37, 0.12);
  margin: var(--space-4) 0;
}

address { font-style: normal; margin-bottom: 1rem; }

blockquote {
  margin: 0 0 1rem;
  padding: var(--space-2) var(--space-4);
  border-left: 3px solid var(--tangerine);
  color: var(--ink-soft);
}

ul, ol { margin: 0 0 1rem; padding-left: 1.4em; }

::selection { background: #f9ddba; color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--tangerine-deep);
  outline-offset: 2px;
  border-radius: 2px;
}

.lead {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.55;
}

.lead.larger { font-size: 1.375rem; }

.display-4 { font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 500; }

.section-title {
  font-size: 1.5rem;
  letter-spacing: 0.01em;
}

.section-title.text-uppercase {
  font-size: 1.25rem;
  letter-spacing: 0.09em;
}

.meta {
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.page-title {
  font-size: clamp(2.25rem, 5.5vw, 3.25rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-bottom: 0.25em;
}

/* --------------------------------------------------------------------------
   4. Layout — container / row / col compat grid
   Implements only the grid classes present in the site's markup.
   -------------------------------------------------------------------------- */

.container,
.container-fluid {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}

.container { max-width: 1140px; }
.container-fluid { max-width: none; padding-right: 1.25rem; padding-left: 1.25rem; }

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -1rem;
  margin-left: -1rem;
}

.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: 1rem;
  padding-left: 1rem;
}

.col { flex: 1 0 0%; }

.col-6  { flex: 0 0 auto; width: 50%; }

.gutter-60 { row-gap: 3rem; }

@media (min-width: 576px) {
  .col-sm-6  { flex: 0 0 auto; width: 50%; }
}

@media (min-width: 768px) {
  .col-md-3  { flex: 0 0 auto; width: 25%; }
  .col-md-4  { flex: 0 0 auto; width: 33.3333%; }
  .col-md-6  { flex: 0 0 auto; width: 50%; }
  .col-md-8  { flex: 0 0 auto; width: 66.6667%; }
  .col-md-10 { flex: 0 0 auto; width: 83.3333%; }
  .col-md-12 { flex: 0 0 auto; width: 100%; }
  .offset-md-2 { margin-left: 16.6667%; }
}

@media (min-width: 992px) {
  .col-lg-2  { flex: 0 0 auto; width: 16.6667%; }
  .col-lg-3  { flex: 0 0 auto; width: 25%; }
  .col-lg-4  { flex: 0 0 auto; width: 33.3333%; }
  .col-lg-6  { flex: 0 0 auto; width: 50%; }
  .col-lg-7  { flex: 0 0 auto; width: 58.3333%; }
  .col-lg-8  { flex: 0 0 auto; width: 66.6667%; }
  .col-lg-12 { flex: 0 0 auto; width: 100%; }
  .offset-lg-1 { margin-left: 8.3333%; }
  .offset-lg-2 { margin-left: 16.6667%; }
}

/* Section wrappers */
.wrapper { position: relative; }

.light-wrapper { background: var(--paper); }
.white-wrapper { background: var(--white); }
.gray-wrapper  { background: var(--mist); }

.dark-wrapper {
  background: var(--night);
  color: rgba(255, 255, 255, 0.82);
}

/* Heritage purple gradient — used for callout panels (blurb-callout) */
.gradient-wrapper {
  background: linear-gradient(135deg, #954aa6 0%, #725aee 100%);
  color: var(--white);
}

.inner {
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
}

.inner-top { padding-top: var(--section-pad); }
.inner-bottom { padding-bottom: var(--section-pad); }

.inner-short {
  padding-top: var(--section-pad-short);
  padding-bottom: var(--section-pad-short);
}

.content-wrapper { overflow-x: clip; }

/* --------------------------------------------------------------------------
   5. Utilities — only what the markup uses
   -------------------------------------------------------------------------- */

/* Display / flex */
.d-flex { display: flex !important; }
.d-none { display: none !important; }
.d-block { display: block !important; }
.flex-row { flex-direction: row !important; }
.align-items-center { align-items: center !important; }
.align-items-stretch { align-items: stretch !important; }
.justify-content-center { justify-content: center !important; }
.float-right { float: right !important; }
.position-static { position: static !important; }
.position-absolute { position: absolute !important; }
.h-100 { height: 100% !important; }
.equal { display: flex; flex-wrap: wrap; }
.equal > [class*="col-"] { display: flex; }

@media (min-width: 768px) {
  .d-md-block { display: block !important; }
  .d-md-none { display: none !important; }
}

@media (min-width: 992px) {
  .d-lg-none { display: none !important; }
  .d-lg-block { display: block !important; }
  .order-lg-2 { order: 2 !important; }
  .order-lg-3 { order: 3 !important; }
}

@media (min-width: 1200px) {
  .d-xl-none { display: none !important; }
}

/* Margin / padding — template scale: N × 0.05rem */
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }

.mb-0  { margin-bottom: 0 !important; }
.mt-0  { margin-top: 0 !important; }
.pt-0  { padding-top: 0 !important; }
.pb-0  { padding-bottom: 0 !important; }
.mb-1  { margin-bottom: 0.25rem !important; }
.mb-3  { margin-bottom: 1rem !important; }
.mb-4  { margin-bottom: 1.5rem !important; }
.mb-5  { margin-bottom: 0.25rem !important; }   /* template scale, not bootstrap */
.mb-10 { margin-bottom: 0.5rem !important; }
.mb-15 { margin-bottom: 0.75rem !important; }
.mb-20 { margin-bottom: 1rem !important; }
.mb-30 { margin-bottom: 1.5rem !important; }
.mb-40 { margin-bottom: 2rem !important; }
.pb-40 { padding-bottom: 2rem !important; }
.pt-80 { padding-top: 4rem !important; }
.p-4   { padding: 1.5rem !important; }          /* bootstrap scale — pre-existing markup */

/* Vertical spacers */
.space20, .space30, .space40, .space60, .space90 { display: block; width: 100%; }
.space20 { height: 1rem; }
.space30 { height: 1.5rem; }
.space40 { height: 2rem; }
.space60 { height: 3rem; }
.space90 { height: 4.5rem; }

/* Text */
.text-center { text-align: center !important; }

/* responsive text alignment must come after .text-center to win the tie */
@media (min-width: 992px) {
  .text-lg-left { text-align: left !important; }
}
.text-uppercase { text-transform: uppercase !important; letter-spacing: 0.06em; }
.text-lowercase { text-transform: lowercase !important; }
.font-weight-500 { font-weight: 500 !important; }
.list-unstyled { list-style: none; padding-left: 0; margin-left: 0; }

/* Colors */
.color-white { color: var(--white) !important; }
.color-red { color: var(--clay) !important; }
.color-green { color: var(--tangerine-deep) !important; }
.color-teal { color: var(--slate) !important; }
.color-hibiscus { color: var(--clay) !important; }
.text-green { color: var(--tangerine-deep) !important; }
.bg-white { background: var(--white) !important; }
.bg-dark { background: var(--night) !important; }
.bg-aqua { background: var(--tangerine-soft) !important; }
.bg-rose { background: var(--clay) !important; }
.bg-orange { background: var(--gold) !important; }
.bg-tint10 { background: rgba(31, 38, 33, 0.06) !important; }
.nocolor { color: inherit !important; }
.nocolor:hover { color: var(--tangerine-light) !important; }

/* Images & embeds */
.img-fluid { max-width: 100%; height: auto; }

.rounded { border-radius: var(--radius-m) !important; }

figure.rounded img, img.rounded { border-radius: var(--radius-m); }

.embed-responsive {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-m);
}

.embed-responsive::before { content: ""; display: block; }
.embed-responsive-16by9::before { padding-top: 56.25%; }
.embed-responsive-1by1::before { padding-top: 100%; }

.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.shadow { box-shadow: var(--shadow-m) !important; }

/* Background image helpers (JS fills from data-image-src) */
.bg-image {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.bg-full { background-size: cover; }
.bg-position-middle { background-position: center center; }
.bg-position-top { background-position: center top; }

/* --------------------------------------------------------------------------
   6. Navbar, offcanvas & hamburger
   -------------------------------------------------------------------------- */

.navbar {
  position: relative;
  z-index: 100;
  width: 100%;
  min-height: var(--navbar-height);
  display: flex;
  align-items: center;
  background: var(--white);
  box-shadow: var(--shadow-s);
  padding: 0.5rem 0;
}

.navbar > .container,
.navbar > .container-fluid {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.navbar.transparent { background: transparent; box-shadow: none; }

.navbar.absolute {
  position: absolute;
  top: 0;
  left: 0;
}

.navbar.smoke { background: rgba(31, 38, 33, 0.42); backdrop-filter: blur(6px); }

/* raised above the offcanvas backdrop while its drawer is open (set by JS) */
.navbar.navbar-raised { z-index: 1200; }

.navbar-brand { margin-right: 1.5rem; }
.navbar-brand img { display: block; max-height: 48px; width: auto; }

.navbar-other { display: flex; align-items: center; }
.navbar-other .navbar-nav { display: flex; padding: 0; margin: 0; list-style: none; }

button.plain {
  appearance: none;
  background: none;
  border: 0;
  padding: 0.5rem;
  min-width: 40px;
  min-height: 40px;
  cursor: pointer;
  font-size: 1.25rem;
  color: inherit;
  line-height: 1;
  border-radius: var(--radius-s);
  transition: color var(--speed) var(--ease-out), background-color var(--speed) var(--ease-out);
}

button.plain:hover { color: var(--tangerine-deep); background: rgba(36, 38, 42, 0.05); }
.inverse-text button.plain:hover,
.navbar.inverse-text button.plain:hover { color: var(--tangerine-light); background: rgba(255, 255, 255, 0.08); }

/* Primary nav */
.navbar-nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link,
.navbar-nav .nav-item > a {
  display: block;
  padding: 0.65rem 1rem;
  font-weight: 500;
  color: inherit;
}

.nav-uppercase .navbar-nav .nav-link {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8125rem;
}

.navbar-hover-opacity .nav-link { transition: opacity var(--speed) var(--ease-out); }
.navbar-hover-opacity .navbar-nav:hover .nav-link:not(:hover) { opacity: 0.55; }

/* Dropdowns — CSS-driven on desktop, tap-to-open in offcanvas */
.nav-item.dropdown { position: relative; }

.dropdown-menu {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  min-width: 13rem;
  background: var(--white);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-l);
  color: var(--ink);
}

.dropdown-item {
  display: block;
  padding: 0.4rem 1.25rem;
  color: var(--ink);
  font-weight: 400;
  white-space: nowrap;
  transition: background-color var(--speed) var(--ease-out), color var(--speed) var(--ease-out);
}

.dropdown-item:hover {
  background: var(--tangerine-soft);
  color: var(--ink);
}

@media (min-width: 992px) {
  .navbar-collapse {
    display: flex;
    flex-basis: auto;
    align-items: center;
  }

  .navbar-collapse .navbar-nav { align-items: center; }

  .offcanvas-header { display: none; }

  .nav-item .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 110;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition: opacity var(--speed) var(--ease-out),
                transform var(--speed) var(--ease-out),
                visibility 0s linear var(--speed);
  }

  .nav-item.dropdown:hover > .dropdown-menu,
  .nav-item.dropdown:focus-within > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 4px);
    transition: opacity var(--speed) var(--ease-out),
                transform var(--speed) var(--ease-out),
                visibility 0s;
  }

  /* dropdown panels are always light, even inside an inverse-text navbar */
  .navbar .dropdown-menu .dropdown-item,
  .inverse-text .dropdown-menu .dropdown-item { color: var(--ink); }
  .navbar .dropdown-menu .dropdown-item:hover,
  .inverse-text .dropdown-menu .dropdown-item:hover {
    background: var(--tangerine-soft);
    color: var(--ink);
  }

  /* keep a hover bridge so the menu doesn't close crossing the gap */
  .nav-item.dropdown::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 10px;
  }

  .navbar-hamburger { display: none; }
}

/* Sticky clone — JS clones .navbar, adds .navbar-clone, toggles .navbar-stuck */
.navbar-clone {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-m);
  color: var(--ink);
  transform: translateY(-110%);
  transition: transform 280ms var(--ease-out);
}

.navbar-clone.inverse-text { color: var(--ink); }
.navbar-clone .logo-light { display: none; }
.navbar-clone .logo-dark, .navbar-clone .logo { display: block; }
.navbar-clone.navbar-stuck { transform: translateY(0); }

/* Off-canvas mobile nav */
@media (max-width: 991.98px) {
  .navbar-collapse.offcanvas-nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1100;
    width: min(20rem, 85vw);
    background: var(--night);
    color: rgba(255, 255, 255, 0.9);
    padding: 1.25rem 1.5rem 2rem;
    overflow-y: auto;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 280ms var(--ease-out), visibility 0s linear 280ms;
  }

  .navbar-collapse.offcanvas-nav.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 280ms var(--ease-out), visibility 0s;
  }

  .offcanvas-nav .navbar-nav { flex-direction: column; margin-top: 1rem; }
  .offcanvas-nav .nav-link { padding: 0.55rem 0; }

  .offcanvas-nav .dropdown-menu {
    position: static;
    display: none;
    background: transparent;
    box-shadow: none;
    color: inherit;
    padding: 0 0 0.5rem 1rem;
  }

  .offcanvas-nav .nav-item.show > .dropdown-menu { display: block; }

  .offcanvas-nav .dropdown-item {
    color: rgba(255, 255, 255, 0.75);
    padding: 0.3rem 0;
    white-space: normal;
  }

  .offcanvas-nav .dropdown-item:hover { background: none; color: var(--tangerine-light); }

  .offcanvas-nav .dropdown-toggle::after {
    content: "\e9bc";
    font-family: 'Jam';
    font-size: 0.8em;
    margin-left: 0.4em;
    display: inline-block;
    transition: transform var(--speed) var(--ease-out);
  }

  .offcanvas-nav .nav-item.show > .dropdown-toggle::after { transform: rotate(90deg); }

  .offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .offcanvas-header .navbar-image { max-height: 40px; width: auto; }
}

/* Off-canvas info panel (right) */
.offcanvas-info {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  width: min(22rem, 88vw);
  background: var(--night);
  padding: 1.5rem 1.75rem 2rem;
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 280ms var(--ease-out), visibility 0s linear 280ms;
}

.offcanvas-info.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 280ms var(--ease-out), visibility 0s;
}

.offcanvas-info img { max-height: 44px; width: auto; }

.offcanvas-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}

/* Dim + lock page behind any offcanvas */
.offcanvas-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(31, 38, 33, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms var(--ease-out), visibility 0s linear 280ms;
}

html.offcanvas-open .offcanvas-backdrop {
  opacity: 1;
  visibility: visible;
  transition: opacity 280ms var(--ease-out), visibility 0s;
}

html.offcanvas-open,
html.offcanvas-open body { overflow: hidden; }

/* Hamburger */
.hamburger span,
.hamburger span::before,
.hamburger span::after {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  position: relative;
  transition: transform 220ms var(--ease-out), top 220ms var(--ease-out);
}

.hamburger span::before,
.hamburger span::after {
  content: "";
  position: absolute;
  left: 0;
}

.hamburger span::before { top: -7px; }
.hamburger span::after  { top: 7px; }

.hamburger.active span { transform: rotate(45deg); }
.hamburger.active span::before { top: 0; transform: rotate(-90deg); }
.hamburger.active span::after  { top: 0; opacity: 0; }

/* Header widgets (offcanvas info content) */
.widget { margin-bottom: var(--space-4); }

.widget-title {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.75rem;
  color: inherit;
  opacity: 0.7;
}

.offcanvas-info .widget a,
.offcanvas-info p { color: rgba(255, 255, 255, 0.82); }
.offcanvas-info .widget a:hover { color: var(--tangerine-light); }

/* Social icon rows */
.social {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.05rem;
  color: inherit;
  background: rgba(128, 128, 128, 0.12);
  transition: background-color var(--speed) var(--ease-out),
              color var(--speed) var(--ease-out),
              transform var(--speed) var(--ease-out);
}

.social a:hover {
  background: var(--tangerine-deep);
  color: var(--white);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   7. Hero (homepage)
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--night);
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: hero-fade 24s infinite;
  will-change: opacity;
}

.hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: 8s; }
.hero-slide:nth-child(3) { animation-delay: 16s; }

@keyframes hero-fade {
  0%       { opacity: 0; }
  4%, 33%  { opacity: 1; }
  45%      { opacity: 0; }
  100%     { opacity: 0; }
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
              rgba(31, 38, 33, 0.35) 0%,
              rgba(31, 38, 33, 0.15) 40%,
              rgba(31, 38, 33, 0.55) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem 1.5rem;
  max-width: 42rem;
}

.hero-title {
  font-size: clamp(3rem, 9vw, 4.75rem);
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.015em;
  line-height: 1.05;
  margin: 0 0 0.35em;
}

.hero-sub {
  font-size: clamp(1rem, 2.4vw, 1.3125rem);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 2.25rem;
}

.hero-sub::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin: 1.5rem auto 0;
  background: var(--tangerine);
}

.hero-content > * {
  opacity: 0;
  transform: translateY(14px);
  animation: hero-rise 800ms var(--ease-out) forwards;
}

.hero-content > *:nth-child(1) { animation-delay: 200ms; }
.hero-content > *:nth-child(2) { animation-delay: 320ms; }
.hero-content > *:nth-child(3) { animation-delay: 440ms; }

@keyframes hero-rise {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide { animation: none; opacity: 0; }
  .hero-slide:first-child { opacity: 1; }
  .hero-content > * { animation: none; opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   8. Page title band
   -------------------------------------------------------------------------- */

.page-title-wrapper {
  position: relative;
  background-color: var(--night);
}

.page-title-wrapper.image-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
              rgba(31, 38, 33, 0.42) 0%,
              rgba(31, 38, 33, 0.18) 45%,
              rgba(31, 38, 33, 0.5) 100%);
}

.page-title-wrapper .container {
  position: relative;
  z-index: 2;
}

.page-title-wrapper .inner {
  padding-top: calc(var(--navbar-height) + 2rem);
  padding-bottom: 4rem;
}

.page-title-wrapper .lead {
  letter-spacing: 0.04em;
  opacity: 0.92;
}

.header-image-credit {
  position: absolute;
  z-index: 3;
  bottom: 0.3rem;
  right: 0.6rem;
  font-size: 10px;
  opacity: 0.7;
  color: #ddd;
}

.header-image-credit a { color: var(--white); }

/* --------------------------------------------------------------------------
   9. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 0.6em 1.7em;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.5;
  text-align: center;
  color: var(--white);
  background: var(--tangerine-deep);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--shadow-s);
  transition: background-color var(--speed) var(--ease-out),
              box-shadow var(--speed) var(--ease-out),
              transform var(--speed) var(--ease-out);
}

.btn:hover {
  background: #8f4a04;
  color: var(--white);
  box-shadow: var(--shadow-m);
  transform: translateY(-1px);
}

.btn:active { transform: scale(0.96); }

.btn.btn-sm { padding: 0.45em 1.3em; font-size: 0.875rem; }

.btn-primary { background: var(--tangerine-deep); }
.btn-primary:hover { background: #8f4a04; }

.btn-red { background: var(--clay); }
.btn-red:hover { background: var(--clay-deep); }

.btn-blue { background: var(--slate); }
.btn-blue:hover { background: var(--slate-deep); }

/* legacy alias — visual emphasis now default */
.btn-strong-hover:hover { box-shadow: var(--shadow-m); }

/* --------------------------------------------------------------------------
   10. Content components
   -------------------------------------------------------------------------- */

/* Boxes (council cards, contact tiles) */
.box {
  background: var(--white);
  border-radius: var(--radius-m);
  padding: var(--space-4);
  height: 100%;
}

.box.shadow { box-shadow: var(--shadow-m); }

/* box fills the column (equal-height rows) minus the row gap its margin creates */
.council .box { margin-bottom: 2em; height: calc(100% - 2em); }
.council .meta { min-height: 2rem; }

/* Cards (businesses page) */
.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
  overflow: hidden;
  transition: box-shadow var(--speed) var(--ease-out), transform var(--speed) var(--ease-out);
}

.card:hover { box-shadow: var(--shadow-m); transform: translateY(-2px); }

.card-img-top { width: 100%; object-fit: cover; }

.card-body { padding: var(--space-4); flex: 1 1 auto; }

/* Tables (minutes & documents) */
.table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  font-variant-numeric: tabular-nums;
}

.table th,
.table td {
  padding: 0.65rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid rgba(35, 42, 37, 0.1);
  vertical-align: top;
}

.table thead th {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--tangerine);
}

.table tbody tr:hover { background: rgba(232, 129, 28, 0.06); }

/* Alerts */
.alert {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-m);
  margin-bottom: 1.5rem;
  background: var(--tangerine-soft);
  border-left: 3px solid var(--tangerine);
}

.alert-warning {
  background: #f7ecd8;
  border-left-color: var(--gold);
}

.alert.bg-aqua a { color: var(--tangerine-deep); font-weight: 500; }

/* Badges */
.badge {
  display: inline-block;
  padding: 0.3em 0.85em;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--tangerine-deep);
  border-radius: 999px;
}

.badge-pill { border-radius: 999px; }

/* Breadcrumbs (notice pages) */
.breadcrumbs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0;
  margin: 0 0 1.5rem;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.breadcrumbs li + li::before {
  content: "\e9bc";
  font-family: 'Jam';
  font-size: 0.7em;
  margin: 0 0.5rem;
  opacity: 0.5;
}

/* Icon lists */
ul.icon-list {
  list-style: none;
  padding-left: 1.8em;
}

ul.icon-list li { margin-bottom: 0.4em; }

ul.icon-list li i {
  margin-left: -1.8em;
  margin-right: 0.55em;
  color: var(--plum);
}

ul.icon-list.imperial-list { margin-left: 2em; }
ul.icon-list.imperial-list li i.jam { margin-left: -2em; }

.bullet-blue li i { color: var(--slate); }
.bullet-red li i { color: var(--clay); }
.bullet-green li i { color: var(--tangerine-deep); }

.unordered-list { padding-left: 1.4em; }

/* Sidebar (textpage) */
.sidebar {
  padding: var(--space-4);
  border-radius: var(--radius-m);
}

.sidebar hr { padding-top: 1em; margin-bottom: 1em; }

/* Posts list (notices index) */
.posts .post { margin-bottom: 2em; }

.posts .post-date {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.posts .post-heading { margin-bottom: 0.15em; }

.posts .post-blurb { font-size: 1.2rem; }

/* Notice actions */
.notice-actions { margin-top: 2rem; }

/* Blurb callout */
.blurb-callout {
  padding: 2em;
  border-radius: var(--radius-l);
  margin-bottom: 1em;
}

.blurb-callout.inverse-text a { color: var(--white); text-decoration: underline; }
.blurb-callout h5 { margin: 0.8rem 0; }
.blurb-callout p { margin-bottom: 0.6rem; }
.blurb-callout p:last-child { margin-bottom: 0; }

/* Profile initials (council) */
.profile-initials {
  display: inline-block;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  font-size: 4rem;
  line-height: 7rem;
  text-align: center;
  color: var(--white);
  background: var(--tangerine-deep);
}

.profile-initials.orange { background: var(--gold); }
.profile-initials.rose { background: var(--clay); }
.profile-initials.green { background: var(--plum); }
.profile-initials.blue { background: var(--slate); }

/* Bylaws typography */
.bylaws ol, .bylaws ul { padding-left: 1.5em; margin-top: 0; margin-bottom: 0.5em; }
.bylaws ul { list-style-type: none; }
.bylaws ul li { margin-bottom: 0.4em; }
.bylaws > ol > li { margin-bottom: 1em; }
.bylaws ol ol li, .bylaws ol ul li { margin-bottom: 0.25em; }
.bylaws ol li p { margin-top: 0.25em; margin-bottom: 0.25em; }
.bylaws ol li > strong:first-child { display: block; margin-bottom: 0.15em; }
.bylaws ol ol, .bylaws ol ul { margin-top: 0.25em; margin-bottom: 0.25em; }
.bylaws p + ol, .bylaws p + ul,
.bylaws ol + p, .bylaws ul + p { margin-top: 0.25em; }

/* Forms */
.form-group { margin-bottom: 1.25rem; }

.form-control {
  display: block;
  width: 100%;
  padding: 0.6rem 0.9rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(35, 42, 37, 0.2);
  border-radius: var(--radius-s);
  transition: border-color var(--speed) var(--ease-out), box-shadow var(--speed) var(--ease-out);
}

.form-control:focus {
  outline: none;
  border-color: var(--tangerine);
  box-shadow: 0 0 0 3px rgba(232, 129, 28, 0.22);
}

/* Panels (legacy) */
.panel {
  background: var(--white);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.panel-heading {
  padding: 1rem 1.25rem;
  background: var(--mist);
  font-weight: 600;
}

/* Icon tiles */
.icon-svg img { max-height: 56px; width: auto; }

/* --------------------------------------------------------------------------
   11. Gallery & lightbox
   -------------------------------------------------------------------------- */

.overlay {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-m);
}

.overlay img {
  display: block;
  width: 100%;
  transition: transform 400ms var(--ease-out);
  outline: 1px solid rgba(0, 0, 0, 0.1);
  outline-offset: -1px;
}

.overlay a { display: block; position: relative; }

.overlay a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(31, 38, 33, 0);
  transition: background-color var(--speed) var(--ease-out);
}

.overlay:hover img { transform: scale(1.04); }
.overlay:hover a::after { background: rgba(31, 38, 33, 0.18); }

/* Native-dialog lightbox (JS builds this) */
.lightbox-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 94vw;
  max-height: 94vh;
  overflow: visible;
}

.lightbox-dialog::backdrop {
  background: rgba(31, 38, 33, 0.88);
  backdrop-filter: blur(4px);
}

.lightbox-dialog img {
  display: block;
  max-width: 94vw;
  max-height: 86vh;
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-l);
}

.lightbox-dialog .lightbox-caption {
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  font-size: var(--text-sm);
  padding-top: 0.75rem;
}

.lightbox-dialog button {
  position: fixed;
  appearance: none;
  border: 0;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--speed) var(--ease-out);
}

.lightbox-dialog button:hover { background: rgba(255, 255, 255, 0.22); }

.lightbox-dialog .lightbox-close { top: 1rem; right: 1rem; }
.lightbox-dialog .lightbox-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox-dialog .lightbox-next { right: 1rem; top: 50%; transform: translateY(-50%); }

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */

footer.dark-wrapper a { color: rgba(255, 255, 255, 0.72); }
footer.dark-wrapper a:hover { color: var(--tangerine-light); }

footer .widget img { max-height: 44px; width: auto; }

footer .inner {
  padding-top: var(--section-pad-short);
  padding-bottom: var(--section-pad-short);
}

footer .widget-title { color: var(--white); opacity: 0.9; }

footer .social a { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.72); }
footer .social a:hover { background: var(--tangerine); color: var(--white); }

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
  .navbar, .offcanvas-info, .offcanvas-nav, footer, .hamburger { display: none !important; }
  body { background: #fff; color: #000; }
}