/* Diving Services UK — Elementor supplemental styles
   Handles what Elementor Free can't do per-element: glassmorphism (backdrop-filter),
   hero text-shadows + centring, header nav pill, service-card captions, CTA gradient,
   partners strip and footer layout. Design is desktop-first (Figma is 1920 only). */

/* ===== Fonts (Poppins is loaded by Elementor's Google Fonts) ===== */

/* ===== Active-theme neutralizers =====
   The active "dsuk-elementor" theme ships a hand-coded design system whose
   global stylesheet loads AFTER this file, so its rules override ours unless we
   use !important. It collides on two fronts:
   (a) `p { color:#7b9bb8 }` mutes every paragraph — make Elementor text widgets'
       paragraphs inherit the per-widget colour set in page-data instead.
   (b) `.dsuk-intro { max-width:600px }` collides with our intro class name and
       pins the copy narrow — release the width cap (measure is set on the inner
       container). If the site is ever moved to a neutral theme (Hello Elementor),
       this block becomes a harmless no-op. */
.elementor-widget-text-editor p,
.elementor-widget-text-editor .elementor-widget-container p { color: inherit !important; }
/* Constrain the intro to the showreel video's width (1099px) and centre it. Cap
   the WIDGET element itself (the container-level max-width didn't hold on this
   Elementor build) — this also overrides the theme's .dsuk-intro{max-width:600px}. */
.dsuk-intro { max-width: 1080px !important; margin-left: auto !important; margin-right: auto !important; }
/* (c) The theme's `.dsuk-hero { display:flex; flex-direction:column;
   justify-content:flex-end; min-height:100vh }` collides with our hero section
   class and pins all hero content (header, H1, buttons) to the bottom. Undo the
   flex so Elementor's own layout/height/padding drive the hero. */
.dsuk-hero { display: block !important; min-height: 0 !important; }

/* ===== Glass recipe + variants ===== */
.dsuk-glass > .elementor-container,
.dsuk-glass > .elementor-widget-wrap,
.dsuk-nav,
.dsuk-glass .elementor-button,
.elementor-element.dsuk-glass:not(.dsuk-glass--btn):not(.dsuk-glass--card) {
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.28);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}
/* Button widgets: glass belongs on the pill only, never the full-width wrapper */
.dsuk-glass--btn { background: transparent !important; border: 0 !important; }
.dsuk-glass--nav  { border-radius: 5px; }
.dsuk-glass--btn .elementor-button { border-radius: 100px !important; }
.dsuk-glass--card > .elementor-container,
.elementor-element.dsuk-glass--card { border-radius: 30px !important; }
.dsuk-glass--imdb .elementor-button {
  border-radius: 43px !important;
  -webkit-backdrop-filter: blur(6.5px);
  backdrop-filter: blur(6.5px);
}

/* ===== HERO ===== */
/* Flat overlay (rgba 6,6,6,0.35 from page-data) darkens for contrast; the
   layered gradient fades the image into the page blue (#08163B) at the bottom. */
.dsuk-hero > .elementor-background-overlay {
  z-index: 0;
  background-image: linear-gradient(180deg,
    rgba(8,22,59,0) 28%,
    rgba(8,22,59,0.45) 55%,
    rgba(8,22,59,0.8) 78%,
    rgba(8,22,59,0.97) 92%,
    #08163B 100%) !important;
}
.dsuk-hero > .elementor-container { position: relative; z-index: 1; }
.dsuk-hero-h1 .elementor-heading-title {
  text-shadow: 0 4px 15px rgba(0,0,0,0.85);
}
.dsuk-hero-lead {
  text-shadow: 0 4px 10px rgba(0,0,0,0.25);
  max-width: 1076px; margin-left: auto; margin-right: auto;
}
.dsuk-hero-lead .elementor-widget-container { text-align: center; }
/* space multi-paragraph hero leads (e.g. Underwater Stage) */
.dsuk-hero-lead p { margin: 0 0 14px; }
.dsuk-hero-lead p:last-child { margin-bottom: 0; }
/* per-page lead size (About = 20, Consultancy = 28) — the class carries the size
   so a single global rule no longer pins every hero lead to 20px */
.dsuk-hero-lead--20 .elementor-widget-container, .dsuk-hero-lead--20 p {
  font-size: 20px !important; line-height: 30px !important;
}
.dsuk-hero-lead--28 .elementor-widget-container, .dsuk-hero-lead--28 p {
  font-size: 28px !important; line-height: 39px !important;
}
/* SERVICE / DETAIL PAGE HERO — full-height image, title LEFT-aligned and
   bottom-weighted (Figma puts the service H1 at ~68% down, against the content
   margin). Scoped to --page so the homepage hero is untouched.
   - min-height re-instated (the neutralizer above zeroes it).
   - the fork defaults sections to items-middle, so bottom-align the column's
     widgets via align-content:flex-end at the widget-wrap level (!important beats
     Elementor's items-middle rule).
   - left-align the copy and kill the centred max-width/margins.
   - the fade is a guaranteed ::after gradient (Elementor's overlay div wasn't
     producing a visible fade on this build). */
.dsuk-hero.dsuk-hero--page { min-height: 720px !important; }
/* bottom-weight: give the container the full hero height and bottom-align the
   column (deterministic — the fork's default items-middle only touches the
   widget-wrap's align-content, so overriding the container's align-items wins). */
.dsuk-hero--page > .elementor-container {
  min-height: 720px !important; align-items: flex-end !important;
}
.dsuk-hero--page > .elementor-container > .elementor-column > .elementor-widget-wrap {
  align-content: flex-end !important;
}
/* The homepage hero (.dsuk-hero, no --page) relies on Elementor's background-overlay
   for its fade, which doesn't render reliably on this build — so it too gets the
   guaranteed ::after gradient, matching equipment-hire and the other service pages. */
.dsuk-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
  background: linear-gradient(180deg, rgba(8,22,59,0) 0%, rgba(8,22,59,0.55) 55%, #08163B 100%);
  z-index: 0; pointer-events: none;
}
.dsuk-hero.dsuk-hero--page > .elementor-container { position: relative; z-index: 1; width: 100%; }

/* ===== SITE HEADER =====
   Rendered site-wide by the plugin (wp_body_open, NOT Elementor); the nav is a
   real WordPress menu (Appearance → Menus). Overlaid on the hero at the page top.
   pointer-events lets clicks pass through the empty area to the hero below. */
.dsuk-site-header {
  position: fixed; top: 40px; left: 0; right: 0; z-index: 100;
  pointer-events: none;
}
/* When logged in, the 32px WP admin bar shifts the page but not this fixed
   header — offset it so the gap stays 40px from the top for admins too. */
body.admin-bar .dsuk-site-header { top: 72px; }
/* On scroll the fixed nav overlaps page content and gets hard to read. Fade in a
   full-width navy band behind it: 70% opacity from the top of the browser, holding
   solid across the logo/menu bar, then fading out ~75px below the bar. A fixed
   pseudo-element measures from the viewport top so it is unaffected by the header's
   top offset (and the admin bar). Toggled by the .dsuk-scrolled class from JS. */
.dsuk-site-header::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 171px;
  background: linear-gradient(180deg,
    rgba(8,22,59,0.70) 0%,
    rgba(8,22,59,0.70) 56%,
    rgba(8,22,59,0) 100%);
  opacity: 0; transition: opacity .28s ease; pointer-events: none; z-index: -1;
}
.dsuk-site-header.dsuk-scrolled::before { opacity: 1; }
body.admin-bar .dsuk-site-header::before { top: 32px; height: 203px; }
.dsuk-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; max-width: 1565px; margin: 0 auto;
  /* 20px gutters keep the logo and burger off the viewport edge between 1025px
     and 1565px, where the max-width alone leaves none; the inner content box is
     still 1525px on large screens. */
  padding: 0 20px; box-sizing: border-box;
  pointer-events: auto; position: relative; z-index: 1;
}
.dsuk-header .dsuk-logo { display: inline-flex; align-items: center; }
.dsuk-header .dsuk-logo img { height: 56px; width: auto; display: block; }
.dsuk-nav {
  padding: 10px 20px; border-radius: 5px;
  display: inline-flex; align-items: center;
}
/* wp_nav_menu wraps items in <ul class="dsuk-nav-menu"><li><a> */
.dsuk-nav .dsuk-nav-menu {
  list-style: none; margin: 0; padding: 0;
  display: inline-flex; align-items: center; gap: 40px;
}
.dsuk-nav .dsuk-nav-menu > li { margin: 0; padding: 0; position: relative; }
.dsuk-nav a {
  color: #fff; text-decoration: none;
  font-family: "Poppins", sans-serif; font-weight: 400; font-size: 16px;
  line-height: 24px; display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.dsuk-nav a:hover { opacity: .8; }
/* caret on items with a dropdown (WP adds .menu-item-has-children) or flagged
   .dsuk-has-caret in the menu builder */
.dsuk-nav .dsuk-has-caret > a::after,
.dsuk-nav .menu-item-has-children > a::after {
  content: "\25BE"; font-size: 12px; line-height: 1; opacity: .9;
}
/* Dropdown panels — glass, revealed on hover/focus of the parent item. */
.dsuk-nav .sub-menu {
  position: absolute; top: 100%; left: 0; min-width: 210px; margin: 0; padding: 8px;
  list-style: none; display: flex; flex-direction: column; gap: 2px; z-index: 200;
  background: rgba(8,22,59,0.94); border: 1px solid rgba(255,255,255,0.18); border-radius: 10px;
  -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.dsuk-nav .dsuk-nav-menu > li:hover > .sub-menu,
.dsuk-nav .dsuk-nav-menu > li:focus-within > .sub-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* keep hover alive across the small gap between the item and its panel */
.dsuk-nav .dsuk-nav-menu > li.menu-item-has-children::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 16px;
}
.dsuk-nav .sub-menu li { margin: 0; padding: 0; }
.dsuk-nav .sub-menu a {
  display: block; padding: 9px 14px; border-radius: 6px; font-size: 15px; white-space: nowrap;
}
.dsuk-nav .sub-menu a:hover { background: rgba(255,255,255,0.10); opacity: 1; }
/* The nav is a burger panel at EVERY screen size (client request), so sub-items
   always render inline rather than as an absolute hover dropdown. */
.dsuk-nav .sub-menu {
  position: static; opacity: 1; visibility: visible; transform: none; background: transparent;
  border: 0; padding: 4px 0 0 14px; -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* button rows render buttons side by side, centred.
   Elementor core forces `.elementor-widget-wrap > .elementor-element { width:100% }`
   (same specificity as ours but loads later) which makes each button full-width and
   wrap onto its own line — override with !important so they sit inline. */
.dsuk-btn-row .elementor-widget-wrap {
  display: flex !important; flex-direction: row !important; flex-wrap: wrap;
  gap: 24px 39px; align-items: center; justify-content: center !important;
}
.dsuk-btn-row .elementor-widget-wrap > .elementor-element,
.dsuk-btn-row .elementor-widget-button {
  width: auto !important; max-width: none !important; flex: 0 0 auto !important;
  /* kill Elementor's inter-widget margin (margin-block-end on :not(:last-child))
     which otherwise offsets the first button downward in the flex row */
  margin: 0 !important;
}
.dsuk-btn-row .elementor-widget-button .elementor-widget-container { display: inline-flex; }
.dsuk-glass--btn .elementor-button {
  background: rgba(255,255,255,0.10);
  -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px);
}

/* ===== ABOUT INTRO ===== */
/* Full-width widget; measure + block-centring done here so the copy sits centred
   (Elementor's custom-widget-width pins the block left). Force white over theme. */
.dsuk-intro .elementor-widget-container {
  max-width: 1080px !important; margin-left: auto; margin-right: auto;
  text-align: center;
}
.dsuk-intro .elementor-widget-container,
.dsuk-intro p { color: #fff !important; }
.dsuk-intro p { margin: 0 0 24px; }
.dsuk-intro p:last-child { margin-bottom: 0; }

/* ===== SHOWREEL (self-hosted HTML5 video; preload=none so it loads only on play) ===== */
.dsuk-showreel-wrap .elementor-widget-container { text-align: center; }
.dsuk-showreel {
  max-width: 1099px; margin: 0 auto;
  border-radius: 16px; overflow: hidden; background: #000;
}
/* Service pages run the clip full content width to match the card grid below.
   Every wide showreel is the same width (1525); the height follows each clip's
   own aspect ratio (ratios left untouched). */
.dsuk-showreel--wide { max-width: 1525px; }
.dsuk-showreel-video { width: 100%; height: auto; display: block; }

/* ===== SECTION TITLES (Our services / Credits) ===== */
.dsuk-section-title .elementor-heading-title { color: #fff; }

/* ===== CONTENT BLOCKS (service / detail pages) ===== */
/* Cap the WIDGET element itself, not just its container — on this fork the
   container max-width doesn't hold, so the copy would otherwise fill the full
   1525 content width. Intro copy = 1196px; section sub-copy (--narrow) = 860px
   (both from Figma). */
.dsuk-copyblock { max-width: 1196px !important; margin-left: auto !important; margin-right: auto !important; }
.dsuk-copyblock--narrow { max-width: 860px !important; }
.dsuk-copyblock .elementor-widget-container { max-width: 1196px; margin: 0 auto; }
.dsuk-copyblock--narrow .elementor-widget-container { max-width: 860px; }
.dsuk-copyblock p { margin: 0 0 18px; }
.dsuk-copyblock p:last-child { margin-bottom: 0; }
.dsuk-block { max-width: 1196px; margin: 0 auto; }
.dsuk-block-title .elementor-heading-title { color: #fff; }
/* GLOBAL body copy = 20px / 30 (Figma). This Elementor fork ignores the
   text-editor widget's own typography, so the size is forced here. Covers intro
   copy, section sub-copy, spec/coord/content block bodies, feature splits and
   the Dave Shaw bio paragraphs. (Checklists and cards carry their own sizes.) */
.dsuk-copyblock .elementor-widget-container, .dsuk-copyblock p,
.dsuk-block-body .elementor-widget-container, .dsuk-block-body p,
.dsuk-split-body .elementor-widget-container, .dsuk-split-body p,
.dsuk-bio-para .elementor-widget-container, .dsuk-bio-para p,
.dsuk-intro .elementor-widget-container, .dsuk-intro p {
  font-size: 20px !important; line-height: 30px !important;
}
.dsuk-block-body .elementor-widget-container { color: rgba(255,255,255,0.85); }
.dsuk-block-body p { margin: 0 0 14px; }
.dsuk-block--left { text-align: left; }
.dsuk-block--left .dsuk-block-title .elementor-heading-title,
.dsuk-block--left .dsuk-block-body .elementor-widget-container { text-align: left; }
/* checklist (Marine Coordinator etc.) — a checkbox bullet per item */
.dsuk-checklist-wrap .elementor-widget-container { display: flex; justify-content: flex-start; }
.dsuk-checklist { list-style: none; margin: 20px 0 0; padding: 0; max-width: 660px; }
.dsuk-checklist li {
  position: relative; padding-left: 34px; margin: 0 0 14px;
  color: rgba(255,255,255,0.85); font-family: "Poppins", sans-serif; font-weight: 400;
  font-size: 18px; line-height: 27px;
}
.dsuk-checklist li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 21px; height: 21px;
  border-radius: 50%; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.45);
}
.dsuk-checklist li::after {
  content: ""; position: absolute; left: 8px; top: 9px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* ===== SERVICE CARD GRID (CSS-driven so widths are exact cross-version) ===== */
.dsuk-card-row > .elementor-container {
  display: flex; flex-wrap: wrap; gap: 32px;
  justify-content: center; align-items: stretch;
}
.dsuk-card-row > .elementor-container > .elementor-column {
  width: 488px !important; max-width: calc((100% - 64px) / 3) !important;
  flex: 0 1 488px;
}

/* ===== SERVICE CARDS ===== */
/* Force the card height — this Elementor build ignores the column's page-data
   min_height, and with the caption absolutely positioned the card would otherwise
   collapse. 515px gives a near-square card so the bottom box leaves a large image
   margin above it. */
.dsuk-card { position: relative; overflow: hidden; min-height: 560px !important; }
.dsuk-card > .elementor-widget-wrap,
.dsuk-card > .elementor-column-wrap > .elementor-widget-wrap {
  justify-content: flex-end; align-content: flex-end; align-items: flex-end;
}
/* ONE frosted box, anchored to the BOTTOM of the card via absolute positioning so
   a large image margin shows above it (≈ the box's own height, per Figma). The
   section is transparent + zero-padding; the glass lives on its container only. */
.dsuk-card-caption {
  /* full width of the card; the glass box inside is centred with margin:auto so
     its side margins are always equal (relying on the section's own left/right
     didn't hold on this Elementor build). Fixed height => identical boxes. */
  position: absolute; left: 0; right: 0; bottom: 16px;
  /* min-height, NOT height: at the design width (488px cards) every caption fits
     inside 296px so the boxes stay identical, but as the card narrows — tablet
     landscape sits around 377px — the longer copy needs more room. A fixed height
     clipped it straight out of the glass panel; min-height lets that one box grow
     upward into the image margin instead. */
  min-height: 296px;
  width: auto !important; max-width: none !important; margin: 0 !important;
  background: transparent !important; border: 0 !important; padding: 0 !important;
}
/* Equipment page only: caption box hugs its content (revealing more image
   above), and an inline script (dsuk-script, see equipment.py) equalises the
   boxes within EACH ROW to the tallest — so heights match per row, not overall.
   Mobile falls back to auto height (media rule below), and the script skips it. */
.dsuk-card-caption--lower,
.dsuk-card-caption--lower > .elementor-container { min-height: 0 !important; }
/* Light frosted glass (per Figma) — a low-opacity white tint that the heavy
   backdrop-blur makes readable on both dark and bright cards; NOT a dark overlay. */
.dsuk-card-caption > .elementor-container {
  /* explicit width + auto side margins => the box is centred with equal 16px
     margins, regardless of how the section/container resolve their own width */
  width: calc(100% - 32px) !important; max-width: calc(100% - 32px) !important;
  /* 296px as an ABSOLUTE min-height, not 100% — a percentage resolves against the
     caption's height, which is now auto, so it would collapse to content size and
     the boxes would stop matching each other. */
  min-height: 296px !important; height: auto !important; margin: 0 auto !important;
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  border-radius: 22px !important;
  -webkit-backdrop-filter: blur(20px) saturate(115%); backdrop-filter: blur(20px) saturate(115%);
  /* align-items:center vertically centres the (content-height) column in the box */
  align-items: center !important; justify-content: center;
  padding: 18px 26px;
}
/* text-shadow keeps the white copy legible over the lighter, more transparent glass */
.dsuk-card-title .elementor-heading-title,
.dsuk-card-body .elementor-widget-container,
.dsuk-card-body p,
.dsuk-card-link a { color: #fff !important; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.dsuk-card-body p { margin: 10px 0 0; }
/* Force the intended body size/leading — the active theme's `p{font-size:1rem;
   line-height:1.75}` otherwise enlarges the copy and inflates the caption box. */
.dsuk-card-body .elementor-widget-container,
.dsuk-card-body p { font-size: 15px !important; line-height: 22px !important; }
.dsuk-card-link .elementor-widget-container { margin-top: 14px; }
.dsuk-card-link a { text-decoration: underline; }

/* Tablet landscape / small laptop (1025–1400px): cards are still three-across but
   far narrower than the 488px design, so the caption grows taller. Give the card
   extra height to keep a sensible image margin above the taller glass box —
   without it the box eats the picture and can clip against overflow:hidden. */
@media (min-width: 1025px) and (max-width: 1400px) {
  .dsuk-card { min-height: 640px !important; }
}

/* ===== CREDITS ===== */
.dsuk-credit-row > .elementor-container {
  display: flex !important; flex-wrap: wrap; gap: 29px;
  justify-content: center !important; align-items: stretch;
}
.dsuk-credit-row > .elementor-container > .elementor-column {
  width: 282px !important; max-width: calc((100% - 116px) / 5) !important;
  flex: 0 1 282px;
}
.dsuk-credit .elementor-image img {
  border-radius: 12px; width: 100%; height: auto; display: block;
}

/* ===== PARTNERS ===== */
.dsuk-partners-title .elementor-heading-title {
  color: #fff; letter-spacing: 2px; text-transform: uppercase;
}
/* Keep all 8 logos on ONE line: nowrap + minimal gap, and strip Elementor's
   per-column padding so the marks + spacing fit the row width. The container is
   otherwise capped at Elementor's boxed max-width:1140px (this build ignores the
   section's content_width:full), which grouped the logos narrower than the CTA
   box — override it so they span the full content width and align with the CTA. */
.dsuk-partner-strip > .elementor-container {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  flex-wrap: nowrap !important; gap: 16px;
  max-width: 1506px !important; width: 100% !important; margin: 0 auto !important;
}
.dsuk-partner-strip > .elementor-container > .elementor-column {
  width: auto !important; flex: 0 0 auto;
  display: flex; align-items: center;
}
.dsuk-partner-strip > .elementor-container > .elementor-column > .elementor-widget-wrap,
.dsuk-partner-col > .elementor-widget-wrap {
  justify-content: center; align-content: center; padding: 0 !important;
}
.dsuk-partner .elementor-image { text-align: center; line-height: 0; }
/* Per-logo display width is set in page-data; here we only guarantee vertical
   centring on the row (heights vary by design — wordmarks short, marks tall). */
.dsuk-partner .elementor-image img { display: inline-block; vertical-align: middle; }

/* ===== REGULATORY COMPLIANCE STRIP (accreditation logos on page blue) ===== */
.dsuk-reg-title .elementor-heading-title {
  color: #fff; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 40px;
}
/* Row spans the full content width (matching the sections below), logos evenly
   spread. Per-logo widths come from page-data (reliable on this fork); max-height
   is only a safety cap. */
.dsuk-reg-strip > .elementor-container {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  flex-wrap: nowrap !important; gap: 24px;
  max-width: 1525px !important; width: 100% !important; margin: 0 auto !important;
}
.dsuk-reg-strip > .elementor-container > .elementor-column {
  width: auto !important; flex: 0 0 auto; display: flex; align-items: center;
}
.dsuk-reg-col > .elementor-widget-wrap { padding: 0 !important; justify-content: center; }
.dsuk-reg-logo .elementor-image { line-height: 0; text-align: center; }
.dsuk-reg-logo .elementor-image img {
  max-height: 90px; max-width: 100%;
  display: inline-block; vertical-align: middle; object-fit: contain;
}

/* ===== TWO-COLUMN FEATURE BLOCK (Marine Coordinator: copy+checklist | photos) ===== */
.dsuk-coord > .elementor-container {
  display: flex !important; flex-wrap: wrap; gap: 48px; align-items: flex-start;
  max-width: 1525px; margin: 0 auto;
}
.dsuk-coord > .elementor-container > .elementor-column { width: auto !important; }
.dsuk-coord > .elementor-container > .elementor-column:first-child {
  flex: 1 1 780px; min-width: 320px;
}
.dsuk-coord > .elementor-container > .elementor-column:last-child {
  flex: 0 1 600px; min-width: 300px;
}
.dsuk-coord-copy .dsuk-checklist { max-width: none; }
/* Photo grid: two portrait shots up top, one wide shot spanning below. Each cell
   is a background-image div sized by a padding-ratio box (robust where <img> +
   aspect-ratio was overridden) so the wide shot crops SHORT with rounded corners. */
.dsuk-coord-media .elementor-widget-container { width: 100%; }
.dsuk-coord-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; }
.dsuk-coord-cell {
  position: relative; height: 0; padding-top: 111.6%;   /* 335/300 portrait */
  background-size: cover; background-position: center;
  border-radius: 14px; overflow: hidden;
}
.dsuk-coord-cell--wide { grid-column: 1 / -1; padding-top: 50%; }   /* 311/622 wide */

/* ===== HERO BADGE (e.g. HSE mark under the Diving hero copy) ===== */
.dsuk-hero-badge { margin-top: 22px; }
.dsuk-hero-badge .elementor-image { text-align: center; }
.dsuk-hero-badge img { width: 96px !important; height: auto; display: inline-block; }

/* ===== NUMBERED PROCESS STEPS ("How we operate") ===== */
.dsuk-steps-sec .dsuk-section-title .elementor-heading-title { color: #fff; }
.dsuk-steps-row > .elementor-container {
  display: flex !important; flex-wrap: wrap; gap: 56px; align-items: flex-start;
  max-width: 1525px; margin: 0 auto;
}
.dsuk-steps-row > .elementor-container > .elementor-column { width: auto !important; }
.dsuk-steps-row > .elementor-container > .elementor-column:first-child { flex: 0 1 470px; min-width: 300px; }
.dsuk-steps-row > .elementor-container > .elementor-column:last-child { flex: 1 1 640px; min-width: 320px; }
.dsuk-steps-media { width: 100%; height: 0; padding-top: 93%; background-size: cover; background-position: center; border-radius: 16px; }
.dsuk-steps { list-style: none; margin: 0; padding: 0; }
.dsuk-step { position: relative; display: flex; gap: 30px; padding-bottom: 34px; }
.dsuk-step:last-child { padding-bottom: 0; }
/* dashed connector between the circular numbers */
.dsuk-step:not(:last-child)::before {
  content: ""; position: absolute; left: 28px; top: 62px; bottom: 6px;
  border-left: 1px dashed rgba(255,255,255,0.35);
}
.dsuk-step-num {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: 26px; color: #fff;
  position: relative; z-index: 1;
}
.dsuk-step-copy h3 {
  margin: 6px 0 8px; color: #fff; font-family: "Poppins", sans-serif;
  font-weight: 600; font-size: 24px; line-height: 34px;
}
.dsuk-step-copy p { margin: 0; color: rgba(255,255,255,0.8); font-size: 16px; line-height: 26px; }

/* ===== MILESTONES TIMELINE (image left, arrow-scrolled list right) ===== */
.dsuk-tl2-wrap .elementor-widget-container { margin-top: 80px; }
.dsuk-tl2 { display: flex; gap: 56px; max-width: 1525px; margin: 0 auto; align-items: flex-start; }
.dsuk-tl2-media { flex: 0 0 40%; }
.dsuk-tl2-img { width: 100%; height: 540px; object-fit: cover; border-radius: 16px !important; overflow: hidden; display: block; transition: opacity .3s ease; }
.dsuk-tl2-right { flex: 1 1 auto; position: relative; }
.dsuk-tl2-scroll { height: 540px; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; padding-right: 64px; }
.dsuk-tl2-scroll::-webkit-scrollbar { display: none; }
/* extra scroll room below the last item so it can clear the 120px bottom fade
   (otherwise the final point — e.g. Diving "Strike and wrap" — sits under the
   blue-to-transparent gradient and reads faint) */
.dsuk-tl2-list { list-style: none; margin: 0; padding: 0 0 100px; }
.dsuk-tl2-item { display: flex; gap: 40px; padding-bottom: 40px; position: relative; opacity: .45; transition: opacity .3s ease; }
.dsuk-tl2-item.is-active { opacity: 1; }
.dsuk-tl2-item:not(:last-child)::before { content: ""; position: absolute; left: 48px; top: 64px; bottom: 16px; border-left: 1px dashed rgba(255,255,255,0.3); }
.dsuk-tl2-year { flex: 0 0 auto; min-width: 96px; align-self: flex-start; padding: 12px 8px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.12);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  text-align: center; font-family: "Poppins",sans-serif; font-weight: 600; font-size: 20px; line-height: 24px; color: #fff; position: relative; z-index: 1; }
/* numbered variant (Consultancy portfolio): circular step badge instead of the
   wide year pill; connector line re-centres under the smaller circle */
.dsuk-tl2--num .dsuk-tl2-year {
  min-width: 0; width: 56px; height: 56px; padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1;
}
.dsuk-tl2--num .dsuk-tl2-item:not(:last-child)::before { left: 28px; }
.dsuk-tl2-copy h3 { margin: 6px 0 8px; color: #fff; font-family: "Poppins",sans-serif; font-weight: 600; font-size: 24px; line-height: 32px; }
.dsuk-tl2-copy p { margin: 0; color: rgba(255,255,255,0.8); font-size: 16px; line-height: 26px; }
.dsuk-tl2-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(rgba(8,22,59,0), #08163B); pointer-events: none; }
.dsuk-tl2-arrows { position: absolute; right: 0; top: 24px; display: flex; flex-direction: column; gap: 12px; }
.dsuk-tl2-arrows button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.10); color: #fff; font-size: 13px; cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; transition: background .2s; }
.dsuk-tl2-arrows button:hover { background: rgba(255,255,255,0.18); }
@media (max-width: 1024px) {
  .dsuk-tl2 { flex-direction: column; }
  .dsuk-tl2-media { flex: none; width: 100%; }
  /* force a uniform height so every faded-in milestone image is identical
     (beats the theme's img { height:auto } which lets portrait shots grow tall) */
  .dsuk-tl2-img { height: 320px !important; object-fit: cover !important; }
  .dsuk-tl2-scroll { height: auto; overflow: visible; padding-right: 0; }
  .dsuk-tl2-item { opacity: 1; }
  .dsuk-tl2-fade, .dsuk-tl2-arrows { display: none; }
}

/* ===== TEAM CARDS (photo + frosted caption over the bottom) ===== */
.dsuk-team-wrap .elementor-widget-container { width: 100%; }
.dsuk-team-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.dsuk-team-card { position: relative; min-height: 620px; background-size: cover; background-position: center;
  border-radius: 16px; overflow: hidden; display: flex; align-items: flex-end; padding: 16px; }
.dsuk-team-cap { width: 100%; border-radius: 14px; padding: 22px 26px; text-align: center;
  background: rgba(0,0,0,0.30); border: 1px solid rgba(255,255,255,0.22);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.dsuk-team-cap h3 { margin: 0; color: #fff; font-family: "Poppins",sans-serif; font-weight: 600; font-size: 24px; line-height: 32px; }
.dsuk-team-role { margin: 2px 0 12px !important; color: #fff !important; font-size: 15px !important; }
.dsuk-team-cap p { margin: 0 0 10px; color: #fff !important; font-size: 15px; line-height: 22px; }
.dsuk-team-cap p:last-child { margin-bottom: 0; }
@media (max-width: 980px) { .dsuk-team-row { grid-template-columns: 1fr; } .dsuk-team-card { min-height: 520px; } }

/* ===== AWARDS (callouts frosted over the image) ===== */
.dsuk-awards .dsuk-section-title .elementor-heading-title { color: #fff; }
.dsuk-award-imgwrap .elementor-widget-container { margin-top: 80px; overflow: visible; }
.dsuk-awards, .dsuk-awards .elementor-column-wrap, .dsuk-awards .elementor-widget-wrap { overflow: visible; }
.dsuk-award-img { position: relative; height: 0; background-size: cover; background-position: center; border-radius: 16px; }
.dsuk-award-overlay { position: absolute; left: 40px; right: 40px; bottom: -52px; display: flex; gap: 48px; justify-content: center; align-items: stretch; }
.dsuk-award { flex: 0 1 560px; text-align: center; border-radius: 16px; padding: 30px 36px;
  display: flex; flex-direction: column; justify-content: center;
  background: rgba(0,0,0,0.30); border: 1px solid rgba(255,255,255,0.22);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.dsuk-award-yr { display: block; color: #fff; font-family: "Poppins",sans-serif; font-weight: 500; font-size: 32px; line-height: 40px; }
.dsuk-award h3 { margin: 4px 0 12px; color: #fff; font-family: "Poppins",sans-serif; font-weight: 600; font-size: 32px; line-height: 40px; }
.dsuk-award p { margin: 0; color: #fff; font-size: 20px; line-height: 30px; }
@media (max-width: 900px) {
  /* Let the element grow (height:auto) so the boxes flow in normal document flow
     below the image area instead of being pinned absolutely (which overflowed up
     over the title). padding-top keeps a scaling image area above the callouts;
     the background continues behind the frosted boxes. */
  .dsuk-award-img { height: auto; padding-top: 60%; }
  .dsuk-award-overlay {
    position: static; left: auto; right: auto; top: auto; bottom: auto; margin: 0;
    padding: 20px 16px 4px; flex-direction: column; flex-wrap: nowrap;
    align-items: stretch; justify-content: flex-start; gap: 14px;
  }
  .dsuk-award { flex: 0 0 auto; padding: 18px 20px; }
  .dsuk-award-yr { font-size: 20px; line-height: 26px; }
  .dsuk-award h3 { font-size: 22px; line-height: 28px; margin: 2px 0 8px; }
  .dsuk-award p { font-size: 15px; line-height: 22px; }
}

/* ===== BIO BLOCK (Dave Shaw) ===== */
.dsuk-bio-name .elementor-heading-title { color: #fff; font-size: 64px !important; line-height: 74px !important; }
.dsuk-bio-role .elementor-widget-container { color: rgba(255,255,255,0.6); margin-top: -4px; margin-bottom: 8px; }
.dsuk-bio-role .elementor-widget-container, .dsuk-bio-role p { font-size: 36px !important; line-height: 46px !important; font-weight: 600 !important; }
.dsuk-bio-para .elementor-widget-container { color: rgba(255,255,255,0.85); }
.dsuk-bio-para p { margin: 0 0 14px; }
.dsuk-checks2--bold .dsuk-checklist li { font-weight: 600; color: #fff; }
.dsuk-check-note { display: block; font-weight: 400; font-size: 14px; color: rgba(255,255,255,0.55); margin-top: 2px; }

/* ===== TEXT + IMAGE SPLIT (e.g. Artiste safety) ===== */
.dsuk-split > .elementor-container {
  display: flex !important; flex-wrap: wrap; gap: 56px; align-items: center;
  max-width: 1525px; margin: 0 auto;
}
.dsuk-split > .elementor-container > .elementor-column { width: auto !important; flex: 1 1 420px; min-width: 300px; }
.dsuk-split-title .elementor-heading-title { color: #fff; text-align: left; }
.dsuk-split-body .elementor-widget-container { color: rgba(255,255,255,0.85); }
.dsuk-split-body p { margin: 0 0 14px; }
.dsuk-split-media { width: 100%; height: 0; background-size: cover; background-position: center; border-radius: 16px; }

/* ===== STANDALONE BANNER HEADING (Equipment PPE intro) ===== */
.dsuk-banner-h .elementor-heading-title { color: #fff; max-width: 1120px; margin: 0 auto; }

/* ===== SPEC BLOCK (text+checklist | image — Underwater Stage) ===== */
.dsuk-spec > .elementor-container {
  display: flex !important; flex-wrap: wrap; gap: 56px; align-items: center;
  max-width: 1525px; margin: 0 auto;
}
.dsuk-spec > .elementor-container > .elementor-column { width: auto !important; flex: 1 1 380px; min-width: 300px; }
.dsuk-spec-media { width: 100%; height: 0; background-size: cover; background-position: center; border-radius: 16px; }
/* two side-by-side checklists within one column */
.dsuk-checks2 { display: flex; flex-wrap: wrap; gap: 12px 48px; }
.dsuk-checks2 .dsuk-checklist { flex: 1 1 240px; margin-top: 12px; max-width: none; }
.dsuk-checks2--center { justify-content: center; max-width: 1320px; margin: 28px auto 0; gap: 12px 120px; }

/* ===== MOVIE-POSTER WALL (productions filmed here) ===== */
.dsuk-posters .dsuk-section-title .elementor-heading-title { color: #fff; }
.dsuk-poster-wrap .elementor-widget-container { margin-top: 80px; }
.dsuk-poster-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
/* explicit rows (e.g. 5 / 4 / 2): each row centres its posters at the 5-per-row size */
.dsuk-poster-grid--rows { flex-direction: column; flex-wrap: nowrap; }
.dsuk-poster-row { display: flex; justify-content: center; gap: 24px; }
.dsuk-poster {
  flex: 0 0 calc((100% - 96px) / 5); background-size: cover; background-position: center;
  height: 0; padding-top: calc(((100% - 96px) / 5) * 1.5); border-radius: 12px;
}

/* ===== CREDITS PAGE ===== */
/* Centred hero (statement over the underwater still) — mirrors the --page hero's
   height/centring pattern but centres both axes (the fork drops content_position). */
/* Homepage hero only: fixed height + content pinned to the BOTTOM, so the graded
   image reads up top and the H1/lead/buttons sit in the faded navy band below. */
.dsuk-hero.dsuk-hero--home { min-height: 860px !important; }
.dsuk-hero--home > .elementor-container {
  min-height: 860px !important; align-items: flex-end !important; padding-bottom: 64px !important;
}
.dsuk-hero--home > .elementor-container > .elementor-column > .elementor-widget-wrap {
  align-content: flex-end !important;
}
@media (max-width: 1024px) {
  .dsuk-hero.dsuk-hero--home, .dsuk-hero--home > .elementor-container { min-height: 600px !important; }
  .dsuk-hero--home > .elementor-container { padding-bottom: 40px !important; }
}

.dsuk-hero.dsuk-hero--center { min-height: 780px !important; }
/* bottom-weight the statement (~two-thirds down, sitting in the fade) to match the
   Figma, rather than dead-centre; the section's 140px bottom padding sets the gap. */
.dsuk-hero--center > .elementor-container {
  min-height: 780px !important; align-items: flex-end !important;
}
.dsuk-hero--center > .elementor-container > .elementor-column > .elementor-widget-wrap {
  align-content: flex-end !important;
}
.dsuk-hero-statement .elementor-heading-title {
  max-width: 1300px; margin-left: auto; margin-right: auto;
}
/* Responsive poster wall: 8 across, reflowing down the breakpoints. Overrides the
   5-across .dsuk-poster basis; the padding-top keeps the 2:3 ratio (percentage is
   relative to the grid width, matching the flex-basis calc). */
.dsuk-credit-grid { gap: 24px; }
/* 6 posters per row (larger than the old 8-up); reflows 6 -> 4 -> 3 -> 2 */
.dsuk-credit-grid .dsuk-poster {
  flex: 0 0 calc((100% - 120px) / 6);
  padding-top: calc(((100% - 120px) / 6) * 1.5);
}
@media (max-width: 1024px) {
  .dsuk-credit-grid { gap: 18px; }
  .dsuk-credit-grid .dsuk-poster {
    flex-basis: calc((100% - 54px) / 4);
    padding-top: calc(((100% - 54px) / 4) * 1.5);
  }
}
@media (max-width: 600px) {
  .dsuk-credit-grid { gap: 14px; }
  .dsuk-credit-grid .dsuk-poster {
    flex-basis: calc((100% - 28px) / 3);
    padding-top: calc(((100% - 28px) / 3) * 1.5);
  }
}
@media (max-width: 420px) {
  .dsuk-credit-grid .dsuk-poster {
    flex-basis: calc((100% - 14px) / 2);
    padding-top: calc(((100% - 14px) / 2) * 1.5);
  }
}
/* On mobile, drop the centred hero statement to the bottom of the image so it sits
   in the navy fade and the background photo reads above it (the --page heroes are
   already bottom-weighted, so this only affects the Credits --center hero). */
@media (max-width: 1024px) {
  .dsuk-hero.dsuk-hero--center, .dsuk-hero--center > .elementor-container { min-height: 560px !important; }
  .dsuk-hero--center > .elementor-container { align-items: flex-end !important; padding-bottom: 48px !important; }
  .dsuk-hero--center > .elementor-container > .elementor-column > .elementor-widget-wrap { align-content: flex-end !important; }
}
@media (max-width: 768px) {
  .dsuk-hero-statement .elementor-heading-title { font-size: 30px !important; line-height: 38px !important; }
}

/* ===== GALLERY PAGE (CSS-columns masonry + lightbox) ===== */
.dsuk-gallery-wrap .elementor-widget-container { width: 100%; }
.dsuk-gallery { column-count: 4; column-gap: 16px; }
.dsuk-gal-item {
  /* !important beats the theme's figure{margin:0} reset so the vertical gap
     between stacked tiles matches the 16px column-gap */
  break-inside: avoid; margin: 0 0 16px !important; position: relative; display: block;
  border-radius: 12px; overflow: hidden; cursor: pointer; background: rgba(255,255,255,0.04);
}
.dsuk-gal-item img, .dsuk-gal-item video { width: 100%; height: auto; display: block; transition: transform .5s ease; }
.dsuk-gal-item--video video { aspect-ratio: 16 / 9; object-fit: cover; }
.dsuk-gal-item::after { content: ""; position: absolute; inset: 0; background: rgba(8,22,59,0); transition: background .3s ease; }
.dsuk-gal-item:hover img, .dsuk-gal-item:hover video { transform: scale(1.06); }
.dsuk-gal-item:hover::after { background: rgba(8,22,59,0.18); }
.dsuk-gal-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2;
  width: 66px; height: 66px; border-radius: 50%;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .3s ease, transform .3s ease;
}
.dsuk-gal-play::before {
  content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%,-50%);
  border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff;
}
.dsuk-gal-item--video:hover .dsuk-gal-play { background: rgba(255,255,255,0.28); transform: translate(-50%,-50%) scale(1.08); }
.dsuk-lightbox {
  position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center;
  padding: 40px; background: rgba(4,10,28,0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.dsuk-lightbox.is-open { display: flex; }
.dsuk-lb-stage { display: flex; align-items: center; justify-content: center; max-width: 92vw; max-height: 88vh; }
.dsuk-lb-stage img, .dsuk-lb-stage video {
  max-width: 92vw; max-height: 88vh; width: auto; height: auto; border-radius: 8px; display: block;
  box-shadow: 0 24px 70px rgba(0,0,0,0.55);
}
.dsuk-lb-close {
  position: fixed; top: 22px; right: 26px; width: 50px; height: 50px; border-radius: 50%; z-index: 2;
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.28); color: #fff;
  font-size: 28px; line-height: 1; cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .2s ease;
}
.dsuk-lb-close:hover { background: rgba(255,255,255,0.2); }
@media (max-width: 1200px) { .dsuk-gallery { column-count: 3; } }
@media (max-width: 820px)  { .dsuk-gallery { column-count: 2; column-gap: 12px; } .dsuk-gal-item { margin-bottom: 12px !important; } }
@media (max-width: 480px)  { .dsuk-gallery { column-gap: 8px; } .dsuk-gal-item { margin-bottom: 8px !important; border-radius: 8px; } }

/* ===== CTA BANNER ===== */
.dsuk-cta { position: relative; overflow: hidden; border-radius: 16px; }
.dsuk-cta::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(6,6,6,0.92) 0%, rgba(6,6,6,0.9) 38%, rgba(6,6,6,0.7) 60%, rgba(6,6,6,0.3) 80%, rgba(6,6,6,0) 100%);
  z-index: 0; pointer-events: none; border-radius: 16px;
}
.dsuk-cta > .elementor-container { position: relative; z-index: 1; max-width: 100% !important; width: 100% !important; margin: 0 !important; }
.dsuk-cta > .elementor-container > .elementor-column > .elementor-widget-wrap,
.dsuk-cta > .elementor-container > .elementor-column > .elementor-element-populated { padding-left: 0 !important; padding-right: 0 !important; }
.dsuk-cta-inner { max-width: 927px; }
.dsuk-cta-h .elementor-heading-title { max-width: 715px; color: #fff; }
.dsuk-cta-sub .elementor-widget-container { max-width: 700px; margin-top: 8px; }
.dsuk-cta-sub p { color: rgba(255,255,255,0.9); margin: 0; }
.dsuk-cta-btns > .elementor-container {
  display: flex; justify-content: flex-start; align-items: center;
  flex-wrap: wrap; gap: 12px 20px;
}
.dsuk-cta-btns > .elementor-container > .elementor-column {
  width: auto !important; flex: 0 0 auto;
}
.dsuk-cta-btns .elementor-button { white-space: nowrap; }

/* ===== CONTACT PAGE (form via Contact Form 7 + map + info cards) ===== */
.dsuk-contact > .elementor-container {
  display: flex !important; flex-wrap: wrap; gap: 64px 120px; align-items: flex-start;
  max-width: 1525px; margin: 0 auto;
}
.dsuk-contact > .elementor-container > .elementor-column { width: auto !important; }
.dsuk-contact > .elementor-container > .elementor-column:first-child { flex: 1 1 560px; min-width: 300px; }
.dsuk-contact > .elementor-container > .elementor-column:last-child { flex: 1 1 560px; min-width: 300px; }
.dsuk-contact-h .elementor-heading-title { color: #fff; text-align: left; }

/* -- Contact Form 7 fields (scoped to our wrapper so other CF7 forms are untouched) -- */
.dsuk-form-wrap .wpcf7 { margin-top: 28px; }
.dsuk-form-wrap form.wpcf7-form { margin: 0; }
.dsuk-form-row { display: flex; flex-wrap: wrap; gap: 0 38px; }
.dsuk-form-row .dsuk-field { flex: 1 1 200px; }
.dsuk-form .dsuk-field { display: block; margin: 0 0 22px; }
.dsuk-form .dsuk-field label { display: block; font-family: "Poppins",sans-serif; font-weight: 400;
  font-size: 14px; color: rgba(255,255,255,0.7); margin: 0 0 8px; }
.dsuk-form input[type="text"], .dsuk-form input[type="email"], .dsuk-form input[type="tel"],
.dsuk-form textarea {
  width: 100%; box-sizing: border-box; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; padding: 13px 16px;
  color: #fff; font-family: "Poppins",sans-serif; font-size: 16px; line-height: 24px;
  transition: border-color .18s, background .18s;
}
.dsuk-form textarea { min-height: 170px; resize: vertical; display: block; }
.dsuk-form input::placeholder, .dsuk-form textarea::placeholder { color: rgba(255,255,255,0.4); }
.dsuk-form input:focus, .dsuk-form textarea:focus {
  outline: none; border-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.09);
}
/* enquiry-type radios styled as tabs */
.dsuk-form-tabs { margin: 0 0 26px; border-bottom: 1px solid rgba(255,255,255,0.15); }
.dsuk-form-tabs .wpcf7-radio { display: flex; gap: 30px; }
.dsuk-form-tabs .wpcf7-list-item { margin: 0; }
.dsuk-form-tabs .wpcf7-list-item input { position: absolute; opacity: 0; width: 0; height: 0; }
.dsuk-form-tabs .wpcf7-list-item > label { display: inline-block; cursor: pointer; padding: 0 2px 12px;
  margin-bottom: -1px; color: rgba(255,255,255,0.5); font-family: "Poppins",sans-serif; font-size: 15px;
  border-bottom: 2px solid transparent; transition: color .18s, border-color .18s; }
.dsuk-form-tabs .wpcf7-list-item > label:has(input:checked) { color: #fff; border-bottom-color: #fff; }
/* submit button — matches the site's glass pill buttons (translucent, bordered,
   rounded, backdrop-blur), full width for the form. !important + wrapper scope
   because the active theme skins input[type=submit]/.wpcf7-submit (cyan, uppercase)
   and would otherwise win. */
.dsuk-form-submit { display: block; margin: 8px 0 0; }
/* match the site's glass pill buttons exactly (e.g. homepage "View our credits":
   20px / weight 500, padding 14×31, auto width) */
.dsuk-form-wrap .dsuk-form input[type="submit"],
.dsuk-form-wrap .dsuk-form .wpcf7-submit {
  width: auto !important; display: inline-block !important;
  background: rgba(255,255,255,0.10) !important; color: #fff !important;
  border: 1px solid rgba(255,255,255,0.28) !important; border-radius: 100px !important;
  padding: 14px 31px !important; box-shadow: none !important;
  font-family: "Poppins",sans-serif !important; font-weight: 500 !important; font-size: 20px !important;
  text-transform: none !important; letter-spacing: normal !important; line-height: 1.5 !important;
  cursor: pointer; -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px);
  transition: background .18s, border-color .18s;
}
.dsuk-form-wrap .dsuk-form input[type="submit"]:hover,
.dsuk-form-wrap .dsuk-form .wpcf7-submit:hover {
  background: rgba(255,255,255,0.18) !important; border-color: rgba(255,255,255,0.45) !important;
}
/* CF7 validation + response messaging */
.dsuk-form .wpcf7-not-valid-tip { color: #ff9b9b; font-size: 13px; margin-top: 6px; }
.dsuk-form input.wpcf7-not-valid, .dsuk-form textarea.wpcf7-not-valid { border-color: rgba(255,120,120,0.7); }
.dsuk-form-wrap .wpcf7-response-output { margin: 18px 0 0 !important; border-radius: 8px; color: #fff;
  border-color: rgba(255,255,255,0.3) !important; font-size: 14px; padding: 10px 16px; }
.dsuk-form-missing { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px; padding: 22px 26px; color: rgba(255,255,255,0.85); }
.dsuk-form-missing p { margin: 0; }

/* -- Map + info cards (right column) -- */
.dsuk-contact-sidewrap .elementor-widget-container { width: 100%; }
.dsuk-contact-side { display: flex; flex-direction: column; gap: 20px; }
.dsuk-map-wrap { border-radius: 16px; overflow: hidden; line-height: 0; }
.dsuk-map { width: 100%; height: 300px; border: 0; display: block; }
.dsuk-info-card { display: flex; gap: 20px; align-items: flex-start;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px;
  padding: 22px 26px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.dsuk-info-ico { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center; }
.dsuk-info-ico svg { width: 20px; height: 20px; }
.dsuk-info-body h4 { margin: 0 0 5px; color: #fff; font-family: "Poppins",sans-serif;
  font-weight: 600; font-size: 18px; line-height: 24px; }
.dsuk-info-body p { margin: 0; color: rgba(255,255,255,0.7); font-family: "Poppins",sans-serif;
  font-size: 15px; line-height: 23px; }
.dsuk-info-body a { color: rgba(255,255,255,0.7); text-decoration: none; }
.dsuk-info-body a:hover { color: #fff; }
@media (max-width: 767px) {
  .dsuk-form-row { gap: 0; }
  .dsuk-form-row .dsuk-field { flex: 1 1 100%; }
}

/* ===== SITE FOOTER (plain HTML, rendered site-wide by the plugin via wp_footer) ===== */
.dsuk-site-footer { background: rgba(0,0,0,0.25); color: #fff; }
.dsuk-footer {
  max-width: 1525px; margin: 0 auto; padding: 48px 24px;
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 40px;
}
.dsuk-footer-brand { flex: 0 1 474px; max-width: 474px; }
.dsuk-footer-logo { width: 265px; height: auto; display: block; margin-bottom: 20px; }
.dsuk-footer-blurb {
  color: #fff; margin: 0 0 20px; max-width: 474px;
  font-family: "Poppins", sans-serif; font-weight: 300; font-size: 14px; line-height: 22.75px;
}
.dsuk-footer-heading {
  color: #fff; margin: 0 0 14px; text-transform: uppercase; letter-spacing: 1.25px;
  font-family: "Poppins", sans-serif; font-weight: 300; font-size: 14px; line-height: 20px;
}
.dsuk-footer-links { list-style: none; margin: 0; padding: 0; }
.dsuk-footer-links li { margin: 0 0 8px; }
.dsuk-footer-links a {
  color: #fff; text-decoration: none;
  font-family: "Poppins", sans-serif; font-weight: 300; font-size: 14px; line-height: 21px;
}
.dsuk-footer-links a:hover { color: rgba(255,255,255,0.7); }
.dsuk-footer-address {
  color: #fff; margin: 0;
  font-family: "Poppins", sans-serif; font-weight: 300; font-size: 14px; line-height: 21px;
}
/* The active theme forces a pale-blue colour on footer <p>/<a> with !important
   (headings escape it, which is why only they went white). Beat it with higher
   specificity + !important so all footer body text is truly white. */
.dsuk-site-footer .dsuk-footer-blurb,
.dsuk-site-footer .dsuk-footer-address,
.dsuk-site-footer .dsuk-footer-links a { color: #fff !important; }
.dsuk-site-footer .dsuk-footer-links a:hover { color: rgba(255,255,255,0.75) !important; }
.dsuk-imdb-btn {
  display: inline-block; color: #fff; text-decoration: none; white-space: nowrap;
  font-family: "Poppins", sans-serif; font-weight: 500; font-size: 12px; line-height: 1;
  padding: 10px 18px; border-radius: 43px;
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.28);
  -webkit-backdrop-filter: blur(6.5px); backdrop-filter: blur(6.5px);
}
.dsuk-imdb-btn:hover { background: rgba(255,255,255,0.16); }
.dsuk-copyright-bar { border-top: 1px solid rgba(255,255,255,0.05); }
.dsuk-copyright-bar .dsuk-copyright {
  max-width: 1525px; margin: 0 auto; padding: 16px 24px; color: rgba(255,255,255,0.85);
  font-family: "Poppins", sans-serif; font-weight: 300; font-size: 12px; line-height: 16px;
}
@media (max-width: 767px) {
  .dsuk-footer { flex-direction: column; gap: 28px; padding: 40px 20px; }
  .dsuk-footer-brand { flex-basis: auto; }
}

/* ===== Responsive (Figma is desktop-only; these unwind the desktop-only fixed
   widths/heights/absolute positioning so tablet & mobile stay usable) ===== */
@media (max-width: 1024px) {
  /* HEADER — site header drops into normal flow (a bar above the hero) instead of
     overlaying, and the logo/menu stack + centre. HERO sizes to its content
     (desktop is a 950px items-middle hero, which doesn't translate to small screens). */
  .dsuk-site-header { position: static !important; padding: 20px 0 !important; }
  .dsuk-header { flex-direction: column; gap: 16px; padding: 0 20px !important; }
  .dsuk-nav .dsuk-nav-menu { flex-wrap: wrap; justify-content: center; gap: 18px; }
  .dsuk-hero { min-height: auto !important; padding: 32px 0 48px !important; }
  .dsuk-hero > .elementor-container { min-height: auto !important; }
  .dsuk-hero-h1 .elementor-heading-title { font-size: 40px !important; line-height: 48px !important; }

  /* SERVICE CARDS — one per row, width-capped and centred; caption grows with
     its content (the fixed 296px box would clip when the card narrows). */
  .dsuk-card-row > .elementor-container { justify-content: center !important; }
  .dsuk-card-row > .elementor-container > .elementor-column {
    flex: 1 1 100% !important; width: auto !important; max-width: 560px !important;
  }
  .dsuk-card { min-height: 480px !important; }
  /* min-height:0 (not height:auto) — the base rule now uses min-height, which
     height:auto would no longer release, and a short caption would be padded out
     to 296px on a phone. */
  .dsuk-card-caption { min-height: 0 !important; }
  .dsuk-card-caption > .elementor-container { min-height: 0 !important; height: auto !important; }

  /* CREDITS — 3 posters per row */
  .dsuk-credit-row > .elementor-container > .elementor-column {
    width: calc((100% - 58px) / 3) !important; max-width: calc((100% - 58px) / 3) !important; flex: 0 1 auto;
  }

  /* PARTNER LOGOS — allow wrapping onto centred rows (desktop forces nowrap) */
  .dsuk-partner-strip > .elementor-container,
  .dsuk-reg-strip > .elementor-container {
    flex-wrap: wrap !important; justify-content: center !important;
    max-width: 100% !important; gap: 24px 48px;
  }
  .dsuk-reg-logo .elementor-image img { height: 44px !important; }

  /* COORDINATOR — copy above, photo grid below, both full width */
  .dsuk-coord > .elementor-container { gap: 32px; }
  .dsuk-coord > .elementor-container > .elementor-column:first-child,
  .dsuk-coord > .elementor-container > .elementor-column:last-child {
    flex: 1 1 100% !important; min-width: 0;
  }
  .dsuk-coord-media { max-width: 620px; margin: 0 auto; }

  /* PAGE HERO — shorter on tablet; keep the copy weighted to the bottom of the
     image (the container above is reset to auto height, which would otherwise
     collapse the H1/lead to the top). */
  .dsuk-hero.dsuk-hero--page { min-height: 460px !important; }
  .dsuk-hero.dsuk-hero--page > .elementor-container {
    min-height: 460px !important; align-items: flex-end !important; align-content: flex-end !important;
  }

  .dsuk-cta-h .elementor-heading-title { font-size: 34px !important; line-height: 42px !important; }
}

@media (max-width: 767px) {
  /* GLOBAL — 20px page-edge gutter on mobile. Applied to the content container of
     every TOP-LEVEL section (inner sections are excluded so nested rows don't
     double-pad). Section backgrounds stay full-bleed; only the content insets. */
  .elementor-section:not(.elementor-inner-section) > .elementor-container {
    padding-left: 20px !important; padding-right: 20px !important;
  }
  /* CTA card carries a 90px desktop inset — drop it to the mobile gutter */
  .dsuk-cta { padding-left: 20px !important; padding-right: 20px !important; }

  .dsuk-hero-h1 .elementor-heading-title { font-size: 30px !important; line-height: 38px !important; }

  /* CREDITS — 2 posters per row */
  .dsuk-credit-row > .elementor-container > .elementor-column {
    width: calc((100% - 29px) / 2) !important; max-width: calc((100% - 29px) / 2) !important;
  }

  /* FOOTER — stack the three columns */
  .dsuk-footer > .elementor-container { flex-direction: column !important; gap: 28px !important; }
  .dsuk-footer > .elementor-container > .elementor-column { width: 100% !important; }

  /* CTA — smaller heading, centred contact buttons */
  .dsuk-cta-h .elementor-heading-title { font-size: 26px !important; line-height: 34px !important; }
  .dsuk-cta-btns > .elementor-container { justify-content: center !important; }
}

/* ===== RESPONSIVE HEADINGS =====
   The big desktop title sizes (section/block 64px, split 54px, banner/contact 46px)
   have no responsive typography on this fork, so on narrow screens they overflow
   and force horizontal scroll that clips the whole page. Scale them down. */
@media (max-width: 1024px) {
  .dsuk-section-title .elementor-heading-title,
  .dsuk-block-title .elementor-heading-title { font-size: 42px !important; line-height: 50px !important; }
  .dsuk-split-title .elementor-heading-title,
  .dsuk-contact-h .elementor-heading-title { font-size: 36px !important; line-height: 44px !important; }
  .dsuk-banner-h .elementor-heading-title { font-size: 32px !important; line-height: 42px !important; }
}
@media (max-width: 767px) {
  .dsuk-section-title .elementor-heading-title,
  .dsuk-block-title .elementor-heading-title { font-size: 28px !important; line-height: 36px !important; }
  .dsuk-split-title .elementor-heading-title,
  .dsuk-contact-h .elementor-heading-title { font-size: 25px !important; line-height: 33px !important; }
  .dsuk-banner-h .elementor-heading-title { font-size: 23px !important; line-height: 31px !important; }
}

/* ===== BURGER NAV — ALL SCREEN SIZES (client request) =====
   (overrides the stacked-header rules above)
   The toggle is always visible and the menu is always a collapsed panel; on
   desktop the panel is a narrower right-aligned card under the burger rather
   than spanning the full 1525px bar. */
.dsuk-header {
  flex-direction: row !important; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 0;
}
.dsuk-logo { flex: 0 1 auto; min-width: 0; }
.dsuk-navtoggle {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
  width: 46px; height: 40px; padding: 0; background: transparent; border: 0; cursor: pointer; flex: 0 0 auto;
}
.dsuk-navtoggle span {
  display: block; width: 26px; height: 2px; background: #fff; border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.dsuk-site-header.dsuk-nav-open .dsuk-navtoggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.dsuk-site-header.dsuk-nav-open .dsuk-navtoggle span:nth-child(2) { opacity: 0; }
.dsuk-site-header.dsuk-nav-open .dsuk-navtoggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Forces the panel onto its own row. Needed because flex line-breaking uses the
   max-width-clamped size, so the 340px desktop panel would otherwise sit on row
   one beside the logo and drag it down when opened. */
.dsuk-nav-break { flex: 0 0 100%; height: 0; order: 2; }
/* nav collapses to a panel below the bar, hidden until toggled */
/* box-sizing so the glass panel's 1px border + padding stay inside 100% width
   and never push a horizontal scrollbar onto the page */
.dsuk-nav { display: none !important; order: 3; flex: 0 0 100%; width: 100%; margin-top: 26px; box-sizing: border-box; }
/* the panel keeps the site's glass treatment (.dsuk-glass--nav) at every width */
.dsuk-site-header.dsuk-nav-open .dsuk-nav { display: block !important; padding: 6px 10px; }
.dsuk-nav .dsuk-nav-menu {
  flex-direction: column !important; align-items: stretch !important;
  flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 2px !important;
}
.dsuk-nav .dsuk-nav-menu > li { width: 100%; }
.dsuk-nav > .dsuk-nav-menu > li > a { display: block; padding: 12px 6px; }
/* the parent caret is redundant once sub-items are always shown inline */
.dsuk-nav .dsuk-has-caret > a::after,
.dsuk-nav .menu-item-has-children > a::after { display: none; }
@media (min-width: 1025px) {
  /* desktop: keep the panel a tidy card aligned under the burger */
  .dsuk-nav { max-width: 340px; margin-left: auto; }
}
@media (max-width: 1024px) {
  /* logo shrinks so the wide wordmark never overflows a narrow phone */
  .dsuk-header .dsuk-logo img { height: auto; width: auto; max-height: 50px; max-width: 100%; }
}