/* Floatographers theme on top of Bootstrap 5.3
   Palette from Ontario cottage country: lake blue, pine, pink granite, buoy orange.
   Light values on [data-bs-theme=light], dark on [data-bs-theme=dark] (set from the visitor's OS setting). */

:root,[data-bs-theme=light]{
  --fl-bg:#F2F4F1; --fl-surface:#FFFFFF; --fl-ink:#15211F; --fl-muted:#56635F; --fl-line:#D5DCD7;
  --fl-lake:#1D5371; --fl-lake-rgb:29,83,113; --fl-pine:#2E4A3B; --fl-granite:#B98D82;
  --fl-buoy:#D9532A; --fl-buoy-hover:#C4471F; --fl-buoy-ink:#FFFFFF;
}
[data-bs-theme=dark]{
  --fl-bg:#0E1719; --fl-surface:#152225; --fl-ink:#E5ECE8; --fl-muted:#9AAAA4; --fl-line:#26363A;
  --fl-lake:#7FB6D3; --fl-lake-rgb:127,182,211; --fl-pine:#9CC3A6; --fl-granite:#D6AFA4;
  --fl-buoy:#F0784F; --fl-buoy-hover:#F38D69; --fl-buoy-ink:#1A0E09;
}
:root,[data-bs-theme=light],[data-bs-theme=dark]{
  --fl-display:"Young Serif", Georgia, "Times New Roman", serif;
  --fl-body:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fl-mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  /* map onto Bootstrap */
  --bs-body-bg:var(--fl-bg); --bs-body-color:var(--fl-ink); --bs-body-font-family:var(--fl-body);
  --bs-body-line-height:1.6; --bs-border-color:var(--fl-line); --bs-secondary-color:var(--fl-muted);
  --bs-emphasis-color:var(--fl-ink); --bs-tertiary-bg:var(--fl-surface);
  --bs-primary:var(--fl-lake); --bs-primary-rgb:var(--fl-lake-rgb);
  --bs-link-color:var(--fl-lake); --bs-link-hover-color:var(--fl-ink); --bs-link-color-rgb:var(--fl-lake-rgb);
  --bs-focus-ring-color:rgba(var(--fl-lake-rgb),.35);
  --bs-form-invalid-color:var(--fl-buoy); --bs-form-invalid-border-color:var(--fl-buoy);
  --bs-border-radius:.5rem; --bs-border-radius-lg:.875rem;
}

body{-webkit-font-smoothing:antialiased}
h1,h2,h3,.h1,.h2,.h3,.display-font{font-family:var(--fl-display);font-weight:400;line-height:1.12;text-wrap:balance}
.font-mono{font-family:var(--fl-mono)}
.text-muted-fl{color:var(--fl-muted)}
.eyebrow{font:500 .72rem/1 var(--fl-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fl-muted)}
.measure{max-width:62ch}

/* buttons */
.btn{--bs-btn-font-weight:600;--bs-btn-padding-x:1.25rem;--bs-btn-padding-y:.7rem;border-radius:999px}
.btn-buoy{--bs-btn-bg:var(--fl-buoy);--bs-btn-border-color:var(--fl-buoy);--bs-btn-color:var(--fl-buoy-ink);
  --bs-btn-hover-bg:var(--fl-buoy-hover);--bs-btn-hover-border-color:var(--fl-buoy-hover);--bs-btn-hover-color:var(--fl-buoy-ink);
  --bs-btn-active-bg:var(--fl-buoy-hover);--bs-btn-active-border-color:var(--fl-buoy-hover);--bs-btn-active-color:var(--fl-buoy-ink);
  --bs-btn-disabled-bg:var(--fl-buoy);--bs-btn-disabled-border-color:var(--fl-buoy);--bs-btn-disabled-color:var(--fl-buoy-ink)}
.btn-glass{--bs-btn-color:#fff;--bs-btn-bg:rgba(255,255,255,.14);--bs-btn-border-color:rgba(255,255,255,.55);
  --bs-btn-hover-bg:rgba(255,255,255,.26);--bs-btn-hover-color:#fff;--bs-btn-hover-border-color:#fff;--bs-btn-active-bg:rgba(255,255,255,.3);--bs-btn-active-color:#fff}
.btn-primary{--bs-btn-bg:var(--fl-lake);--bs-btn-border-color:var(--fl-lake);--bs-btn-hover-bg:var(--fl-ink);--bs-btn-hover-border-color:var(--fl-ink);--bs-btn-color:var(--fl-bg);--bs-btn-hover-color:var(--fl-bg)}

/* nav */
.site-nav{background:color-mix(in srgb,var(--fl-bg) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--fl-line);
  --bs-navbar-color:var(--fl-muted);--bs-navbar-hover-color:var(--fl-ink);--bs-navbar-active-color:var(--fl-ink);--bs-navbar-brand-color:var(--fl-ink);--bs-navbar-brand-hover-color:var(--fl-ink)}
.site-nav .navbar-brand span{font:400 1.35rem/1 var(--fl-display);letter-spacing:-.01em}
.brand-mark{width:30px;height:30px;color:var(--fl-lake)}
.site-nav .nav-link{font-weight:500;border-radius:.4rem;padding-inline:.8rem!important}
.site-nav .nav-link.active{background:rgba(var(--fl-lake-rgb),.12)}
[data-bs-theme=dark] .navbar-toggler-icon{filter:invert(1)}

/* hero */
.hero{position:relative;overflow:hidden;background:#123D52;aspect-ratio:16/8.4;max-height:680px;min-height:460px;width:100%}
.hero canvas,.hero > img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.hero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,18,22,.05) 40%,rgba(6,18,22,.72) 100%)}
.hud{position:absolute;inset:clamp(12px,2.4vw,28px);pointer-events:none;color:#F4F7F5;font:500 .72rem/1.35 var(--fl-mono);letter-spacing:.08em}
.hud i{position:absolute;width:26px;height:26px;border:0 solid rgba(244,247,245,.85)}
.hud .tl{top:0;left:0;border-top-width:2px;border-left-width:2px}.hud .tr{top:0;right:0;border-top-width:2px;border-right-width:2px}
.hud .bl{bottom:0;left:0;border-bottom-width:2px;border-left-width:2px}.hud .br{bottom:0;right:0;border-bottom-width:2px;border-right-width:2px}
.hud .readout{position:absolute;top:8px;right:38px;text-align:right;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.hud .rec{position:absolute;top:8px;left:38px;display:flex;gap:7px;align-items:center;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.hud .rec b{width:8px;height:8px;border-radius:50%;background:#E8492A;animation:blink 1.6s steps(1) infinite}
@keyframes blink{50%{opacity:.2}}
.hero-copy{position:absolute;left:0;right:0;bottom:clamp(28px,6vw,64px);color:#F6F8F6}
.hero-copy h1{font-size:clamp(2.2rem,6vw,4.6rem);letter-spacing:-.015em;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.hero-copy p{color:rgba(246,248,246,.9);font-size:clamp(1rem,1.6vw,1.15rem)}

.regions{border-bottom:1px solid var(--fl-line)}
.regions span.place{font:400 1.1rem var(--fl-display);color:var(--fl-pine)}

.section{padding-block:clamp(48px,8vw,96px)}
.section-tight{padding-block:clamp(24px,4vw,40px)}
.specs > div{border-bottom:1px solid var(--fl-line);padding-block:1.1rem}
.specs dt{font:500 .7rem/1 var(--fl-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fl-muted)}
.specs dd{margin:.5rem 0 0;font:400 1.5rem/1.1 var(--fl-display);font-variant-numeric:tabular-nums}
.specs dd small{font:500 .8rem var(--fl-body);color:var(--fl-muted)}

/* about */
.page-head{padding-block:clamp(40px,7vw,80px) .5rem}
.page-head h1{font-size:clamp(2.1rem,5vw,3.6rem)}
.page-head p{font-size:1.08rem;color:var(--fl-muted)}
.card{--bs-card-bg:var(--fl-surface);--bs-card-border-color:var(--fl-line);--bs-card-border-radius:.875rem}
.feature-canvas{width:100%;height:100%;min-height:300px;display:block}
.tag{display:inline-block;font:500 .7rem/1 var(--fl-mono);letter-spacing:.12em;text-transform:uppercase;padding:.4rem .55rem;border-radius:4px;background:color-mix(in srgb,var(--fl-buoy) 15%,transparent);color:var(--fl-buoy)}
.ticks{list-style:none;padding:0;margin:1.25rem 0 0;display:grid;gap:.6rem}
.ticks li{display:grid;grid-template-columns:18px 1fr;gap:.6rem}
.ticks li::before{content:"";width:10px;height:10px;margin-top:.45rem;border:2px solid var(--svc-color,var(--fl-lake));border-radius:50%}
.svc{border:0;border-top:3px solid var(--svc-color,var(--fl-lake));border-radius:0 0 .65rem .65rem}
.svc-pine{--svc-color:var(--fl-pine)}
.process li{border-top:1px solid var(--fl-line);padding-top:1rem}
.process .step{font:500 .7rem/1 var(--fl-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fl-buoy)}

/* forms */
.form-control,.form-select{background-color:var(--fl-bg);border-color:var(--fl-line);color:var(--fl-ink);padding:.65rem .8rem}
.form-control:focus,.form-select:focus{background-color:var(--fl-bg);border-color:var(--fl-lake);color:var(--fl-ink)}
.form-label{font-weight:600;font-size:.92rem}
.form-label .opt{font-weight:400;color:var(--fl-muted)}
.btn-check + .btn-chip{--bs-btn-color:var(--fl-ink);--bs-btn-border-color:var(--fl-line);--bs-btn-bg:var(--fl-bg);--bs-btn-hover-bg:var(--fl-bg);--bs-btn-hover-border-color:var(--fl-lake);--bs-btn-hover-color:var(--fl-ink);--bs-btn-padding-y:.45rem;--bs-btn-padding-x:1rem;--bs-btn-font-weight:500}
.btn-check:checked + .btn-chip{--bs-btn-active-bg:rgba(var(--fl-lake-rgb),.14);--bs-btn-active-border-color:var(--fl-lake);--bs-btn-active-color:var(--fl-ink)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.alert-fl{background:color-mix(in srgb,var(--fl-pine) 12%,var(--fl-surface));border:0;color:var(--fl-ink)}
.alert-fl-error{background:color-mix(in srgb,var(--fl-buoy) 13%,var(--fl-surface));border:0;color:var(--fl-ink)}
.info-note{border-left:2px solid var(--fl-granite);padding-left:.9rem;color:var(--fl-muted);font-size:.92rem}
.selectable{user-select:all}

/* admin */
.table{--bs-table-bg:var(--fl-surface);--bs-table-color:var(--fl-ink);--bs-table-border-color:var(--fl-line);--bs-table-hover-bg:rgba(var(--fl-lake-rgb),.06);--bs-table-hover-color:var(--fl-ink)}
.status-badge{font:500 .7rem/1 var(--fl-mono);letter-spacing:.08em;text-transform:uppercase;padding:.4rem .55rem;border-radius:4px}
.status-new{background:color-mix(in srgb,var(--fl-buoy) 18%,transparent);color:var(--fl-buoy)}
.status-contacted{background:rgba(var(--fl-lake-rgb),.15);color:var(--fl-lake)}
.status-booked{background:color-mix(in srgb,var(--fl-pine) 18%,transparent);color:var(--fl-pine)}
.status-closed{background:color-mix(in srgb,var(--fl-muted) 18%,transparent);color:var(--fl-muted)}
.stat{font:400 2rem/1 var(--fl-display);font-variant-numeric:tabular-nums}
.tabular{font-variant-numeric:tabular-nums}

.site-footer{border-top:1px solid var(--fl-line);padding-block:1.75rem;color:var(--fl-muted);font-size:.88rem}

:focus-visible{outline:2px solid var(--fl-buoy);outline-offset:3px}
@media (max-width:575.98px){
  .hud .readout{display:none}
  .hero{aspect-ratio:auto;min-height:540px}
}
@media (prefers-reduced-motion:reduce){.hud .rec b{animation:none}}

/* Bootstrap components that otherwise fall back to default blue */
.nav-pills{--bs-nav-pills-link-active-bg:var(--fl-lake);--bs-nav-pills-link-active-color:var(--fl-bg);--bs-nav-link-color:var(--fl-lake);--bs-nav-link-hover-color:var(--fl-ink);--bs-nav-pills-border-radius:999px}
.pagination{--bs-pagination-color:var(--fl-lake);--bs-pagination-bg:var(--fl-surface);--bs-pagination-border-color:var(--fl-line);--bs-pagination-hover-color:var(--fl-ink);--bs-pagination-hover-bg:var(--fl-bg);--bs-pagination-active-bg:var(--fl-lake);--bs-pagination-active-border-color:var(--fl-lake);--bs-pagination-active-color:var(--fl-bg)}
.form-check-input:checked{background-color:var(--fl-lake);border-color:var(--fl-lake)}
.list-group{--bs-list-group-bg:var(--fl-surface);--bs-list-group-border-color:var(--fl-line);--bs-list-group-color:var(--fl-ink)}
.border-primary{border-color:var(--fl-lake)!important}