/* OpenDoors (opendoorsri.org)
   Colours, type sizes and the 24-column page grid are carried over from the
   old Squarespace theme. Each content block sets its own grid position inline:
   --m is the phone position and --d the desktop one, both as
   row-start / column-start / row-end / column-end. */

/* Open-licence stand-ins for the Squarespace-only fonts
   (Granville becomes Ysabeau Office, Brandon Grotesque becomes Jost). The
   size-adjust values match each one's text width to the font it replaces. */
@font-face { font-family: "Ysabeau Office"; src: url(../fonts/ysabeau-office-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; size-adjust: 111%; }
@font-face { font-family: "Ysabeau Office"; src: url(../fonts/ysabeau-office-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; size-adjust: 111%; }
@font-face { font-family: "Ysabeau Office"; src: url(../fonts/ysabeau-office-700-normal.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; size-adjust: 111%; }
@font-face { font-family: "Ysabeau Office"; src: url(../fonts/ysabeau-office-700-italic.woff2) format("woff2"); font-weight: 700; font-style: italic; font-display: swap; size-adjust: 111%; }
@font-face { font-family: "Jost"; src: url(../fonts/jost-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; size-adjust: 92%; }
@font-face { font-family: "Jost"; src: url(../fonts/jost-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; size-adjust: 92%; }
@font-face { font-family: "Jost"; src: url(../fonts/jost-600-normal.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; size-adjust: 88%; }
@font-face { font-family: "Jost"; src: url(../fonts/jost-600-italic.woff2) format("woff2"); font-weight: 700; font-style: italic; font-display: swap; size-adjust: 88%; }

:root {
  /* Squarespace palette names (note "white" is the dark green and "black" the beige) */
  --white: #0a3318;
  --black: #dddcc7;
  --accent: #333435;
  --lightAccent: #4b6062;
  --darkAccent: #f9fdef;
  --safeLight: #fff;
  --safeDark: #333435;

  --heading-font: "Ysabeau Office", Optima, Candara, sans-serif;
  --body-font: "Jost", "Helvetica Neue", Arial, sans-serif;
  --max: 2074px;
  --header-h: 138px;
}

/* Responsive type: --s is the size in rem at the reference width,
   using the same formula as the Squarespace theme */
.fs, h1, h2, h3, h4, p, .large, .small, .btn, .site-nav, .item-title, .item-body, .list-title, summary {
  font-size: min(calc((var(--s) - 1) * 1.2vw + 1rem), max(calc((var(--s) - 1) * 24.888px + 1rem), calc(var(--s) * 1rem)));
}
@media (max-width: 767px) and (orientation: portrait) {
  .fs, h1, h2, h3, h4, p, .large, .small, .btn, .site-nav, .item-title, .item-body, .list-title, summary {
    font-size: calc((var(--s) - 1) * 0.012 * min(100vh, 900px) + 1rem);
  }
}
h1 { --s: 4; }
h2 { --s: 2.8; }
h3 { --s: 2.2; }
h4 { --s: 1.5; }
p, li { --s: 1.2; }
.large { --s: 1.6; }
.small { --s: 1; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--body-font);
  line-height: 1.2;
  color: var(--white);
  background: var(--darkAccent);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  overflow-wrap: break-word;
}
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3, h4 {
  font-family: var(--heading-font);
  font-weight: 700;
  line-height: 1.3;
  margin: 2rem 0;
  color: var(--heading);
}
h1 { line-height: calc(1.3em * (1 - 3 / 25)); }
h2 { line-height: calc(1.3em * (1 - 1.8 / 25)); }
h3 { line-height: calc(1.3em * (1 - 1.2 / 25)); }
h4 { line-height: calc(1.3em * (1 - .5 / 25)); }
/* A page's main heading (h1) that keeps the look of a smaller level */
h1.as-h2 { --s: 2.8; line-height: calc(1.3em * (1 - 1.8 / 25)); }
h1.as-h3 { --s: 2.2; line-height: calc(1.3em * (1 - 1.2 / 25)); }
h2.as-h1 { --s: 4; line-height: calc(1.3em * (1 - 3 / 25)); }
p { margin: 1rem 0; line-height: 1.2; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; z-index: 100; background: #fff; color: #000; padding: 10px 16px; }
.skip:focus { left: 10px; top: 10px; }

/* ---- Section colour themes (from the Squarespace theme) ---- */
[data-theme] { background: var(--bg); color: var(--text); }
[data-theme="white"] { --bg: var(--white); --text: var(--black); --heading: var(--black); --link: var(--darkAccent);
  --btn1-bg: var(--safeDark); --btn1-fg: #fff; --btn2-bg: var(--safeDark); --btn2-fg: #fff; --btn3-bg: var(--black); --btn3-fg: var(--accent);
  --line: var(--black); --box: rgba(75, 96, 98, .56); --card: var(--lightAccent); --card-text: var(--black); }
[data-theme="light"] { --bg: var(--lightAccent); --text: var(--black); --heading: var(--black); --link: #cfe1cf;
  --btn1-bg: var(--white); --btn1-fg: #fff; --btn2-bg: var(--white); --btn2-fg: #fff; --btn3-bg: var(--safeDark); --btn3-fg: #fff;
  --line: var(--black); --box: var(--white); --card: var(--white); --card-text: var(--black); }
[data-theme="dark"] { --arrow-bg: #fff; --arrow-fg: var(--white); --bg: var(--darkAccent); --text: var(--white); --heading: var(--white); --link: var(--white);
  --btn1-bg: var(--lightAccent); --btn1-fg: var(--darkAccent); --btn2-bg: #fff; --btn2-fg: #000; --btn3-bg: var(--white); --btn3-fg: var(--darkAccent);
  --line: var(--white); --box: var(--white); --card: #fff; --card-text: var(--black); }
[data-theme="black"], [data-theme="black-bold"] { --arrow-bg: #fff; --arrow-fg: #000; --bg: var(--black); --text: var(--white); --heading: var(--white); --link: var(--white);
  --btn1-bg: #fff; --btn1-fg: #000; --btn2-bg: #fff; --btn2-fg: #000; --btn3-bg: #fff; --btn3-fg: #000;
  --line: var(--white); --box: var(--white); --card: #fff; --card-text: var(--black); }
[data-theme="black-bold"] { --heading: #fff; }
[data-theme="bright"] { --arrow-bg: #fff; --arrow-fg: var(--accent); --bg: var(--accent); --text: #fff; --heading: #fff; --link: #fff;
  --btn1-bg: #fff; --btn1-fg: var(--accent); --btn2-bg: #fff; --btn2-fg: var(--accent); --btn3-bg: #fff; --btn3-fg: var(--accent);
  --line: #fff; --box: #fff; --card: #fff; --card-text: var(--accent); }
[data-theme="bright-inverse"] { --arrow-bg: var(--accent); --bg: var(--darkAccent); --text: var(--accent); --heading: var(--accent); --link: var(--accent);
  --btn1-bg: var(--accent); --btn1-fg: #fff; --btn2-bg: var(--accent); --btn2-fg: #fff; --btn3-bg: var(--accent); --btn3-fg: #fff;
  --line: var(--accent); --box: var(--accent); --card: var(--lightAccent); --card-text: #fff; }

/* Text colours picked in the Squarespace editor */
.tc-white { color: var(--white); }
.tc-black { color: var(--black); }
.tc-accent { color: var(--accent); }
.tc-lightAccent { color: var(--lightAccent); }
.tc-darkAccent { color: var(--darkAccent); }

/* ---- Header ---- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vw;
  padding: 3vw 4vw;
  color: var(--darkAccent);
  background: linear-gradient(rgba(10, 51, 24, .89), rgba(10, 51, 24, 0));
  transition: transform .3s ease, padding .3s ease;
}
.site-header.hide { transform: translateY(-100%); }
.site-header.scrolled { padding-top: 1.8vw; padding-bottom: 1.8vw; }
.logo img { max-height: 52px; width: auto; }
.site-nav { --s: 1.2; }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav > ul { display: flex; flex-wrap: wrap; justify-content: flex-end; column-gap: 1.1em; row-gap: .2em; }
.site-nav li { position: relative; --s: 1.2; }
.site-nav a, .site-nav button {
  display: block;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: .1em 0;
  cursor: pointer;
  line-height: 1.2;
}
.site-nav > ul > li.active > a, .site-nav > ul > li.active > button { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.site-nav .folder ul {
  display: none;
  position: absolute;
  top: 100%;
  left: -1em;
  min-width: 100%;
  padding: .5em 1em;
  background: var(--white);
  white-space: nowrap;
}
.site-nav .folder:hover ul, .site-nav .folder:focus-within ul, .site-nav .folder.open ul { display: block; }
/* The last menu (Get Involved) opens leftward so it stays on screen */
@media (min-width: 768px) { .site-nav > ul > .folder:last-child ul { left: auto; right: -1em; text-align: right; } }
.site-nav .folder ul a { padding: .25em 0; }
.site-nav .folder ul a:hover, .site-nav .folder ul a[aria-current] { text-decoration: underline; text-underline-offset: .2em; }
.menu-toggle { display: none; }

@media (max-width: 767px) {
  :root { --header-h: 69px; }
  .site-header, .site-header.scrolled { padding: 6vw; }
  .logo img { max-height: 30px; }
  .menu-toggle {
    display: block;
    position: relative;
    z-index: 2;
    width: 44px; height: 24px;
    margin-right: -8px;
    background: none; border: 0; color: inherit; cursor: pointer;
  }
  .menu-toggle .bars::before, .menu-toggle .bars::after {
    content: ""; position: absolute; left: 8px; right: 8px; height: 1px; background: currentColor;
    transition: transform .2s ease, top .2s ease;
  }
  .menu-toggle .bars::before { top: 7px; }
  .menu-toggle .bars::after { top: 16px; }
  .menu-toggle[aria-expanded="true"] .bars::before { top: 11.5px; transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .bars::after { top: 11.5px; transform: rotate(-45deg); }
  .logo { position: relative; z-index: 2; }
  .site-header.menu-open { color: var(--white); background: none; }
  .site-nav {
    --s: 1.8;
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1;
    padding: 90px 6vw 6vw;
    background: var(--darkAccent);
    color: var(--white);
    overflow-y: auto;
  }
  .site-nav.open { display: flex; align-items: center; justify-content: center; }
  .site-nav > ul { display: block; text-align: center; }
  .site-nav > ul > li > a, .site-nav > ul > li > button { font-size: 8.5vmin; }
  .site-nav > ul > li > a, .site-nav > ul > li > button { padding: .25em 0; margin: 0 auto; }
  .site-nav > ul > li.active > a { text-decoration: none; }
  .site-nav .folder > button::after { content: ""; display: inline-block; width: .4em; height: .4em; margin-left: .5em; border: solid currentColor; border-width: 1px 1px 0 0; transform: rotate(45deg); vertical-align: .12em; transition: transform .2s; }
  .site-nav .folder.open > button::after { transform: rotate(135deg); }
  .site-nav .folder:hover ul, .site-nav .folder:focus-within ul { display: none; }
  .site-nav .folder.open ul { display: block; position: static; background: none; padding: 0 0 .4em; white-space: normal; }
  .site-nav .folder ul a { font-size: 6vmin; }
}

/* ---- Sections and the page grid ---- */
.sec {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--minh, 0);
  padding: var(--pt, 0px) 0 var(--pb, 0px);
}
.sec[data-valign="top"] { justify-content: flex-start; }
.sec[data-valign="bottom"] { justify-content: flex-end; }
main > .sec:first-child { padding-top: calc(var(--pt, 0px) + var(--header-h)); }
.sec-bg { position: absolute; inset: 0; overflow: hidden; }
.sec-bg video, .sec-bg img { width: 100%; height: 100%; object-fit: cover; }
.sec-bg .overlay { position: absolute; inset: 0; background: #000; }

.grid {
  --cg: var(--cgap, 11px);
  --gut: calc(6vw - var(--cg));
  --cell: calc((var(--max) - var(--cg) * 7) / 8);
  position: relative;
  display: grid;
  grid-template-columns: minmax(var(--gut), 1fr) repeat(8, minmax(0, var(--cell))) minmax(var(--gut), 1fr);
  grid-template-rows: repeat(var(--mrows), minmax(24px, auto));
  row-gap: var(--rgap, 11px);
  column-gap: var(--cg);
}
@media (min-width: 768px) {
  .grid {
    --gut: calc(4vw - var(--cg));
    --cell: calc((var(--max) - var(--cg) * 23) / 24);
    --cw: min(var(--max), calc(100vw - 8vw));
    grid-template-columns: minmax(var(--gut), 1fr) repeat(24, minmax(0, var(--cell))) minmax(var(--gut), 1fr);
    grid-template-rows: repeat(var(--rows), minmax(calc(var(--cw) * .0215), auto));
  }
}
.b {
  grid-area: var(--m);
  z-index: var(--z, 1);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.v-mid { justify-content: center; }
.v-bot { justify-content: flex-end; }
@media (max-width: 767px) {
  .vm-mid { justify-content: center; }
  .vm-bot { justify-content: flex-end; }
}
@media (min-width: 768px) {
  .b { grid-area: var(--d); }
  .vd-top { justify-content: flex-start; }
  .vd-mid { justify-content: center; }
  .vd-bot { justify-content: flex-end; }
}

/* ---- Text blocks ---- */
.text > :first-child, .acc-body > :first-child, .item-body > :first-child { margin-top: 0; }
.text > :last-child, .acc-body > :last-child, .item-body > :last-child { margin-bottom: 0; }
.text p, .text h1, .text h2, .text h3, .text h4, .text li { white-space: pre-wrap; }
/* Text blocks are flex columns, where margins do not collapse, so space
   paragraphs and headings with bottom margins only, as collapsing would */
.text > * { margin-top: 0; margin-bottom: 1rem; }
.text > :is(h1, h2, h3, h4) { margin-bottom: 2rem; }
.text > :not(h1, h2, h3, h4) + :is(h1, h2, h3, h4) { margin-top: 1rem; }
.text a, .acc-body a, .item-body a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.text p a, .acc-body a { color: var(--link); }
.text ul, .text ol, .acc-body ul, .acc-body ol { margin: 1rem 0; padding-left: 40px; }
.text li > *, .acc-body li > *, .item-body li > * { margin: .5em 0; }
.text blockquote { margin: 1rem 0; padding-left: 1em; border-left: 2px solid currentColor; }
.boxed { background: var(--box); }
.text { padding: var(--tp, 0); }
/* Headings that grow to fill their box, like Squarespace's scaled text */
.fit { height: 100%; display: flex; flex-direction: column; justify-content: inherit; }
.fit > * { margin: 0; line-height: 1; white-space: nowrap !important; font-size: inherit; }

/* ---- Images ---- */
.image { overflow: hidden; }
.image img, .image a { width: 100%; height: 100%; }
.image a { display: block; }
.image.cover img { object-fit: cover; }
.image.contain img { object-fit: contain; }
.image img, .image a { position: absolute; inset: 0; }

/* ---- Buttons ---- */
.button { display: flex; }
.button.align-center { align-items: center; }
.button.align-left { align-items: flex-start; }
.button.align-right { align-items: flex-end; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--heading-font);
  font-weight: 700;
  line-height: 1.2;
  border-radius: 300px;
  border: 0;
  cursor: pointer;
  transition: opacity .1s linear;
}
.btn:hover { opacity: .8; }
.btn.primary { --s: 1.1; letter-spacing: .02em; padding: 1rem 1.3rem; background: var(--btn1-bg); color: var(--btn1-fg); }
.btn.secondary { --s: 1.1; padding: 2.3rem 6.3rem; background: var(--btn2-bg); color: var(--btn2-fg); }
.btn.tertiary { --s: 1; letter-spacing: .02em; padding: 1rem 1.3rem; background: var(--btn3-bg); color: var(--btn3-fg); }
.btn.wide { width: 100%; height: 100%; padding-top: 0; padding-bottom: 0; }
.button .btn.wide { flex: 1; }

/* ---- Lines, social icons, accordions ---- */
.line { justify-content: center; }
.line hr { width: 100%; height: 1px; margin: 0; border: 0; background: var(--line); }
.social .icons { display: flex; flex-wrap: wrap; gap: 10px; }
.social.align-center .icons { justify-content: center; }
.social.align-right .icons { justify-content: flex-end; }
.social .icons a { display: block; width: 36px; height: 36px; border-radius: 15%; background: var(--black); color: var(--white); transition: opacity .17s; }
.social .icons a:hover { opacity: .8; }
.social svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.accordion details { --dc: color-mix(in srgb, currentColor calc(var(--do, 1) * 100%), transparent); border-top: 1px solid var(--dc); }
.accordion details:last-child { border-bottom: 1px solid var(--dc); }
.accordion summary {
  --s: 1.2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  padding: var(--ip, 30px 0);
  cursor: pointer;
  list-style: none;
  line-height: 1.2;
}
.accordion summary.large { --s: 1.6; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: ""; flex: none; width: .55em; height: .55em; margin-right: .2em; border: solid currentColor; border-width: 0 1px 1px 0; transform: rotate(45deg) translate(-25%, -25%); transition: transform .2s; }
.accordion details[open] summary::after { transform: rotate(225deg); }
.acc-body { width: var(--dw, 100%); margin: 0 var(--dm, 0); padding: var(--dp, 0 0 30px); }
.accordion.plus summary::after { width: 14px; height: 14px; border: 0; transform: none; background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat, linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat; }
.accordion.plus details[open] summary::after { transform: none; background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat; }

/* ---- Embeds and video ---- */
.ratio { position: relative; aspect-ratio: 16 / 9; width: 100%; }
.ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed iframe.pdf { width: 100%; aspect-ratio: 100 / 130; border: 0; background: #fff; }
.embed .pdf-link { --s: 1; margin: .5rem 0 0; }
.embed .pdf-link a { text-decoration: underline; text-underline-offset: .2em; }
.video video { width: 100%; aspect-ratio: 16 / 9; background: #000; }
.embed.code input[type="submit"] { font: 700 1rem var(--heading-font); padding: .9rem 1.3rem; border: 0; border-radius: 300px; background: var(--btn1-bg); color: var(--btn1-fg); cursor: pointer; }

/* ---- Forms ---- */
.site-form { display: flex; flex-direction: column; gap: 1.2rem; font-size: 1rem; }
.site-form fieldset { border: 0; margin: 0; padding: 0; }
.site-form legend { padding: 0; margin-bottom: .4rem; }
.site-form label { display: flex; flex-direction: column; gap: .4rem; }
.site-form .row { display: flex; gap: 1rem; }
.site-form .row label { flex: 1; font-size: .85rem; }
.site-form .req { opacity: .7; font-size: .85em; }
.site-form input:not([type="checkbox"]), .site-form textarea {
  width: 100%;
  padding: 12px;
  font: inherit;
  color: #000;
  background: #fafafa;
  border: 1px solid #ccc;
  border-radius: 0;
}
.site-form textarea { min-height: 100px; resize: vertical; }
.site-form .check { flex-direction: row; align-items: flex-start; gap: .6rem; margin: .4rem 0; }
.site-form .check input { margin-top: .2em; flex: none; }
.site-form button { align-self: flex-start; }
.site-form .thanks { padding: 1rem; border: 1px solid currentColor; }

/* ---- List sections (carousels, card grids, banner) ---- */
.list { padding: var(--pt, 3.3vmax) 0 var(--pb, 3.3vmax); }
.list-title { --s: 2.8; padding: 0 4vw; }
.list-title p { --s: 2.8; margin: 0; font-family: var(--heading-font); font-weight: 700; line-height: 1.2; color: var(--heading); }
.list ul { list-style: none; margin: 0; padding: 0; }
.item { display: flex; flex-direction: column; }
.item .media { width: var(--media-w, 100%); margin: 0 auto; aspect-ratio: var(--ratio, 3 / 2); overflow: hidden; }
.item .media img { width: 100%; height: 100%; object-fit: cover; }
.item-content { display: flex; flex-direction: column; align-items: center; text-align: center; width: var(--content-w, 100%); margin: 0 auto; padding-top: 4%; flex: 1; }
[data-text="left"] .item-content { align-items: flex-start; text-align: left; }
.item-title { --s: var(--ts, 1.2); font-family: var(--heading-font); font-weight: 700; line-height: 1.2; margin: 0 0 .45em; color: var(--heading); }
.item-body { --s: var(--bs, 1.2); margin-bottom: 4%; }
.item-body p, .item-body li { --s: var(--bs, 1.2); }
.item .btn { --s: var(--btns, 1); margin-top: auto; background: var(--safeDark); color: #fff; }
[data-cards] .item { background: var(--card); color: var(--card-text); padding: var(--cpad, 20px); }
[data-cards] .item-title { color: var(--card-text); }

.carousel { --side: 8vw; position: relative; padding: 0 var(--side); }
[data-width="full"] .carousel, [data-width="full-bleed"] .carousel { --side: 4vw; }
/* "Adjacent slides": the neighbouring slides peek in at the edges */
[data-adjacent] .carousel { padding: 0; }
[data-adjacent] .carousel .track { padding: 0 var(--side); scroll-padding: 0 var(--side); }
.carousel .track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--gap, 0px) * (var(--cols) - 1)) / var(--cols));
  gap: var(--gap, 0px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.carousel .track::-webkit-scrollbar { display: none; }
.carousel .item { scroll-snap-align: start; }
.carousel .prev, .carousel .next {
  position: absolute;
  top: calc(50% - 22px);
  z-index: 2;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: var(--arrow-bg, var(--safeDark)); color: var(--arrow-fg, #fff);
  font-size: 20px; cursor: pointer;
}
.carousel .prev { left: 1vw; }
.carousel .next { right: 1vw; }
@media (max-width: 767px) {
  .carousel { --side: 4vw; }
  .carousel .track { grid-auto-columns: 100%; }
  [data-adjacent] .carousel .track { grid-auto-columns: 85%; }
  .carousel .prev, .carousel .next { top: auto; bottom: -56px; }
  .carousel { margin-bottom: 56px; }
  .carousel .prev { left: calc(50% - 52px); }
  .carousel .next { right: calc(50% - 52px); }
}

.list .cards { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: var(--gap, 20px); padding: 0 4vw; }
.list .cards .item-content { padding-top: 10%; }
@media (max-width: 767px) { .list .cards { grid-template-columns: 1fr; } }

.banner .item { position: relative; min-height: var(--minh, 50vh); justify-content: center; align-items: center; }
.banner .media { position: absolute; inset: 0; width: 100%; aspect-ratio: auto; }
.banner .media::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .3); }
.banner .item-content { position: relative; width: var(--content-w, 56%); flex: none; padding: 2%; background: var(--card); color: var(--card-text); }
.banner .item-title { color: var(--card-text); margin-bottom: .9em; }
@media (max-width: 767px) { .banner .item-content { width: 88%; } }


/* ---- Client stories page ---- */
.wrap { width: min(var(--max), 100% - 8vw); margin: 0 auto; }
.kicker { --s: 1; font-family: var(--body-font); text-transform: uppercase; letter-spacing: .12em; margin: 0 0 1rem; }
.stories-intro { --pt: 5vmax; --pb: 4vmax; text-align: center; }
.stories-intro h1 { margin: 0 0 1.5rem; }
.stories-intro .lead { --s: 1.5; max-width: 34em; margin: 0 auto 3rem; }
.keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 0; }
.keys img { width: 100%; aspect-ratio: 1; object-fit: cover; }
@media (max-width: 767px) {
  .keys { grid-template-columns: repeat(3, 1fr); }
  .keys img:nth-child(n+4) { display: none; }
}

.featured { --pt: 5vmax; --pb: 5vmax; }
.featured .wrap { display: grid; grid-template-columns: 5fr 6fr; gap: 5vw; align-items: center; }
.featured .photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.featured h2 { margin: 0 0 1.5rem; }
.featured blockquote { margin: 0 0 1.5rem; padding-left: 1em; border-left: 3px solid var(--line); }
.featured blockquote p { --s: 1.8; font-family: var(--heading-font); font-style: italic; margin: 0; }
.featured .actions .btn { text-decoration: none; }
.featured .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }
@media (max-width: 767px) {
  .featured .wrap { grid-template-columns: 1fr; gap: 2rem; }
}

.recent { --pt: 5vmax; --pb: 5vmax; }
.recent h2, .past h2 { margin: 0 0 2.5rem; text-align: center; }
.story-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.story-card { flex: 0 1 calc((100% - 72px) / 4); display: flex; flex-direction: column; background: var(--card); color: var(--card-text); }
.story-card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.story-card .body { display: flex; flex-direction: column; flex: 1; padding: 1.4rem 1.4rem 1.6rem; }
.story-card .tag { --s: 1; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 .8rem; opacity: .8; }
.story-card blockquote { margin: 0 0 1rem; }
.story-card blockquote p { --s: 1.2; margin: 0; }
.story-card .name { --s: 1.4; font-family: var(--heading-font); font-weight: 700; margin: 0 0 1.2rem; }
.story-card .btn { --s: 1; margin-top: auto; align-self: flex-start; }
@media (max-width: 1100px) { .story-card { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 767px) { .story-card { flex-basis: 100%; } }

.past { --pt: 5vmax; --pb: 5vmax; }
.past .note { text-align: center; max-width: 34em; margin: -1.5rem auto 2.5rem; }
.past-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 3vw; }
.past-list a { display: grid; grid-template-columns: 90px 1fr; gap: 1rem; align-items: start; }
.past-list img { width: 90px; aspect-ratio: 264 / 300; object-fit: cover; }
.past-list p { --s: 1; margin: 0 0 .4rem; }
.past-list .name { font-family: var(--heading-font); font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 1100px) { .past-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .past-list { grid-template-columns: 1fr; } }

.stories-cta { --pt: 4vmax; --pb: 4vmax; text-align: center; }
.stories-cta h2 { margin: 0 0 1rem; }
.stories-cta p { max-width: 30em; margin: 0 auto 2rem; }