/**
 * Lets the DOAC widgets sit edge to edge inside Elementor's containers.
 *
 * Every widget renders its own .container / .row, exactly as the original
 * design does, so the wrapper Elementor puts around it must not add a second
 * layer of max-width or gutters.
 */

.elementor-widget[class*="elementor-widget-doac-"] {
  width: 100%;
}

.elementor-widget[class*="elementor-widget-doac-"] > .elementor-widget-container {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
}

/* Flex/grid containers (Elementor 3.6+) and the legacy section/column pair. */
.e-con-inner:has(> .elementor-widget[class*="elementor-widget-doac-"]),
.e-con:has(> .e-con-inner > .elementor-widget[class*="elementor-widget-doac-"]) {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.elementor-column:has(.elementor-widget[class*="elementor-widget-doac-"]) > .elementor-widget-wrap {
  padding: 0;
}

/* The hero measures itself against the viewport, not its container. */
.elementor-widget-doac-hero .doac-banner {
  position: relative;
  width: 100%;
}

/**
 * Episodes: the thumbnail opens the video in a pop-up.
 *
 * The design already draws a play badge over .episode-img via ::before, so a
 * playable card only needs to say so with the cursor.
 */
.episode .episode-img.is-playable {
  cursor: pointer;
}

/**
 * Hero background video.
 *
 * The banner's darkening layer is a ::before at z-index 1, so the video has to
 * sit at 0 to stay behind it, and the copy has to be lifted to 2 to stay in
 * front of both. object-fit: cover reproduces what background-size: cover was
 * doing for the still image, and the still image stays on the element as the
 * poster so there is never a bare black frame while the file loads.
 */
.doac-banner__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: 0;
  pointer-events: none;
}

.doac-banner--video > .container {
  position: relative;
  z-index: 2;
}

/**
 * Phones fall back to the poster image unless the editor opts in, so a hero
 * video never costs a mobile visitor the download. display:none stops the
 * fetch outright; visibility/opacity would not.
 */
@media (max-width: 767.98px) {
  .doac-banner--video:not(.doac-banner--video-mobile) .doac-banner__video {
    display: none;
  }
}

/* Motion-sensitive visitors keep the still image. */
@media (prefers-reduced-motion: reduce) {
  .doac-banner__video {
    display: none;
  }
}

/* ============================================================
   Services — spreads
   ============================================================ */

/**
 * Section head.
 *
 * Left-aligned and asymmetric: the display line runs wide, the standfirst is
 * held to a narrow measure beneath it. Centring both is what makes a section
 * read as a template rather than a page someone set.
 */
.sv-services-head {
  max-width: 900px;
  margin: 0 0 clamp(40px, 6vw, 76px);
}

.sv-services-head h2 {
  color: var(--sv-light, #F6F2E9);
  font-family: zuume, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(38px, 6.4vw, 74px);
  line-height: 0.96;
  letter-spacing: -0.005em;
  margin: 0 0 20px;
}

.sv-services-head h2 em {
  font-style: normal;
  color: var(--sv-accent, #D9A441);
}

.sv-services-lede {
  color: var(--sv-light-2, #C9C2B4);
  font-size: 17px;
  line-height: 1.72;
  max-width: 56ch;
  margin: 0;
}

/**
 * Vertical rhythm around the two arrangements.
 *
 * The page-intro widget only carries top padding, so without this the first
 * spread's rule sits directly under the standfirst, and the process eyebrow
 * lands on the last spread's bottom edge.
 */
.sv-services-wrap.is-spreads {
  padding-top: clamp(44px, 6vw, 92px);
}

.sv-services-wrap.is-steps {
  padding-top: clamp(58px, 8vw, 124px);
  padding-bottom: clamp(24px, 4vw, 56px);
}

/**
 * One spread per service.
 *
 * The panel spans the full viewport rather than sitting inside .container, so
 * the photograph can run off the edge. The text half carries a fluid gutter of
 * its own, which is why this block is rendered outside the container entirely.
 */
.sv-spread {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  border-top: 1px solid var(--sv-line, #3A3327);
}

.sv-spread:last-child {
  border-bottom: 1px solid var(--sv-line, #3A3327);
}

@media (min-width: 900px) {
  .sv-spread {
    grid-template-columns: 1.02fr 1fr;
  }

  /* Alternate which edge the photograph runs off. */
  .sv-spread:nth-child(even) .sv-spread-media {
    order: 2;
  }
}

.sv-spread-media {
  position: relative;
  overflow: hidden;
  background: var(--sv-muted, #2A251B);
  min-height: clamp(260px, 52vw, 620px);
}

.sv-spread-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.1s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.sv-spread:hover .sv-spread-media img {
  transform: scale(1.045);
}

.sv-spread-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(38px, 5.2vw, 92px) clamp(24px, 5vw, 88px) clamp(48px, 5.6vw, 96px);
}

/**
 * The running number is drawn as an outline and the title rides up into it, so
 * the two read as one typographic object instead of a label above a heading.
 */
.sv-spread-num {
  display: block;
  font-family: zuume, sans-serif;
  font-weight: 700;
  font-size: clamp(92px, 12vw, 188px);
  line-height: 0.74;
  color: transparent;
  -webkit-text-stroke: 1px rgba(217, 164, 65, 0.38);
  margin: 0 0 -0.3em -0.03em;
  pointer-events: none;
  user-select: none;
}

.sv-spread-title {
  position: relative;
  color: var(--sv-light, #F6F2E9);
  font-family: zuume, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(32px, 4.3vw, 62px);
  line-height: 0.98;
  letter-spacing: -0.005em;
  margin: 0 0 22px;
}

.sv-spread-desc {
  color: var(--sv-light-2, #C9C2B4);
  font-size: 16px;
  line-height: 1.72;
  max-width: 46ch;
  margin: 0 0 30px;
}

/**
 * Deliverables as an index, not as tag pills.
 *
 * Pills are interface furniture — they suggest something filterable. A ruled,
 * numbered index reads as a contents page, which is what this actually is.
 */
.sv-spread-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--sv-line, #3A3327);
}

.sv-spread-list li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 4px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--sv-line, #3A3327);
}

.sv-spread-idx {
  font-family: zuume, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--sv-accent, #D9A441);
}

.sv-spread-item {
  color: var(--sv-light-2, #C9C2B4);
  font-size: 15px;
  line-height: 1.5;
}

/* Without a photograph the text should not sit in a half-width column. */
.sv-spread.has-no-media {
  grid-template-columns: 1fr;
}

.sv-spread.has-no-media .sv-spread-text {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

/* ============================================================
   Services — steps
   ============================================================ */

/**
 * A process is a different kind of content from a service, so it gets a
 * different shape: three across rather than one down, tight rather than airy.
 */
.sv-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 clamp(24px, 3vw, 46px);
}

@media (min-width: 700px) {
  .sv-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .sv-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.sv-step {
  position: relative;
  padding: 26px 0 34px;
  border-top: 1px solid var(--sv-line, #3A3327);
}

.sv-step-num {
  display: block;
  font-family: zuume, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--sv-accent, #D9A441);
  margin-bottom: 14px;
}

.sv-step-title {
  color: var(--sv-light, #F6F2E9);
  font-family: zuume, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(19px, 1.5vw, 24px);
  line-height: 1.12;
  margin: 0 0 10px;
}

.sv-step-desc {
  color: var(--sv-light-2, #C9C2B4);
  font-size: 15px;
  line-height: 1.68;
  margin: 0;
  max-width: 38ch;
}

.sv-step-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.sv-step-list li {
  color: var(--sv-light-2, #C9C2B4);
  font-size: 14px;
  line-height: 1.6;
  padding-left: 16px;
  position: relative;
}

.sv-step-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 1px;
  background: var(--sv-accent, #D9A441);
}

/* ============================================================
   Services — list (original single-column rows)
   ============================================================ */

.sv-service {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 34px;
  padding: 34px 0;
  border-top: 1px solid var(--sv-line, #3A3327);
  align-items: start;
}

@media (min-width: 768px) {
  .sv-service {
    grid-template-columns: 88px minmax(0, 1fr);
    padding: 46px 0;
  }

  /* The widget stamps this class rather than relying on :has(), so the layout
     does not depend on selector support. */
  .sv-service.is-with-media {
    grid-template-columns: 88px minmax(0, 1fr) 280px;
  }
}

.sv-service-number {
  font-family: zuume, sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--sv-accent, #D9A441);
  line-height: 1.4;
}

.sv-service-title {
  color: var(--sv-light, #F6F2E9);
  font-family: zuume, sans-serif;
  font-weight: 700;
  font-size: 27px;
  line-height: 1.15;
  margin: 0 0 12px;
}

@media (min-width: 992px) {
  .sv-service-title {
    font-size: 34px;
  }
}

.sv-service-desc {
  color: var(--sv-light-2, #C9C2B4);
  font-size: 16px;
  line-height: 1.72;
  opacity: 0.82;
  margin: 0 0 16px;
  max-width: 62ch;
}

.sv-service-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sv-service-list li {
  color: var(--sv-light-2, #C9C2B4);
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 6px 13px;
  border: 1px solid var(--sv-line, #3A3327);
  border-radius: 999px;
  opacity: 0.9;
}

/* A fixed ratio keeps a row of services level whatever proportions the chosen
   photographs happen to have. */
.sv-service-media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

/* Stacked on phones the photograph closes the entry, after the deliverables —
   reordering it above the number would separate the two. */
@media (max-width: 767.98px) {
  .sv-service.is-with-media .sv-service-media {
    margin-top: 20px;
  }
}

/* ============================================================
   Contact
   ============================================================ */

.sv-contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

@media (min-width: 992px) {
  .sv-contact {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }
}

.sv-contact-intro h2 {
  color: var(--sv-light, #F6F2E9);
  font-family: zuume, sans-serif;
  font-weight: 700;
  font-size: 38px;
  line-height: 1.08;
  margin: 0 0 16px;
}

@media (min-width: 768px) {
  .sv-contact-intro h2 {
    font-size: 54px;
  }
}

.sv-contact-intro h2 em {
  font-style: normal;
  color: var(--sv-accent, #D9A441);
}

.sv-contact-lede {
  color: var(--sv-light-2, #C9C2B4);
  font-size: 17px;
  line-height: 1.7;
  opacity: 0.8;
  margin: 0 0 34px;
}

.sv-contact-detail {
  padding: 16px 0;
  border-top: 1px solid var(--sv-line, #3A3327);
}

.sv-contact-label {
  display: block;
  font-family: zuume, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 12px;
  color: var(--sv-accent, #D9A441);
  margin-bottom: 5px;
}

/* display:block so a block holding two addresses stacks them rather than
   running them together on one line. */
.sv-contact-detail p,
.sv-contact-detail a {
  display: block;
  color: var(--sv-light, #F6F2E9);
  margin: 0;
  /* An anchor picks up the display face from the global link styles, which set
     an email address in condensed caps while the postal address beside it stays
     in the body face. State it so the block reads as one list. */
  font-family: paralucent, sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  text-decoration: none;
}

.sv-contact-detail p + p,
.sv-contact-detail a + a,
.sv-contact-detail p + a,
.sv-contact-detail a + p {
  margin-top: 4px;
}

.sv-contact-detail a:hover {
  color: var(--sv-accent, #D9A441);
}

/* ---------- Form ---------- */

.sv-field {
  margin: 0 0 20px;
}

.sv-field label {
  color: var(--sv-light-2, #C9C2B4);
  display: block;
  font-size: 14px;
  letter-spacing: 0.02em;
  margin-bottom: 7px;
  opacity: 0.85;
}

.sv-field input,
.sv-field textarea {
  color: var(--sv-light, #F6F2E9);
  width: 100%;
  padding: 13px 15px;
  font: inherit;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--sv-line, #3A3327);
  border-radius: 10px;
  transition: border-color 0.2s ease;
}

.sv-field textarea {
  resize: vertical;
  min-height: 140px;
}

.sv-field input:focus,
.sv-field textarea:focus {
  outline: none;
  border-color: var(--sv-accent, #D9A441);
}

.sv-field button {
  width: auto;
  cursor: pointer;
}

/**
 * The honeypot must be reachable by a scripted form filler and invisible to
 * everyone else, so it is moved off-canvas rather than display:none — some bots
 * skip fields that are explicitly hidden.
 */
.sv-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sv-contact-notice {
  color: var(--sv-light, #F6F2E9);
  padding: 14px 18px;
  border-radius: 10px;
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.55;
  border: 1px solid var(--sv-line, #3A3327);
}

.sv-contact-notice.is-ok {
  border-color: var(--sv-accent, #D9A441);
  background: rgba(217, 164, 65, 0.12);
}

.sv-contact-notice.is-error {
  border-color: #C4553D;
  background: rgba(196, 85, 61, 0.12);
}

/**
 * Light bands.
 *
 * Nothing in this design inherits a text colour — body sits on --sv-ink, so
 * every element states its own and each one needs a light-ground counterpart.
 * .sv-section.is-light is what the page-intro widget sets; .sv-band.is-light is
 * the equivalent on theme-rendered pages.
 */
.sv-section.is-light .sv-services-head h2,
.sv-band.is-light .sv-services-head h2,
.sv-section.is-light .sv-service-title,
.sv-band.is-light .sv-service-title,
.sv-section.is-light .sv-spread-title,
.sv-band.is-light .sv-spread-title,
.sv-section.is-light .sv-step-title,
.sv-band.is-light .sv-step-title,
.sv-section.is-light .sv-contact-intro h2,
.sv-band.is-light .sv-contact-intro h2,
.sv-section.is-light .sv-contact-detail p,
.sv-section.is-light .sv-contact-detail a,
.sv-band.is-light .sv-contact-detail p,
.sv-band.is-light .sv-contact-detail a,
.sv-section.is-light .sv-contact-notice,
.sv-band.is-light .sv-contact-notice {
  color: var(--sv-ink, #0E0D0B);
}

.sv-section.is-light .sv-services-lede,
.sv-band.is-light .sv-services-lede,
.sv-section.is-light .sv-service-desc,
.sv-band.is-light .sv-service-desc,
.sv-section.is-light .sv-spread-desc,
.sv-band.is-light .sv-spread-desc,
.sv-section.is-light .sv-spread-item,
.sv-band.is-light .sv-spread-item,
.sv-section.is-light .sv-step-desc,
.sv-band.is-light .sv-step-desc,
.sv-section.is-light .sv-step-list li,
.sv-band.is-light .sv-step-list li,
.sv-section.is-light .sv-service-list li,
.sv-band.is-light .sv-service-list li,
.sv-section.is-light .sv-contact-lede,
.sv-band.is-light .sv-contact-lede,
.sv-section.is-light .sv-field label,
.sv-band.is-light .sv-field label {
  color: var(--sv-brand, #493A17);
}

.sv-section.is-light .sv-field input,
.sv-section.is-light .sv-field textarea,
.sv-band.is-light .sv-field input,
.sv-band.is-light .sv-field textarea {
  color: var(--sv-ink, #0E0D0B);
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(73, 58, 23, 0.28);
}

.sv-section.is-light .sv-service,
.sv-band.is-light .sv-service,
.sv-section.is-light .sv-contact-detail,
.sv-band.is-light .sv-contact-detail {
  border-top-color: rgba(73, 58, 23, 0.22);
}

.sv-section.is-light .sv-service-list li,
.sv-band.is-light .sv-service-list li {
  border-color: rgba(73, 58, 23, 0.28);
}

/**
 * .sv-btn was written for anchors. A <button> brings its own user-agent border,
 * background and font, none of which are inherited, so the submit control needs
 * them cleared explicitly or it renders as a grey system button.
 */
button.sv-btn {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  font-family: zuume, sans-serif;
}

/* The outline numeral and the hairlines are tuned for a dark ground; on a light
   band they need the deeper accent and a darker rule to stay visible. */
.sv-section.is-light .sv-spread-num,
.sv-band.is-light .sv-spread-num {
  -webkit-text-stroke-color: rgba(138, 107, 36, 0.45);
}

.sv-section.is-light .sv-spread,
.sv-band.is-light .sv-spread,
.sv-section.is-light .sv-spread-list,
.sv-band.is-light .sv-spread-list,
.sv-section.is-light .sv-spread-list li,
.sv-band.is-light .sv-spread-list li,
.sv-section.is-light .sv-step,
.sv-band.is-light .sv-step {
  border-color: rgba(73, 58, 23, 0.22);
}

.sv-section.is-light .sv-spread-idx,
.sv-band.is-light .sv-spread-idx,
.sv-section.is-light .sv-step-num,
.sv-band.is-light .sv-step-num {
  color: var(--sv-accent-deep, #8A6B24);
}

/* ============================================================
   News carousel — dynamic slides
   ============================================================ */

/**
 * An article with no featured image still needs the card's shape, or the
 * headline jumps up and the row of slides stops lining up. The carousel sits on
 * a light ground, so the fill is the light tint rather than the dark surface.
 */
.news-block .news-thumb.is-empty {
  background-color: var(--sv-light-3, #EFEAE0);
}

/* The optional closing slide reads as an invitation rather than an article. */
.news-block.is-more .news-thumb.is-empty {
  background-color: var(--sv-accent, #D9A441);
}

.news-block.is-more h3 {
  color: var(--sv-accent-deep, #8A6B24);
}