/* ======================================================================
   Designed with PulseWave page (pages/designed-with-pulsewave.html). Loaded after style.css and only on this page.
   Layout, fonts, sizes, spacing and hovers measured from the Designed with Cadence page on cadence.com at 1920px.
   Colours follow the PulseWave theme.
   ====================================================================== */
[data-page="designed"] { --font-head: var(--font-nav); --font-body: var(--font-nav); --dw-col: min(1290px, calc(100% - 2 * var(--gutter))); }
[data-page="designed"] main { font-family: var(--font-nav); color: var(--nav-ink); background: #fff; }

/* ---------- intro: centred 850px column, 43.2px Light title ---------- */
.dw-intro { width: min(850px, calc(100% - 2 * var(--gutter))); margin: 0 auto; padding: 80px 0 16px; text-align: center; }
.dw-intro__title { margin: 0 0 24px; font: 300 43.2px/51.84px var(--font-nav); letter-spacing: -0.864px; color: var(--nav-ink); }
.dw-intro p { margin: 0; font: 300 18px/28.8px var(--font-nav); letter-spacing: 0.72px; color: var(--nav-ink); }

/* ---------- featured: 850px tile + two 410px tiles, on a white-to-grey band ---------- */
.dw-featured { padding: 27px 0 72px; background: linear-gradient(#fff 0%, #f5f7f8 100%); }
.dw-featured__grid { display: grid; grid-template-columns: minmax(0, 850px) minmax(0, 410px); grid-template-rows: repeat(2, 311px); gap: 26px 30px;
  justify-content: center; width: var(--dw-col); margin: 0 auto; }
.dw-tile { position: relative; display: block; overflow: hidden; color: #fff; }
.dw-tile--large { grid-row: span 2; }
.dw-tile__img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .6s var(--ease); }
.dw-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 17, 29, 0) 40%, rgba(12, 17, 29, .78) 100%); transition: background .3s; }
.dw-tile__tag { position: absolute; z-index: 2; top: 17px; left: 36px; padding: 0 8px; background: #fff; font: 400 11px/18px var(--font-nav); letter-spacing: 2.64px;
  text-transform: uppercase; color: var(--nav-ink); }
.dw-tile__text { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 21px; }
.dw-tile h3 { margin: 0; font: 400 28.8px/40.32px var(--font-nav); letter-spacing: -0.576px; color: #fff; }
.dw-tile__sub { display: block; font: 300 16.2px/25.92px var(--font-nav); letter-spacing: 0.648px; color: #fff; }
.dw-tile:hover .dw-tile__img { transform: scale(1.04); }
.dw-tile:hover::after { background: linear-gradient(180deg, rgba(12, 17, 29, .15) 20%, rgba(12, 17, 29, .85) 100%); }

/* ---------- filters + story grid ---------- */
.dw-stories { width: var(--dw-col); margin: 0 auto; padding: 72px 0 72px; }
.dw-filter-label { margin: 0 0 16px; font: 400 14.4px/18px var(--font-nav); letter-spacing: 3.456px; text-transform: uppercase; color: var(--nav-ink); }
.dw-filters { display: flex; flex-wrap: wrap; gap: 16px 36px; margin-bottom: 36px; }
.dw-select select { width: 220px; height: 48px; padding: 0 44px 0 18px; border: 0.8px solid #d7dde0; border-radius: 0; appearance: none; -webkit-appearance: none; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333393d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 16px center/18px no-repeat;
  font: 400 14px/18px var(--font-nav); color: var(--nav-ink); transition: border-color .2s; }
.dw-select select:hover { border-color: var(--nav-ink); }
.dw-select select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.dw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 408px)); gap: 34px 32px; justify-content: space-between; }
.dw-grid--more { margin-top: 34px; }
.dw-card { position: relative; display: flex; flex-direction: column; min-height: 564px; border: 0.8px solid #d7dde0; background: #fff; }
.dw-card[hidden], .dw-grid[hidden] { display: none !important; }
.dw-card::before { content: ""; position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 8px; background: var(--grad);
  transform: scaleY(0); transform-origin: 100% 0; transition: transform .3s cubic-bezier(.19, 1, .22, 1); }
.dw-card__img { position: relative; display: block; height: 240px; background-size: cover; background-position: center; }
.dw-card__img::before { content: ""; position: absolute; inset: 0; background: transparent; transition: background .25s; }
.dw-card__body { display: flex; flex: 1; flex-direction: column; padding: 32px 32px 45px; }
.dw-label { display: block; font: 400 12px/24px var(--font-nav); letter-spacing: 2.88px; text-transform: uppercase; color: #707070; }
.dw-card h5 { margin: 32px 0 16px; font: 500 18px/25.2px var(--font-nav); color: var(--nav-ink); transition: color .25s; }
.dw-card__text { display: block; margin-bottom: 24px; font: 300 16.2px/25.92px var(--font-nav); letter-spacing: 0.648px; color: var(--nav-ink); }
.dw-card__cta { display: inline-flex; align-items: center; margin-top: auto; font: 500 14.4px/23.04px var(--font-nav); letter-spacing: 1.728px; text-transform: uppercase;
  color: var(--nav-ink); transition: color .25s; }
.dw-card__cta::after { content: ""; width: 16px; height: 16px; margin-left: 8px; background: currentColor; transition: transform .25s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; }
/* hover, as on cadence.com: 8px bar drops in, image darkens, title and link turn blue, arrow moves */
.dw-card:hover::before, .dw-card:focus-visible::before { transform: scaleY(1); }
.dw-card:hover .dw-card__img::before { background: rgba(0, 0, 0, .15); }
.dw-card:hover h5, .dw-card:hover .dw-card__cta { color: var(--accent); }
.dw-card:hover .dw-card__cta::after { transform: translateX(8px); }
.dw-empty { margin: 24px 0 0; font: 300 18px/28.8px var(--font-nav); color: #707070; }

/* Show more: 220px outline button that fills dark on hover */
.dw-more-row { display: flex; justify-content: center; margin-top: 47px; }
.dw-more-row[hidden] { display: none; }
.dw-more { min-width: 220px; height: 48px; padding: 12px 30px 10px; border: 1.6px solid var(--nav-ink); background: #fff;
  font: 500 14.4px/23.04px var(--font-nav); letter-spacing: 1.728px; text-transform: uppercase; color: var(--nav-ink); transition: background-color .3s, color .3s; }
.dw-more:hover { background: var(--nav-ink); color: #fff; }

/* ---------- share your story: light tint, 410px logo + 410px text ---------- */
.dw-share { background: color-mix(in srgb, var(--accent) 12%, #fff); }
.dw-share__inner { display: grid; grid-template-columns: 410px 410px; gap: 140px; width: min(1070px, calc(100% - 2 * var(--gutter))); margin: 0 auto; padding: 96px 0; align-items: start; }
.dw-share__logo { width: 410px; max-width: 100%; height: auto; }
.dw-share p { margin: 0 0 30px; font: 300 20.25px/32.4px var(--font-nav); letter-spacing: 0.81px; color: var(--nav-ink); }
.dw-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 220px; height: 47px; padding: 12px 30px 10px; background: var(--grad);
  font: 500 14.4px/23.04px var(--font-nav); letter-spacing: 1.728px; text-transform: uppercase; color: #fff; transition: background .25s, box-shadow .25s; }
.dw-btn:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 72%, #0c111d), color-mix(in srgb, var(--accent-2) 72%, #0c111d)); box-shadow: 0 6px 16px rgba(49, 135, 241, .3); }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .dw-featured__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: 420px repeat(2, 280px); }
  .dw-tile--large { grid-row: auto; }
  .dw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dw-share__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 760px) {
  .dw-intro { padding-top: 48px; }
  .dw-intro__title { font-size: 34px; line-height: 42px; }
  .dw-featured__grid { grid-template-rows: 300px repeat(2, 240px); }
  .dw-tile h3 { font-size: 22px; line-height: 30px; }
  .dw-select, .dw-select select { width: 100%; }
  .dw-grid { grid-template-columns: minmax(0, 1fr); }
  .dw-card { min-height: 0; }
  .dw-share__inner { padding: 56px 0; }
}

/* Contact Us: the PulseWave theme hover — the blue-to-purple gradient slides towards purple */
.dw-btn { background: var(--grad); background-size: 140% 100%; background-position: 0 0; transition: background-position .4s var(--ease); }
.dw-btn:hover, .dw-btn:focus-visible { background: var(--grad); background-size: 140% 100%; background-position: 100% 0; box-shadow: none; }

/* featured tiles hover, as on cadence.com: only the title shows at rest; on hover the text block slides up (0.3s)
   to reveal the description and a white "Watch Now" link with an arrow */
.dw-tile__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s; }
.dw-tile__more > span { overflow: hidden; min-height: 0; }
.dw-tile:hover .dw-tile__more, .dw-tile:focus-visible .dw-tile__more { grid-template-rows: 1fr; }
.dw-tile__sub { padding-top: 0; }
.dw-tile__link { display: inline-flex; align-items: center; gap: 6px; padding: 12px 0 2px; font: 400 18px/27px var(--font-nav); color: #fff; }
.dw-tile__link::after { content: ""; width: 22px; height: 22px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat; }
/* Cadence's tiles keep the photo still and deepen the shade under the text instead of zooming */
.dw-tile:hover .dw-tile__img { transform: none; }
.dw-tile::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .8) 100%); }
.dw-tile:hover::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .9) 100%); }
@media (hover: none) { .dw-tile__more { grid-template-rows: 1fr; } }