/* Shared page basics. Each page's layout lives inline, as drawn on the design canvas. */
html { scroll-behavior: smooth; }
body { margin: 0; background: #FBFAF7; color: #1F1D1A; font-family: 'Heebo', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #C2541F; }
a:hover { color: #8F3A12; }
a:focus-visible, button:focus-visible { outline: 3px solid #C2541F; outline-offset: 3px; }

/* artboards were drawn at fixed widths: let drawings and photos shrink with the window */
svg[viewBox] { max-width: 100%; height: auto; }
img { max-width: 100%; }

/* desktop bands run edge to edge; their content stays in the 1200px column the artboards were drawn at
   (80px side padding inside it) */
.v-desk > div > * {
  padding-left: max(80px, calc((100% - 1040px) / 2)) !important;
  padding-right: max(80px, calc((100% - 1040px) / 2)) !important;
}
@media (max-width: 1000px) {
  .v-desk > div > * { padding-left: 48px !important; padding-right: 48px !important; }
}

/* case cards */
a[href^="/cases/"] h3 { transition: color 0.15s; }
a[href^="/cases/"]:hover h3 { color: #8F3A12; }

/* the "read the full story" toggle */
button[data-full] svg { transition: transform 0.2s; }
button[data-full][aria-expanded="true"] svg { transform: rotate(180deg); }
[hidden] { display: none !important; }

/* one artboard per screen size */
.v-mob { display: none; }
@media (max-width: 759px) {
  .v-desk { display: none; }
  .v-mob { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}