/**
 * 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;
}

.sv-contact-detail p,
.sv-contact-detail a {
  color: var(--sv-light, #F6F2E9);
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  text-decoration: none;
}

.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);
}