:root {
  --ink: #10261c;
  --forest: #0f3d2e;
  --moss: #2d7a56;
  --leaf: #78995a;
  --sand: #ece3cf;
  --stone: #d4c1a1;
  --sun: #c8a76a;
  --paper: #fbf8f0;
}

html { scroll-behavior: smooth; }

body {
  overflow-x: hidden;
  background:
    radial-gradient(900px 420px at 0% 0%, rgba(200,167,106,.16), transparent 52%),
    radial-gradient(760px 420px at 100% 8%, rgba(45,122,86,.12), transparent 48%),
    linear-gradient(180deg, #fbf8f0 0%, #f4eddc 45%, #fbf8f0 100%);
  color: var(--ink);
}

.focus-ring:focus-visible { outline: 3px solid rgba(15,61,46,.24); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Image frames */
.image-frame {
  background: linear-gradient(135deg, rgba(200,167,106,.28), rgba(45,122,86,.16) 52%, rgba(255,255,255,.55));
  padding: 10px;
  border-radius: 2rem;
  box-shadow: 0 24px 50px rgba(16,38,28,.12);
}
.image-frame > img { display: block; width: 100%; height: auto; border-radius: 1.5rem; background: #f7f3ea; }

.image-chip {
  background: linear-gradient(135deg, rgba(200,167,106,.16), rgba(120,153,90,.14));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}

/* Story banners — used at the top of each page */
.story-banner {
  position: relative;
  overflow: hidden;
  border-radius: 2.25rem;
  border: 1px solid rgba(16,38,28,.1);
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(247,243,234,.96));
  box-shadow: 0 22px 48px rgba(16,38,28,.1);
}
.story-banner img {
  display: block;
  width: 100%;
  height: calc(clamp(200px, 26vw, 320px) + 1cm);
  object-fit: cover;
  object-position: center;
  background: #f7f3ea;
}

@media (max-width: 767px) {
  .image-frame { padding: 8px; border-radius: 1.5rem; }
  .image-frame > img { border-radius: 1.15rem; }
  .story-banner { border-radius: 1.5rem; }
  .story-banner img { height: calc(220px + 1cm); min-height: calc(220px + 1cm); }
  .hero-caption-overlay { right: 1rem; left: 1rem; bottom: 1rem; max-width: none; }
}

/* Dropdown navigation */
.site-dropdown { position: relative; }
.site-dropdown > summary { user-select: none; }
.site-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  display: grid;
  min-width: 14rem;
  gap: .3rem;
  margin-top: .75rem;
  padding: .7rem;
  border: 1px solid rgba(16,38,28,.12);
  border-radius: 1.25rem;
  background: rgba(255,255,255,.96);
  box-shadow: 0 22px 40px rgba(16,38,28,.12);
}
.site-dropdown:not([open]) .site-dropdown-menu { display: none; }
.site-dropdown[open] > summary svg { transform: rotate(180deg); }

/* Auth buttons */
.site-auth-login, .site-auth-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.85rem;
  padding: .72rem 1.15rem;
  border-radius: 1rem;
  border: 1px solid rgba(16,38,28,.14);
  background: rgba(255,255,255,.96);
  color: var(--ink);
  box-shadow: 0 12px 26px rgba(16,38,28,.06);
  text-decoration: none;
}
.site-auth-login { background: var(--forest); border-color: var(--forest); color: #fff; }
.site-auth-login:hover { opacity: .95; }
.site-auth-logout:hover { background: var(--sand); }

/* Form input visibility */
input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='hidden']),
select,
textarea {
  border: 1px solid rgba(16,38,28,.24) !important;
  background: #fff !important;
  color: var(--ink);
  box-shadow: inset 0 1px 2px rgba(16,38,28,.06);
}
input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='hidden'])::placeholder,
textarea::placeholder { color: rgba(16,38,28,.48); }
input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='hidden']):focus,
select:focus,
textarea:focus {
  border-color: var(--forest) !important;
  outline: 3px solid rgba(15,61,46,.12);
  outline-offset: 0;
  box-shadow: 0 0 0 3px rgba(15,61,46,.08);
}

/* Contact form submit button */
[data-contact-form] button[type='submit'] {
  background-color: var(--forest) !important;
  color: #fff !important;
  border: 1px solid var(--forest) !important;
  box-shadow: 0 14px 30px rgba(16,38,28,.12);
}
[data-contact-form] button[type='submit']:hover {
  opacity: 0.92;
}

/* Login form buttons */
#loginForm button[type='submit'] {
  background: var(--forest) !important;
  border: 1px solid var(--forest) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(16,38,28,.12);
}
#resetBtn,
#signupForm button[type='submit'] {
  background: #fff !important;
  border: 1px solid rgba(16,38,28,.24) !important;
  color: var(--ink) !important;
}
#resetBtn:hover,
#signupForm button[type='submit']:hover { background: var(--sand) !important; }

/* Homepage service card images — uniform crop height in the grid */
#services .image-frame img {
  width: 100%;
  height: clamp(170px, 18vw, 220px);
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 0.9rem;
  display: block;
}