/* Dedza Welfare Trust, built on the Coropuna layout: a dark header over a
   lighter top bar, sage blocks and buttons, square corners, drawn borders,
   headings that mix bold and regular weights. The theme's brown and sage are
   replaced by the logo's family: a deep green in brown's place, and a soft
   sage made from the logo green. The logo's own bright green and red are kept
   for small marks. Loaded last so it sets the tone for every page. */

:root {
  /* Bootstrap's own green follows the logo green */
  --bs-success: #1f7a2e;
  --bs-success-rgb: 31, 122, 46;

  --dwt-deep: #0f3b1c;
  --dwt-deep-2: #0b2a14;
  --dwt-forest: #1f7a2e;
  --dwt-sage: #b5d4a0;
  --dwt-sage-2: #9fc78c;
  --dwt-sage-soft: #e9f2e2;
  --dwt-leaf: #39b54a;
  --dwt-red: #ec1c24;
  --dwt-paper: #f6f7f4;
  --dwt-line: #dfe5dc;
  --dwt-ink: #0b140d;
  --dwt-ink-soft: #4d5a50;
  --dwt-white: #ffffff;
  --dwt-heading: "Rubik", system-ui, sans-serif;
  --dwt-body: "Poppins", system-ui, sans-serif;
  --dwt-wrap: 1240px;
}

/* ---- Type and base ----------------------------------------------------- */

body {
  font-family: var(--dwt-body);
  color: var(--dwt-ink-soft);
  background: var(--dwt-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--dwt-heading);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Deep green headings only in the new sections; older pages keep inheriting,
   so a heading on a dark banner stays white. */
:where(.dwt-section, .dwt-hero, .dwt-quick, .dwt-split, .dwt-disclaimer) :where(h1, h2, h3, h4, h5, h6) {
  color: var(--dwt-deep);
}

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

::selection { background: var(--dwt-sage); color: var(--dwt-deep); }

:focus-visible {
  outline: 3px solid var(--dwt-leaf);
  outline-offset: 2px;
}

.dwt-wrap {
  width: 100%;
  max-width: var(--dwt-wrap);
  margin: 0 auto;
  padding: 0 20px;
}

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

.dwt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 30px;
  border: 2px solid transparent;
  border-radius: 0;
  font-family: var(--dwt-heading);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}

/* One filled button per section. Dark on light surfaces (white, paper, sage); sage only on
   dark ones (deep panels, the header). Hover never takes a button to its surface's colour,
   so it can't vanish: dark goes forest, sage goes white. */
.dwt-btn--sage { background: var(--dwt-sage); color: var(--dwt-deep); }
.dwt-btn--sage:hover { background: var(--dwt-white); color: var(--dwt-deep); }

.dwt-btn--dark { background: var(--dwt-deep); color: var(--dwt-white); }
.dwt-btn--dark:hover { background: var(--dwt-forest); color: var(--dwt-white); }

.dwt-btn--line { border-color: var(--dwt-deep); color: var(--dwt-deep); background: transparent; }
.dwt-btn--line:hover { background: var(--dwt-deep); color: var(--dwt-white); }

/* Plain link with an arrow; the words underline, never the arrow. */
.dwt-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--dwt-heading);
  font-weight: 500;
  color: var(--dwt-deep);
  text-decoration: none;
}
.dwt-link span { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.dwt-link i { color: var(--dwt-forest); transition: transform 0.2s ease; }
.dwt-link:hover { color: var(--dwt-forest); }
.dwt-link:hover i { transform: translateX(5px); }

/* Bootstrap buttons used across the older pages take the theme's colours. */
.btn-primary, .btn-success {
  background-color: var(--dwt-deep) !important;
  border-color: var(--dwt-deep) !important;
  color: var(--dwt-white) !important;
  border-radius: 0 !important;
  font-family: var(--dwt-heading);
}
.btn-primary:hover, .btn-success:hover {
  background-color: var(--dwt-forest) !important;
  border-color: var(--dwt-forest) !important;
}
.btn-outline-primary, .btn-outline-success {
  color: var(--dwt-deep) !important;
  border-color: var(--dwt-deep) !important;
  border-radius: 0 !important;
}
.btn-outline-primary:hover, .btn-outline-success:hover {
  background-color: var(--dwt-deep) !important;
  color: var(--dwt-white) !important;
}

/* ---- Headings ----------------------------------------------------------- */

/* The small line above a heading, in Coropuna's quiet sentence case. */
.dwt-eyebrow {
  display: block;
  font-family: var(--dwt-heading);
  font-size: 15px;
  font-weight: 400;
  color: var(--dwt-forest);
  margin-bottom: 10px;
}

/* Two-column headings: bold words and regular words on one line. */
.dwt-heading {
  font-family: var(--dwt-heading);
  font-size: clamp(30px, 3.1vw, 42px);
  font-weight: 400;
  line-height: 1.22;
  color: var(--dwt-deep);
  margin: 0;
}
.dwt-heading strong { font-weight: 700; }

/* Centred section titles, in title case like the page titles (capitals read dated). */
.dwt-title {
  font-family: var(--dwt-heading);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--dwt-deep);
  margin: 0;
}

.dwt-lede {
  font-size: 15px;
  line-height: 1.75;
  color: var(--dwt-ink-soft);
  max-width: 520px;
  margin: 10px auto 0;
}

.dwt-section-head { text-align: center; margin-bottom: 50px; }
.dwt-section { padding: 100px 0; }
.dwt-section--paper { background: var(--dwt-paper); }

/* ---- Top bar ----------------------------------------------------------- */

.dwt-topbar { background: var(--dwt-forest); color: var(--dwt-white); font-size: 13px; }
.dwt-topbar .dwt-wrap {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 24px;
  min-height: 48px;
}
.dwt-topbar__contact, .dwt-topbar__links { display: flex; align-items: center; gap: 28px; }
.dwt-topbar a { color: inherit; text-decoration: none; white-space: nowrap; }
.dwt-topbar a:hover { color: var(--dwt-sage); }
.dwt-topbar i { color: var(--dwt-sage); margin-right: 8px; }
.dwt-topbar__links a.dwt-topbar__text { color: var(--dwt-sage); text-transform: uppercase; letter-spacing: 0.04em; }
.dwt-topbar__links a.dwt-topbar__text:hover { color: var(--dwt-white); }
.dwt-topbar__sep { width: 1px; height: 14px; background: rgba(255, 255, 255, 0.35); }
.dwt-topbar__cta {
  display: flex;
  align-items: center;
  align-self: stretch;
  padding: 0 24px;
  background: var(--dwt-sage);
  color: var(--dwt-deep) !important;
  font-family: var(--dwt-heading);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dwt-topbar__cta:hover { background: var(--dwt-white); }
/* The networks' own marks, in their own colours; a slight fade on hover */
.dwt-topbar__social { display: flex; align-items: center; gap: 14px; }
.dwt-topbar__social a { display: inline-flex; align-items: center; transition: opacity 0.15s ease; }
.dwt-topbar__social a:hover { opacity: 0.85; }
.dwt-brand-mark { display: inline-flex; }
.dwt-brand-mark svg { display: block; height: 20px; width: auto; }

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

.dwt-header {
  background: var(--dwt-deep) !important;
  padding: 0 !important;
  box-shadow: 0 10px 24px rgba(11, 20, 13, 0.18) !important;
  position: sticky !important;
  top: 0;
  z-index: 1030 !important;
}
.dwt-header .dwt-wrap { display: flex; align-items: center; flex-wrap: wrap; min-height: 90px; }

.dwt-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; margin-right: 28px; }
/* The logo was drawn for white: on the dark bars it sits on its own white disc. */
.dwt-brand__badge {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--dwt-white);
  display: grid;
  place-items: center;
  padding: 6px;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(181, 212, 160, 0.35);
}
.dwt-brand__badge img { width: 100%; height: 100%; object-fit: contain; }
.dwt-brand__name {
  font-family: var(--dwt-heading);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--dwt-white);
}
.dwt-brand__name small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dwt-sage);
  margin-top: 5px;
}
.dwt-brand:hover .dwt-brand__name { color: var(--dwt-white); }

.dwt-header .navbar-toggler {
  margin-left: auto;
  border: 0 !important;
  border-radius: 0;
  padding: 8px;
}

.dwt-header .navbar-nav.dwt-nav { margin-left: auto; gap: 6px; }
.dwt-header .dwt-nav .nav-link {
  font-family: var(--dwt-heading);
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--dwt-white) !important;
  padding: 33px 14px !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.dwt-header .dwt-nav .nav-link:hover,
.dwt-header .dwt-nav .nav-link.active,
.dwt-header .dwt-nav .nav-link.show { color: var(--dwt-sage) !important; background: transparent !important; }

.dwt-header .dwt-actions { display: flex; align-items: center; gap: 4px; margin-left: 18px; }
.dwt-header .dwt-icon-link {
  width: 44px;
  height: 44px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  color: var(--dwt-white) !important;
  border-radius: 0 !important;
  background: transparent !important;
  position: relative;
}
.dwt-header .dwt-icon-link .dwt-icon { width: 24px; height: 24px; }
.dwt-header .dwt-icon-link:hover { color: var(--dwt-sage) !important; background: rgba(255, 255, 255, 0.06) !important; }
.dwt-header .dwt-icon-link::after { display: none !important; }
.dwt-header .basket-count-badge {
  position: absolute;
  top: 3px;
  right: 1px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--dwt-red);
  color: var(--dwt-white);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.dwt-header .dwt-donate {
  height: 62px;
  padding: 0 30px !important;
  margin-left: 12px;
  background: var(--dwt-sage) !important;
  color: var(--dwt-deep) !important;
  font-family: var(--dwt-heading);
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center;
}
.dwt-header .dwt-donate:hover,
.dwt-header .dwt-donate.show { background: var(--dwt-white) !important; }
/* Stays sage on the donate pages, where the older nav styles mark it active */
.dwt-header .navbar-nav .nav-link.dwt-donate.active { background: var(--dwt-sage) !important; color: var(--dwt-deep) !important; }
.dwt-header .navbar-nav .nav-link.dwt-donate.active:hover,
.dwt-header .navbar-nav .nav-link.dwt-donate.active.show { background: var(--dwt-white) !important; }

/* Header menus. One rule for all of them: they open flush with the bottom of the header bar
   (every item fills the bar's height, so a short button like Donate now still drops from the
   bar's edge), under the left edge of their link, or the right edge for the menus at the right.
   script.js only adds .show; the older stylesheets' menu rules are overridden here. */
.dwt-header .navbar-nav .nav-item.dropdown .dropdown-menu {
  min-width: 220px;
  margin: 0;
  padding: 8px 0;
  border: 0;
  border-top: 3px solid var(--dwt-sage);
  border-radius: 0;
  background: var(--dwt-white);
  box-shadow: 0 16px 34px rgba(11, 20, 13, 0.2);
}
.dwt-header .dropdown-item { font-size: 14px; color: var(--dwt-ink) !important; padding: 10px 20px; }
.dwt-header .dropdown-item:hover,
.dwt-header .dropdown-item:focus-visible,
.dwt-header .dropdown-item.active { background: var(--dwt-sage-soft) !important; color: var(--dwt-deep) !important; }
.dwt-header .dropdown-divider { margin: 6px 0; border-color: var(--dwt-line); }

@media (min-width: 992px) {
  .dwt-header .navbar-collapse { align-self: stretch; align-items: stretch; }
  .dwt-header .navbar-nav, .dwt-header .dwt-actions { align-items: stretch; }
  .dwt-header .navbar-nav > .nav-item { position: relative; display: flex; align-items: center; }
  .dwt-header .navbar-nav .nav-item.dropdown .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
  }
  .dwt-header .navbar-nav .nav-item.dropdown .dropdown-menu.dropdown-menu-end { left: auto; right: 0; }
  .dwt-header .navbar-nav .nav-item.dropdown .dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s;
  }
}

@media (max-width: 1199.98px) {
  .dwt-header .dwt-nav .nav-link { padding: 33px 10px !important; font-size: 14px !important; }
  .dwt-brand__name { font-size: 17px; }
}

@media (max-width: 991.98px) {
  .dwt-topbar__contact span.dwt-hide-sm { display: none; }
  .dwt-topbar__links .dwt-topbar__text, .dwt-topbar__social, .dwt-topbar__sep { display: none; }
  .dwt-header .dwt-wrap { min-height: 78px; padding-top: 6px; padding-bottom: 6px; }
  .dwt-brand__badge { width: 56px; height: 56px; }
  .dwt-header .navbar-collapse { flex-basis: 100%; padding: 8px 0 18px; }
  .dwt-header .dwt-nav .nav-link { padding: 12px 4px !important; }
  .dwt-header .dwt-actions { margin: 8px 0 0; flex-wrap: wrap; }
  .dwt-header .dwt-donate { width: 100%; height: 52px; margin: 0 !important; justify-content: center; box-shadow: none !important; }
  .dwt-header .dwt-donate:hover, .dwt-header .dwt-donate.show { background: var(--dwt-sage) !important; color: var(--dwt-deep) !important; }
  /* Phone menu: a plain list under the bar, rules between the links, submenus open in place
     as an indented list in the same colours, actions in a row and Donate now full width. */
  .dwt-header .navbar-collapse { margin: 0 !important; padding: 4px 0 22px !important; border: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 0 !important; background: transparent !important; backdrop-filter: none !important; }
  .dwt-header .dwt-nav .nav-link { display: flex; align-items: center; justify-content: space-between; margin: 0 !important; padding: 14px 0 !important; border-radius: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 16px !important; }
  .dwt-header .dwt-nav .nav-link:hover { background: transparent !important; }
  .dwt-header .dropdown-toggle::after { transition: transform 0.15s ease; }
  .dwt-header .dropdown-toggle.show::after { transform: rotate(180deg); }
  .dwt-header .navbar-nav .nav-item.dropdown .dropdown-menu { position: static !important; display: none !important; width: 100% !important; margin: 0 !important; padding: 4px 0 10px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; animation: none !important; }
  .dwt-header .navbar-nav .nav-item.dropdown .dropdown-menu.show { display: block !important; }
  .dwt-header .dropdown-item { display: block !important; min-height: 0 !important; margin: 0 !important; padding: 11px 0 11px 18px !important; border-radius: 0 !important; background: transparent !important; color: rgba(255, 255, 255, 0.82) !important; font-size: 15px !important; font-weight: 400 !important; }
  .dwt-header .dropdown-item:hover, .dwt-header .dropdown-item:focus-visible, .dwt-header .dropdown-item.active { background: transparent !important; color: var(--dwt-sage) !important; }
  .dwt-header .dropdown-divider { border-color: rgba(255, 255, 255, 0.12); }
  .dwt-header .dwt-actions { flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 0 !important; padding: 0 !important; border: 0 !important; }
  .dwt-header .dwt-actions .nav-item { margin: 0 !important; text-align: left !important; }
  .dwt-header .dwt-actions .nav-item.dropdown:has(.dropdown-menu.show) { flex-basis: 100%; }
  .dwt-header .dwt-actions .nav-item:has(> .dwt-donate) { flex-basis: 100%; margin-top: 8px !important; }
}

@media (max-width: 575.98px) {
  .dwt-topbar__contact a[href^="mailto"] { display: none; }
  .dwt-hide-xs { display: none; }
  .dwt-topbar__cta { padding: 0 16px; }
  .dwt-brand__name { font-size: 15px; }
  .dwt-brand__name small { display: none; }
}

/* ---- Drawn icons ------------------------------------------------------- */

.dwt-icon { display: inline-block; width: 64px; height: 64px; flex-shrink: 0; }
.dwt-icon svg { width: 100%; height: 100%; display: block; }

/* ---- Handprint pattern, from the logo's hands --------------------------- */

.dwt-handprints {
  background-color: var(--dwt-sage);
  background-image: url("../images/handprints.svg");
  background-size: 360px 360px;
}

/* ---- Messages ---------------------------------------------------------- */

.dwt-messages .alert { border-radius: 0; border: 0; margin: 0; font-size: 15px; }

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

.dwt-footer { background: var(--dwt-deep); color: rgba(255, 255, 255, 0.82); font-size: 15px; }
.dwt-footer__main { padding: 84px 0 56px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 48px; }
.dwt-footer h4 {
  font-family: var(--dwt-heading);
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dwt-white);
  margin: 0 0 24px;
}
.dwt-footer p { color: rgba(255, 255, 255, 0.78); line-height: 1.8; margin: 0; }
.dwt-footer ul { list-style: none; margin: 0; padding: 0; }
.dwt-footer li { margin-bottom: 12px; }
.dwt-footer a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.dwt-footer a:hover { color: var(--dwt-sage); }
.dwt-footer__brand .dwt-brand { margin-bottom: 22px; }
/* A statement, not a button: sage words between two short rules */
.dwt-footer__policy {
  display: inline-block;
  margin-top: 20px;
  padding: 8px 0;
  border-top: 1px solid rgba(181, 212, 160, 0.4);
  border-bottom: 1px solid rgba(181, 212, 160, 0.4);
  color: var(--dwt-sage);
  font-family: var(--dwt-heading);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dwt-footer__contact li { display: flex; gap: 12px; align-items: flex-start; }
.dwt-footer__contact i { color: var(--dwt-sage); margin-top: 5px; width: 16px; }
/* Social links: the site's drawn icons on white tiles (so their colours show on the dark
   footer), with the network and what's there beside them. Only the name underlines. */
.dwt-footer__social { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.dwt-footer__social a { display: inline-flex; align-items: center; gap: 14px; color: var(--dwt-white); }
.dwt-footer__social-mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  background: var(--dwt-white);
  transition: background-color 0.15s ease;
}
.dwt-footer__social-mark .dwt-icon { width: 42px; height: 42px; }
.dwt-footer__social-name { font-family: var(--dwt-heading); font-size: 16px; font-weight: 500; line-height: 1.3; }
.dwt-footer__social-name small { display: block; font-family: var(--dwt-body); font-size: 13px; font-weight: 400; color: var(--dwt-sage); }
.dwt-footer__social a:hover { color: var(--dwt-white); }
.dwt-footer__social a:hover .dwt-footer__social-mark { background: var(--dwt-sage-soft); }
.dwt-footer__social a:hover .dwt-footer__social-name > span { text-decoration: underline; text-underline-offset: 4px; }
.dwt-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 22px 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}
.dwt-footer__bottom .dwt-wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dwt-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.dwt-footer__credit { color: inherit; text-decoration: none; }
.dwt-footer__credit strong { font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.dwt-footer__credit:hover, .dwt-footer__credit:hover strong { color: var(--dwt-white); }

@media (max-width: 991.98px) {
  .dwt-section { padding: 72px 0; }
  .dwt-footer__main { grid-template-columns: 1fr 1fr; gap: 40px; padding: 64px 0 40px; }
}
@media (max-width: 575.98px) {
  .dwt-footer__main { grid-template-columns: 1fr; }
}

/* ---- Inner page banners ------------------------------------------------- */
/* The older pages share a dark photo banner. These rules give it the theme's
   voice: sage tagline, white uppercase title, square sage button. */

.hero-section .charity-tagline,
.auth-hero-section .charity-tagline { color: var(--dwt-sage) !important; }

.hero-section h1,
.hero-section .hero-title {
  font-family: var(--dwt-heading);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--dwt-white) !important;
  -webkit-text-fill-color: currentColor;
  background: none;
}

.hero-section .btn {
  border-radius: 0 !important;
  background: var(--dwt-sage) !important;
  border: 0 !important;
  color: var(--dwt-deep) !important;
  box-shadow: none !important;
  font-family: var(--dwt-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hero-section .btn:hover { background: var(--dwt-white) !important; }

main .btn { border-radius: 0; }

/* Gallery and contact banners sit inside the page container; stretch them edge to edge */
.gallery-hero,
.contact-hero {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
}

/* ---- Motion, as on the theme --------------------------------------------- */

/* The header tightens once the page scrolls (class set by motion.js) */
.dwt-header .dwt-wrap { transition: min-height 0.3s ease; }
.dwt-header .dwt-brand__badge { transition: transform 0.3s ease; }
.dwt-header.is-scrolled .dwt-wrap { min-height: 74px; }
.dwt-header.is-scrolled .dwt-brand__badge { transform: scale(0.84); }

/* Photo reveal: a sage panel wipes away to show the picture */
[data-aos="dwt-reveal"] { position: relative; }
[data-aos="dwt-reveal"].aos-init::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--dwt-sage);
  transform-origin: right center;
  transform: scaleX(1);
  transition: transform 1s cubic-bezier(0.77, 0, 0.18, 1) 0.15s;
  z-index: 2;
  pointer-events: none;
}
[data-aos="dwt-reveal"].aos-init.aos-animate::after { transform: scaleX(0); }
.dwt-media[data-aos="dwt-reveal"].aos-init::after { inset: 0 24px 24px 0; }
[data-aos="dwt-reveal"].aos-init img { transform: scale(1.12); transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s; }
[data-aos="dwt-reveal"].aos-init.aos-animate img { transform: scale(1); }

/* Soft pulse ring, the theme's one "pulse" accent */
@keyframes dwt-pulse {
  0% { box-shadow: 0 0 0 0 rgba(181, 212, 160, 0.9); }
  70% { box-shadow: 0 0 0 16px rgba(181, 212, 160, 0); }
  100% { box-shadow: 0 0 0 0 rgba(181, 212, 160, 0); }
}
.dwt-pulse { border-radius: 50%; animation: dwt-pulse 2.2s ease-out infinite; }

/* Photos in a parallax box are scaled a little so the drift never shows an edge */
[data-parallax] img { transform: scale(1.18); will-change: transform; }

/* Slider: a scrolling row with snap points; arrows and autoplay from motion.js */
.dwt-slider { position: relative; }
.dwt-slider__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 34px) / 2);
  column-gap: 34px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 6px;
}
.dwt-slider__track::-webkit-scrollbar { display: none; }
.dwt-slider__track > * { scroll-snap-align: start; }
.dwt-slider__nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 26px; }
.dwt-slider__nav button {
  width: 52px;
  height: 52px;
  border: 2px solid var(--dwt-deep);
  background: transparent;
  color: var(--dwt-deep);
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.dwt-slider__nav button:hover { background: var(--dwt-deep); color: var(--dwt-white); }
.dwt-slider__nav button:disabled { opacity: 0.35; cursor: default; background: transparent; color: var(--dwt-deep); }
@media (max-width: 767.98px) {
  .dwt-slider__track { grid-auto-columns: 86%; column-gap: 16px; }
}

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  [data-aos="dwt-reveal"].aos-init::after { display: none; }
  [data-aos="dwt-reveal"] img, [data-parallax] img { transform: none !important; }
}