/*
Theme Name:   GeneratePress DS
Theme URI:    https://digitalsnowball.com
Description:  Digital Snowball child theme based on GeneratePress
Author:       Digital Snowball
Author URI:   https://digitalsnowball.com
Template:     generatepress
Version:      1.0.0
*/

/* ============================================
   DS BRAND TOKENS
   ============================================ */
:root {
  --ds-blue:        #29aae1;
  --ds-blue-dark:   #1a8abf;
  --ds-black:       #1a1a1a;
  --ds-grey:        #555555;
  --ds-light-grey:  #f8f8f8;
  --ds-white:       #ffffff;
  --ds-font:        'Raleway', 'Helvetica Neue', Arial, sans-serif;
  --ds-nav-size:    11px;
  --ds-nav-spacing: 0.12em;
}

/* ============================================
   GLOBAL RESET & BASE
   ============================================ */
body {
  font-family: var(--ds-font);
  color: var(--ds-black);
  background: var(--ds-white);
  -webkit-font-smoothing: antialiased;
}

/* ============================================
   HEADER
   ============================================ */
.site-header {
  background: var(--ds-white);
  border-bottom: none;
  padding: 0;
}

.site-header .inside-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--ds-max-width);
  margin: 0 auto;
  padding: 22px 30px;
}

/* Logo — hide text title when custom logo image is set */
.has-custom-logo .site-title,
.has-custom-logo .site-description,
.wp-custom-logo .site-title,
.wp-custom-logo .site-description,
.wp-custom-logo .site-branding,
.wp-custom-logo p.main-title {
  display: none !important;
}

.custom-logo-link {
  display: flex;
  align-items: center;
}

.custom-logo {
  max-height: 48px;
  width: auto;
}

/* Fallback text logo (no custom logo set) */
.site-title {
  font-family: var(--ds-font);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
}

.site-title a {
  color: var(--ds-black) !important;
  text-decoration: none;
}

.site-title a span.ds-blue {
  color: var(--ds-blue);
}

/* Navigation */
.main-navigation {
  display: flex;
  align-items: center;
}

.main-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 22px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.main-navigation ul li a {
  font-family: var(--ds-font);
  font-size: var(--ds-nav-size);
  font-weight: 600;
  letter-spacing: var(--ds-nav-spacing);
  text-transform: uppercase;
  color: var(--ds-black);
  text-decoration: none;
  padding: 0;
  transition: color 0.2s ease;
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item a {
  color: var(--ds-blue);
}

/* ---- Mobile hamburger ----
   (Removed: custom .ds-nav-toggle is superseded by GeneratePress's native
   inline mobile menu. See the mobile nav breakpoint note further down.) */

/* ============================================
   CONTENT AREA
   ============================================ */
.site-content {
  padding: 0;
}

.content-area {
  width: 100%;
  max-width: 100%;
  padding: 0;
  float: none;
}

.no-sidebar .content-area {
  width: 100%;
  max-width: 100%;
}

.entry-content {
  max-width: 100%;
}

/* Remove GeneratePress default padding on all pages */
.page .entry-content {
  padding: 0;
}

.page .inside-article {
  padding: 0;
}

.home .page .entry-content {
  padding: 0;
}

.home .inside-article {
  padding: 0;
}

/* Make container full width on homepage */
.home .site-content .inside-page-hero,
.home .page-hero-section {
  display: none;
}

/* Remove default page title on homepage */
.home .entry-header {
  display: none;
}

/* ============================================
   HOMEPAGE HERO SLIDER
   ============================================ */
.ds-hero-slider {
  max-width: var(--ds-max-width);
  margin: 0 auto;
  padding: 50px 30px 40px;
  min-height: 220px;
  position: relative;
}

/* Individual slides — hidden by default, shown when .active.
   Reserve a constant height so the slider doesn't grow/shrink between
   slides (which would push the portfolio grid up/down). Value = tallest
   slide measured at desktop width (261px) + small buffer. */
.ds-slide {
  display: none;
  min-height: 280px;
}

.ds-slide.active {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; /* copy is left-aligned */
  animation: ds-slide-in 0.5s ease;
}

/* Mobile: copy wraps more, so the tallest slide is taller.
   Value = tallest slide measured at 390px width (307px) + small buffer. */
@media (max-width: 768px) {
  .ds-slide {
    min-height: 330px;
  }
}

@keyframes ds-slide-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ds-slide h1,
.ds-slide h2 {
  font-family: var(--ds-font);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  color: var(--ds-black);
  margin: 0 0 18px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.ds-slide p {
  font-size: 16px;
  font-weight: 400;
  color: var(--ds-grey);
  max-width: 540px;
  line-height: 1.7;
  margin: 0 0 20px;
}

/* Dot navigation */
.ds-slider-dots {
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  margin: 0;
}

.ds-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid #b9b9b9;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.ds-dot:hover {
  border-color: #999;
}

.ds-dot.active {
  background: #b9b9b9;
  border-color: #b9b9b9;
}

/* On narrow screens, drop the dots below the slide as a horizontal row */
@media (max-width: 768px) {
  .ds-slider-dots {
    position: static;
    transform: none;
    flex-direction: row;
    justify-content: flex-start;
    margin-top: 24px;
  }
}

/* Legacy single hero (kept for any pages still using it) */
.ds-hero {
  max-width: var(--ds-max-width);
  margin: 0 auto;
  padding: 50px 30px 30px;
}

.ds-hero h1 {
  font-family: var(--ds-font);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  color: var(--ds-black);
  margin: 0 0 18px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.ds-hero p {
  font-size: 16px;
  font-weight: 400;
  color: var(--ds-grey);
  max-width: 540px;
  line-height: 1.7;
  margin: 0 0 20px;
}

.ds-hero-line {
  width: 45px;
  height: 3px;
  background: var(--ds-blue);
  margin: 20px 0 28px;
}

/* ============================================
   HERO CTA BUTTON
   ============================================ */
.ds-btn {
  display: inline-block;
  font-family: var(--ds-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ds-white);
  background: var(--ds-blue);
  padding: 12px 28px;
  text-decoration: none;
  transition: background 0.2s ease;
  margin-top: 10px;
}

.ds-btn:hover {
  background: var(--ds-blue-dark);
  color: var(--ds-white);
}

/* Portfolio link wrapper */
.ds-portfolio-link {
  display: block;
  width: 100%;
  height: 100%;
}

/* ============================================
   PORTFOLIO FILTER TABS
   ============================================ */
.ds-filters {
  max-width: var(--ds-max-width);
  margin: 0 auto;
  padding: 0 30px 30px;
  display: none; /* hidden until more portfolio categories are added */
  gap: 10px;
}

.ds-filter-btn {
  font-family: var(--ds-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 18px;
  border: 1px solid #ccc;
  background: transparent;
  color: var(--ds-black);
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
}

.ds-filter-btn:hover,
.ds-filter-btn.active {
  border-color: var(--ds-blue);
  color: var(--ds-blue);
  background: transparent;
}

/* ============================================
   PORTFOLIO GRID — edge to edge
   ============================================ */
.ds-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ds-grid-gap);
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.ds-portfolio-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #111;
}

.ds-portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.ds-portfolio-item:hover img {
  transform: scale(1.05);
  opacity: 0.75;
}

.ds-portfolio-item .ds-item-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 60%);
}

.ds-portfolio-item:hover .ds-item-overlay {
  opacity: 1;
}

.ds-portfolio-item .ds-item-title {
  color: white;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0;
}

/* ============================================
   PORTFOLIO SINGLE PAGE
   ============================================ */

/* Hide featured image on all pages — used as hero background, not inline display */
.page .generate-featured-image,
.page .featured-image,
.page .post-image,
.page img.wp-post-image,
.ds-portfolio-page .generate-featured-image,
.ds-portfolio-page .featured-image,
.ds-portfolio-page .entry-header,
.ds-portfolio-page .page-header,
.ds-portfolio-page img.wp-post-image {
  display: none !important;
}
.ds-portfolio-single {
  max-width: 900px;
  margin: 0 auto;
  padding: 50px 30px 60px;
}

.ds-portfolio-single-header {
  margin-bottom: 30px;
}

.ds-portfolio-title {
  font-family: var(--ds-font);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 300;
  color: var(--ds-black);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

.ds-portfolio-subtitle {
  font-size: 17px;
  font-weight: 400;
  color: var(--ds-grey);
  margin: 0 0 20px;
  font-style: italic;
}

.ds-portfolio-body {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 25px 0;
  margin-bottom: 35px;
}

.ds-portfolio-desc {
  font-size: 15px;
  line-height: 1.8;
  color: var(--ds-grey);
  margin: 0;
}

/* Responsive video embed */
.ds-video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  background: #000;
  margin-bottom: 35px;
}

.ds-video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.ds-portfolio-nav {
  margin-top: 20px;
}

.ds-back-link {
  font-family: var(--ds-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ds-grey);
  text-decoration: none;
  transition: color 0.2s ease;
}

.ds-back-link:hover {
  color: var(--ds-blue);
}

/* ============================================
   MAGNIFIC POPUP OVERRIDES
   ============================================ */
.mfp-bg {
  background: rgba(0,0,0,0.92);
}

.mfp-iframe-holder .mfp-content {
  max-width: 1100px;
}

.mfp-close {
  font-size: 32px;
  color: #fff;
  opacity: 0.8;
}

.mfp-close:hover {
  opacity: 1;
}

.mfp-fade.mfp-bg {
  opacity: 0;
  transition: all 0.15s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.92;
}
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;
  transition: all 0.15s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}

/* ============================================
   CLIENTS / BELOW-FOLD SECTION
   ============================================ */
.ds-clients-section {
  max-width: var(--ds-max-width);
  margin: 0 auto;
  /* Reduced top padding (was 70px): the "Clients" section title now sits just
     above this block and owns the spacing down to the logos. */
  padding: 30px 30px 60px;
}

.ds-clients-text p {
  font-size: 16px;
  font-weight: 400;
  color: var(--ds-grey);
  line-height: 1.8;
  max-width: 700px;
  margin: 0 0 60px;
}

.ds-clients-logos {
  margin-bottom: 60px;
  text-align: center;
}

/* Legacy single-image fallback */
.ds-clients-logos > img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* New individual logo grid */
.ds-logo-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 30px 40px;
  align-items: center;
}

.ds-client-logo {
  width: 100%;
  height: 44px;
  object-fit: contain;
  display: block;
  opacity: 0.65;
  transition: opacity 0.2s ease;
}

.ds-client-logo:hover {
  opacity: 1;
}

.ds-logo-placeholder {
  height: 44px;
}

@media (max-width: 900px) {
  .ds-logo-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 30px;
  }
}

@media (max-width: 600px) {
  .ds-logo-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .ds-client-logo {
    height: 36px;
  }
}

.ds-showreel-wrap {
  max-width: 100%;
}

.ds-showreel-wrap .ds-video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: #000;
}

.ds-showreel-wrap .ds-video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ============================================
   HOME PAGE — author-editable blocks
   The Home page is shortcode-driven (hero slider, portfolio grid, clients
   section) with no single content container, so plain Gutenberg blocks you add
   in the editor would otherwise sit at the raw content edge — misaligned with
   the rest of the site. These rules snap any block you add (heading, paragraph,
   list, buttons, image, quote) to the same centred container + 30px gutters as
   the hero and clients sections, so it lines up with the content (and the logos)
   automatically. The full-bleed shortcode sections set their own width and are
   untouched.
   ============================================ */
.home .entry-content > .wp-block-heading,
.home .entry-content > .wp-block-paragraph,
.home .entry-content > .wp-block-list,
.home .entry-content > .wp-block-buttons,
.home .entry-content > .wp-block-image,
.home .entry-content > .wp-block-quote {
  max-width: var(--ds-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 30px;
  padding-right: 30px;
  box-sizing: border-box;
}

/* Branded section label (e.g. "Clients" above the logo strip). To use it on any
   Heading block: select the block → Settings sidebar → Advanced → "Additional
   CSS class(es)" → add  ds-section-title  */
.ds-section-title {
  font-family: var(--ds-font);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ds-black);
  margin-top: 56px;
  margin-bottom: 0;
}

/* ============================================
   FOOTER
   ============================================ */

/* GP footer wrapper holds both the widget area and the copyright bar */
.site-footer {
  background: #2b2b2b;
  margin-top: 60px;
}

/* ---- Footer widget area (dark charcoal) ---- */
#footer-widgets {
  background: #2b2b2b;
  color: #c8c8c8;
  font-family: var(--ds-font);
  font-size: 13px;
  line-height: 1.7;
}

#footer-widgets .inside-footer-widgets {
  max-width: var(--ds-max-width);
  margin: 0 auto;
  padding: 60px 30px 50px;
}

/* Column gutters (widths come from GP grid-25 / tablet-grid-50 classes) */
#footer-widgets [class*="footer-widget-"] {
  padding-right: 30px;
}

/* GeneratePress applies a 40px left "inner-padding" to every footer widget,
   which indented the heading / social icons / column content 40px right of the
   column edge — so they no longer lined up with the header logo + body content
   (all on the 1080px container + 30px gutter). Zero it so footer content sits
   flush at the same left edge as the body. (2026-06-23) */
#footer-widgets .widget.inner-padding,
#footer-widgets .widget {
  padding-left: 0;
  padding-right: 0;
}

#footer-widgets [class*="footer-widget-"]:last-child {
  padding-right: 0;
}

/* Column headings (Heading block, level 4) */
#footer-widgets h4,
#footer-widgets .wp-block-heading,
#footer-widgets .widget-title {
  font-family: var(--ds-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #444;
}

/* Body text + links inside footer widgets */
#footer-widgets p,
#footer-widgets li,
#footer-widgets address {
  color: #c8c8c8;
  font-size: 13px;
  line-height: 1.75;
  font-style: normal;
}

#footer-widgets p {
  margin: 0 0 18px;
}

#footer-widgets a {
  color: #c8c8c8;
  text-decoration: none;
  transition: color 0.2s ease;
}

#footer-widgets a:hover {
  color: var(--ds-blue);
}

#footer-widgets ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#footer-widgets ul li {
  margin-bottom: 6px;
}

/* ---- Social icons (Connect column, Custom HTML block) ---- */
.ds-footer-social {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.ds-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid #555;
  color: #c8c8c8;
  text-decoration: none;
  font-size: 14px;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.ds-footer-social a:hover {
  border-color: var(--ds-blue);
  color: var(--ds-blue);
}

/* ---- "Send Us a Brief" button (Contact column) ---- */
.ds-footer-brief {
  display: inline-block;
  font-family: var(--ds-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ds-blue);
  padding: 9px 20px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.ds-footer-brief:hover {
  background: var(--ds-blue-dark);
  color: #fff;
}

/* ---- Bottom bar (GP footer bar / copyright via generate_copyright) ---- */
.site-info {
  background: #2b2b2b;
  border-top: 1px solid #3d3d3d;
  color: #888;
}

.site-info .inside-site-info {
  max-width: var(--ds-max-width);
  margin: 0 auto;
  text-align: center;
  padding: 18px 30px;
  font-size: 11px;
  letter-spacing: 0.03em;
}

.site-info .copyright-bar {
  padding: 0;
}

.site-info a {
  color: #888;
  text-decoration: none;
  margin: 0 6px;
  transition: color 0.2s ease;
}

.site-info a:hover {
  color: #c8c8c8;
}

.site-info .ds-footer-sep {
  margin: 0 4px;
  opacity: 0.4;
}

/* ---- Footer responsive ----
   GP 3.6.1 renders the footer columns with flexbox (.inside-footer-widgets),
   NOT the legacy grid-25/tablet-grid-50 classes — so set wrap + widths
   explicitly to guarantee 4 -> 2 -> 1 columns. */
@media (max-width: 960px) {
  #footer-widgets .inside-footer-widgets {
    flex-wrap: wrap;
  }
  #footer-widgets [class*="footer-widget-"] {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (max-width: 768px) {
  #footer-widgets .inside-footer-widgets {
    padding: 40px 20px 36px;
  }
  #footer-widgets [class*="footer-widget-"] {
    flex: 0 0 100%;
    max-width: 100%;
    padding-right: 0;
    margin-bottom: 32px;
  }
}

/* ============================================
   FOOTER STYLE GLOW-UP (2026-06-23)
   Additive, reversible layer — content/markup unchanged, styling only.
   Delete this whole block to restore the flat corporate footer.
   ============================================ */

/* Richer background: deep vertical gradient + a brand-blue accent line
   across the very top + a faint oversized snowball watermark. */
.site-footer {
  position: relative;
  background: linear-gradient(180deg, #242424 0%, #181818 100%);
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ds-blue) 0%, var(--ds-blue-dark) 38%, transparent 100%);
}
#footer-widgets {
  background: transparent;
  position: relative;
  overflow: hidden;
}
#footer-widgets::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -70px;
  width: 360px;
  height: 360px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='154.5 2 21.3 22.3'%3E%3Cpath d='M 155.539062 17.316406 C 155.503906 17.273438 155.550781 17.273438 155.578125 17.296875 C 156.921875 18.855469 158.5625 20.011719 161.027344 20.355469 C 163.765625 20.734375 166.019531 19.832031 167.601562 18.613281 C 169.21875 17.371094 170.339844 15.546875 170.484375 12.996094 C 170.644531 10.238281 169.492188 8.292969 168.058594 6.957031 C 167.320312 6.273438 166.359375 5.765625 165.230469 5.527344 C 163.96875 5.257812 162.601562 5.429688 161.578125 5.847656 C 159.695312 6.625 158.140625 8.277344 157.988281 10.761719 C 157.90625 12.066406 158.300781 13.277344 158.847656 14.125 C 159.410156 14.996094 160.207031 15.714844 161.121094 16.09375 C 162.21875 16.542969 163.617188 16.523438 164.65625 16.09375 C 165.652344 15.679688 166.367188 15.003906 166.855469 14.046875 C 166.511719 15.164062 165.789062 15.890625 164.847656 16.417969 C 163.90625 16.945312 162.601562 17.246094 161.234375 16.972656 C 160.019531 16.726562 159.136719 16.183594 158.386719 15.40625 C 157.6875 14.675781 157.113281 13.675781 156.804688 12.597656 C 156.445312 11.355469 156.476562 9.859375 156.804688 8.714844 C 157.117188 7.601562 157.710938 6.609375 158.371094 5.886719 C 159.042969 5.148438 159.953125 4.480469 160.910156 4.015625 C 161.910156 3.527344 163.113281 3.148438 164.445312 3.078125 C 165.566406 3.019531 166.609375 3.222656 167.503906 3.480469 C 170.085938 4.21875 172.132812 5.992188 173.3125 8.046875 C 174.160156 9.519531 174.777344 11.320312 174.6875 13.589844 C 174.601562 15.75 173.886719 17.351562 172.949219 18.75 C 172.039062 20.105469 170.828125 21.214844 169.300781 22.015625 C 167.800781 22.800781 165.808594 23.339844 163.585938 23.085938 C 161.535156 22.851562 159.921875 22.132812 158.617188 21.136719 C 157.3125 20.136719 156.289062 18.917969 155.539062 17.316406 ' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.05;
  pointer-events: none;
}
.site-info {
  background: transparent;
}

/* Headings: swap the full grey underline for a short brand-blue accent bar
   that grows when you hover the column. */
#footer-widgets h4,
#footer-widgets .wp-block-heading,
#footer-widgets .widget-title {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 22px;
}
#footer-widgets h4::after,
#footer-widgets .wp-block-heading::after,
#footer-widgets .widget-title::after {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  margin-top: 12px;
  background: var(--ds-blue);
  transition: width 0.3s ease;
}
#footer-widgets [class*="footer-widget-"]:hover h4::after,
#footer-widgets [class*="footer-widget-"]:hover .wp-block-heading::after,
#footer-widgets [class*="footer-widget-"]:hover .widget-title::after {
  width: 46px;
}

/* List links: slide right and reveal a blue arrow on hover. */
#footer-widgets ul li a {
  position: relative;
  display: inline-block;
  transition: padding-left 0.22s ease, color 0.22s ease;
}
#footer-widgets ul li a::before {
  content: "\2192";
  position: absolute;
  left: 0;
  opacity: 0;
  color: var(--ds-blue);
  transform: translateX(-6px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
#footer-widgets ul li a:hover {
  color: #fff;
  padding-left: 20px;
}
#footer-widgets ul li a:hover::before {
  opacity: 1;
  transform: translateX(0);
}

/* Social icons: ditch the corporate grey squares for soft circular chips
   that fill brand-blue, lift and glow on hover. */
.ds-footer-social {
  gap: 12px;
}
#footer-widgets .ds-footer-social a {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  color: #d2d2d2;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.ds-footer-social a svg {
  width: 17px;
  height: 17px;
}
/* High specificity (incl. #footer-widgets) so the icon stays white on the
   blue hover fill — beats the ID-level `#footer-widgets a:hover` blue rule. */
#footer-widgets .ds-footer-social a:hover {
  background: var(--ds-blue);
  color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 9px 22px -6px rgba(41, 170, 225, 0.65);
}
#footer-widgets .ds-footer-social a:hover svg {
  fill: #fff;
}

/* "Send Us a Brief": pill button with a nudging arrow.
   Colors carry #footer-widgets so the white text survives the ID-level
   `#footer-widgets a:hover { color: blue }` rule (was blue-on-blue). */
#footer-widgets .ds-footer-brief,
#footer-widgets .ds-footer-brief:hover {
  color: #fff;
}
.ds-footer-brief {
  border-radius: 999px;
  padding: 11px 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 18px -8px rgba(41, 170, 225, 0.7);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.ds-footer-brief::after {
  content: "\2192";
  transition: transform 0.2s ease;
}
.ds-footer-brief:hover {
  background: var(--ds-blue-dark);
  transform: translateY(-2px);
  box-shadow: 0 11px 26px -8px rgba(41, 170, 225, 0.85);
}
.ds-footer-brief:hover::after {
  transform: translateX(4px);
}

/* Bottom bar: lose the hard divider, blue link hover. */
.site-info {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.site-info a:hover {
  color: var(--ds-blue);
}

/* ============================================
   INNER PAGE HERO BANNER (with background image/pattern)
   ============================================ */
.ds-page-hero {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  background-color: #1a2540;
  background-image: linear-gradient(135deg, #0f1a30 0%, #1e3060 40%, #2d1b4e 100%);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  /* Fixed height ensures identical background scale on every page */
  height: 380px;
}

/* When a background image is set, darken it for readability */
.ds-page-hero.has-bg-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(15, 20, 40, 0.65);
  pointer-events: none;
}

.ds-page-hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--ds-max-width);
  width: 100%;
  margin: 0 auto;
  padding: 60px 30px;
}

.ds-page-hero-inner h1 {
  font-family: var(--ds-font);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 300;
  color: #ffffff;
  margin: 0 0 20px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.ds-page-hero-inner p {
  font-size: 16px;
  font-weight: 400;
  color: rgba(255,255,255,0.85);
  max-width: 600px;
  line-height: 1.75;
  margin: 0 0 30px;
}

.ds-page-hero-inner .ds-hero-line {
  background: var(--ds-blue);
  margin: 0 0 28px;
}

/* ============================================
   INNER PAGE LAYOUTS
   ============================================ */

/* Shared page wrapper */
.ds-inner-page {
  max-width: var(--ds-max-width);
  margin: 0 auto;
  padding: 0 30px 60px;   /* top gap is owned by .ds-page-hero — see --ds-hero-gap */
}

/* Page header — title + intro */
.ds-page-header {
  margin-bottom: 50px;
}

.ds-page-header h1 {
  font-family: var(--ds-font);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  color: var(--ds-black);
  margin: 0 0 18px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.ds-page-intro {
  font-size: 17px;
  font-weight: 400;
  color: var(--ds-grey);
  max-width: 700px;
  line-height: 1.7;
  margin: 0 0 24px;
}

/* Page body — prose content */
.ds-page-body h2 {
  font-family: var(--ds-font);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 300;
  color: var(--ds-black);
  margin: 50px 0 16px;
  letter-spacing: -0.01em;
}

.ds-page-body h3 {
  font-family: var(--ds-font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ds-black);
  margin: 40px 0 16px;
}

.ds-page-body h4 {
  font-family: var(--ds-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ds-black);
  margin: 30px 0 12px;
}

.ds-page-body p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--ds-grey);
  max-width: 780px;
  margin: 0 0 16px;
}

/* ---- Unified container + banner spacing (single source of truth) --------
   ONE definition of inner width, gutters and the banner-to-content gap for
   EVERY page — whether built from native Gutenberg blocks
   (.wp-block-group.ds-inner-page) or the original single HTML block, and
   whether the banner is followed by body prose or the portfolio grid (/work).
   Width + gutters live in the .ds-inner-page rule above; change --ds-hero-gap
   once to retune the banner spacing site-wide.

   Native blocks inherit the DS prose styles automatically because those are
   element selectors scoped under .ds-page-body. The rules below just stop
   Gutenberg's group wrapper / __inner-container from adding padding or width
   on top of .ds-inner-page, so nothing is set per-page. */
:root { --ds-max-width: 1080px; --ds-hero-gap: 50px; --ds-grid-gap: 4px; }

/* Gutenberg group wrappers must not add their own padding/width. */
.wp-block-group.ds-inner-page > .wp-block-group__inner-container,
.wp-block-group.ds-page-body  > .wp-block-group__inner-container,
.ds-inner-page .wp-block-group__inner-container { padding: 0; }
.wp-block-group.ds-page-body { max-width: none; padding: 0; }

/* The banner owns the single, consistent space beneath it (body OR portfolio). */
.ds-page-hero { margin-bottom: var(--ds-hero-gap); }

/* /work: match the banner-to-portfolio gap to the gap between portfolio items.
   Must only fire when the grid sits DIRECTLY under the hero (/work) — the `> `
   direct-child match stops it triggering on pages that merely contain a grid
   nested deeper in the body (e.g. the About "Recent work" strip), which would
   wrongly collapse their hero gap to 4px. */
.entry-content:has(> .ds-portfolio-grid) .ds-page-hero { margin-bottom: var(--ds-grid-gap); }

/* On converted pages the banner and body are separate blocks — remove the
   WordPress block-gap between them so .ds-page-hero's margin is the only
   spacing. Scoped to the hero block, so /work and other pages stay untouched. */
.wp-block-html:has(.ds-page-hero) { margin-top: 0; margin-bottom: 0; }
.wp-block-html:has(.ds-page-hero) + .wp-block-group { margin-top: 0; }

/* Prose rhythm + hide any empty block the conversion may have left behind. */
.ds-page-body > *:first-child { margin-top: 0; }
.ds-page-body > *:last-child  { margin-bottom: 0; }
.entry-content .wp-block-html:empty,
.ds-page-body p:empty { display: none; }
/* Native list block inside page prose — match paragraph styling */
.ds-page-body ul,
.ds-page-body ol,
.ds-page-body .wp-block-list {
  font-size: 15px;
  line-height: 1.8;
  color: var(--ds-grey);
  max-width: 780px;
  margin: 0 0 16px;
  padding-left: 22px;
}
.ds-page-body li { margin: 0 0 6px; }
.ds-page-body .wp-block-heading { /* headings already styled via h2/h3/h4 rules */
  max-width: 780px;
}

/* Full-width image */
.ds-page-image {
  margin: 20px 0 30px;
}

.ds-page-image img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---- Facilities: two-up grid (Film Studio / Video Editing Suite) ----
   Fixed 16:9 slots with object-fit: cover so placeholder images fill
   consistently now and high-res replacements drop in with no layout shift. */
.ds-facilities-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin: 24px 0 10px;
}

.ds-facility {
  margin: 0;
}

.ds-facility h3 {
  margin-top: 0; /* keep captions aligned at the top of each column */
}

.ds-facility-img {
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.ds-facility-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Showreel videos reuse the same two-up grid; the wrapper's own 16:9 box
   handles aspect ratio, so drop its standalone bottom margin inside the grid. */
.ds-facility .ds-video-wrapper {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .ds-facilities-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ---- About Us: 2-col services grid ---- */
.ds-services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px 50px;
  margin-top: 30px;
}

.ds-service-item h4 {
  margin-top: 0;
}

/* ---- Contact page layout ---- */
.ds-contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.ds-contact-info-col h4 {
  font-family: var(--ds-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ds-black);
  margin: 0 0 14px;
}

.ds-contact-info-col address {
  font-style: normal;
  font-size: 15px;
  line-height: 1.9;
  color: var(--ds-grey);
  margin-bottom: 20px;
}

.ds-contact-info-col address a {
  color: var(--ds-grey);
  text-decoration: none;
}

.ds-contact-info-col address a:hover {
  color: var(--ds-blue);
}

.ds-contact-map {
  margin-top: 24px;
  border: 1px solid #e8e8e8;
}

.ds-contact-map iframe {
  display: block;
}

/* CF7 form styling */
.wpcf7-form p {
  margin-bottom: 16px;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  width: 100%;
  font-family: var(--ds-font);
  font-size: 14px;
  color: var(--ds-black);
  border: 1px solid #ddd;
  padding: 10px 14px;
  background: #fafafa;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  border-color: var(--ds-blue);
  background: #fff;
}

.wpcf7-form textarea {
  min-height: 130px;
  resize: vertical;
}

.wpcf7-form input[type="submit"] {
  font-family: var(--ds-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ds-white);
  background: var(--ds-blue);
  border: none;
  padding: 12px 28px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.wpcf7-form input[type="submit"]:hover {
  background: var(--ds-blue-dark);
}

/* CF7 validation states */
.wpcf7-form .wpcf7-not-valid {
  border-color: #e05252 !important;
  background: #fff8f8 !important;
}

.wpcf7-not-valid-tip {
  display: block;
  font-size: 12px;
  color: #e05252;
  margin-top: 4px;
}

.wpcf7-response-output {
  margin: 16px 0 0;
  padding: 12px 16px;
  font-size: 13px;
  border: 1px solid transparent;
}

.wpcf7-mail-sent-ok {
  border-color: #5a9e5a !important;
  background: #f0faf0;
  color: #2d6a2d;
}

.wpcf7-mail-sent-ng,
.wpcf7-aborted,
.wpcf7-spam-blocked,
.wpcf7-acceptance-missing {
  border-color: #e05252 !important;
  background: #fff8f8;
  color: #c0392b;
}

.wpcf7-validation-errors {
  border-color: #e8a838 !important;
  background: #fffbf0;
  color: #7a5200;
}

/* ---- Insight Production icons row ---- */
.ds-insight-icons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 30px 0 50px;
}

.ds-insight-icon img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---- Insight: 4-col service lists ---- */
.ds-insight-services {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin: 30px 0;
}

.ds-insight-service h4 {
  margin-top: 0;
  margin-bottom: 10px;
}

.ds-insight-service ul {
  margin: 0;
  padding: 0 0 0 18px;
}

.ds-insight-service ul li {
  font-size: 14px;
  color: var(--ds-grey);
  line-height: 1.8;
}

/* ---- Insight: portfolio thumbs ---- */
.ds-insight-portfolio {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 16px 0 30px;
}

.ds-insight-portfolio a {
  display: block;
  overflow: hidden;
}

.ds-insight-portfolio img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.2s ease;
}

.ds-insight-portfolio a:hover img {
  opacity: 0.8;
}

/* ---- Our Work page spacing ---- */
.ds-work-page .ds-hero {
  padding-bottom: 10px;
}

/* ============================================
   TYPOGRAPHY — GOOGLE FONTS ENQUEUED VIA functions.php
   ============================================ */

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
  .ds-portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Mobile nav breakpoint ----
   Mobile navigation is handled by GeneratePress's NATIVE inline mobile menu
   (#masthead carries .has-inline-mobile-toggle and GP loads menu.min.js).
   The old custom `.ds-nav-toggle` system was removed: its `generate_inside_header`
   hook does not exist in GP 3.6.1 (so the button never rendered), while its
   `.main-navigation { display:none }` rule hid GP's own menu — leaving no working
   nav on phones. Letting GP's native menu run fixes that. */
@media (max-width: 768px) {
  .site-header .inside-header {
    padding: 18px 20px;
  }

  .ds-filters {
    flex-wrap: wrap;
  }

  /* Logo is a fixed 304px image — scale it down on phones so it never
     collides with the menu toggle. SVG, so it stays crisp. */
  .site-header .header-image,
  .site-header .is-logo-image,
  .site-header .custom-logo {
    max-width: 230px;
    width: auto;
    height: auto;
  }
}

@media (max-width: 400px) {
  .site-header .header-image,
  .site-header .is-logo-image,
  .site-header .custom-logo {
    max-width: 188px;
  }
}

@media (max-width: 600px) {
  .ds-portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ds-hero {
    padding: 40px 20px 30px;
  }
}

@media (max-width: 480px) {
  .ds-portfolio-grid {
    grid-template-columns: 1fr;
    gap: var(--ds-grid-gap);
  }
}

/* Inner page responsive */
@media (max-width: 900px) {
  .ds-services-grid {
    grid-template-columns: 1fr;
  }
  .ds-insight-icons {
    grid-template-columns: repeat(2, 1fr);
  }
  .ds-insight-services {
    grid-template-columns: repeat(2, 1fr);
  }
  .ds-insight-portfolio {
    grid-template-columns: repeat(2, 1fr);
  }
  .ds-contact-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 600px) {
  .ds-inner-page {
    padding: 0 20px 50px;   /* top gap still owned by .ds-page-hero (--ds-hero-gap) */
  }
  .ds-insight-icons {
    grid-template-columns: repeat(2, 1fr);
  }
  .ds-insight-services {
    grid-template-columns: 1fr;
  }
  .ds-insight-portfolio {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   THE EDIT — blog index, archives, single post
   ============================================ */
/* #main raises specificity above GeneratePress's own #main rule, so the
   max-width container actually CENTERS (margin auto). Without #main it
   left-aligned at the GP container's edge, shifting the whole blog — incl. the
   full-bleed hero banner — ~60px left of where the inner pages sit (2026-06-12). */
.blog #main.site-main,
.archive #main.site-main,
.single-post #main.site-main,
.search #main.site-main {
  max-width: var(--ds-max-width);
  margin-left: auto;
  margin-right: auto;
  padding: 0 30px 60px;
}

.ds-blog-header { margin-bottom: 40px; }

/* ---- Post list (index + archives) ---- */
.blog article.post,
.archive article.post {
  margin-bottom: 56px;
  padding-bottom: 48px;
  border-bottom: 1px solid #ececec;
}
.blog article.post:last-child,
.archive article.post:last-child { border-bottom: none; }

.blog .post-image,
.archive .post-image { margin: 0 0 22px; }
.blog .post-image img,
.archive .post-image img,
.single-post .post-image img,
.single-post .featured-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.single-post .featured-image { margin: 0 auto 30px; width: 100%; max-width: none; padding: 0; }

.blog .entry-title,
.archive .entry-title {
  font-family: var(--ds-font);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 12px;
}
.blog .entry-title a,
.archive .entry-title a { color: var(--ds-black); text-decoration: none; transition: color 0.2s ease; }
.blog .entry-title a:hover,
.archive .entry-title a:hover { color: var(--ds-blue); }

.entry-meta {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9a9a9a;
  margin-bottom: 16px;
}
.entry-meta a { color: #9a9a9a; text-decoration: none; }
.entry-meta a:hover { color: var(--ds-blue); }

.blog .entry-summary,
.archive .entry-summary {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ds-grey);
  max-width: 720px;
}

.read-more {
  display: inline-block;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ds-blue);
  text-decoration: none;
}
.read-more:hover { color: var(--ds-blue-dark); }

.cat-links {
  display: inline-block;
  margin-top: 16px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9a9a9a;
}
.cat-links a { color: var(--ds-blue); text-decoration: none; }
.cat-links a:hover { color: var(--ds-blue-dark); }

/* ============================================
   THE EDIT — magazine index (home.php)
   Featured hero + card grid. No author/date/
   comment meta — category label + title + excerpt.
   ============================================ */

/* Small blue category tag, reused by featured + cards.
   The label is a real link to the category archive. It sits ABOVE the card's
   stretched title-link (z-index) so the category is clickable while the rest of
   the card click-through goes to the post. */
.ds-blog-cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.ds-blog-cat a {
  position: relative;
  z-index: 2;
  color: var(--ds-blue);
  text-decoration: none;
}
.ds-blog-cat a:hover { color: var(--ds-blue-dark); }

/* ---- Featured hero (sticky post, else most recent) ---- */
.ds-blog-featured {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 60px;
  padding-bottom: 56px;
  border-bottom: 1px solid #ececec;
  color: inherit;
}
.ds-blog-featured.ds-no-thumb { grid-template-columns: 1fr; max-width: 780px; }

.ds-blog-featured-img {
  overflow: hidden;
  border-radius: 4px;
}
.ds-blog-featured-img img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.ds-blog-featured:hover .ds-blog-featured-img img { transform: scale(1.04); }

.ds-blog-featured-title {
  font-family: var(--ds-font);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 16px;
  color: var(--ds-black);
  transition: color 0.2s ease;
}
.ds-blog-featured-title a { color: inherit; text-decoration: none; }
/* Stretched link: the title's link covers the whole featured block, so a click
   anywhere (except the category label) opens the post. */
.ds-blog-featured-title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ds-blog-featured:hover .ds-blog-featured-title { color: var(--ds-blue); }

.ds-blog-featured-excerpt {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ds-grey);
  margin: 0 0 20px;
}

.ds-blog-readmore {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ds-blue);
}

/* ---- Card grid (remaining posts) ---- */
.ds-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 34px;
}

.ds-blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
}
.ds-blog-card-img {
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 18px;
}
.ds-blog-card.ds-no-thumb .ds-blog-card-img { display: none; }
.ds-blog-card-img img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.ds-blog-card:hover .ds-blog-card-img img { transform: scale(1.05); }

.ds-blog-card-title {
  font-family: var(--ds-font);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0 0 10px;
  color: var(--ds-black);
  transition: color 0.2s ease;
}
.ds-blog-card-title a { color: inherit; text-decoration: none; }
/* Stretched link: title link covers the whole card → click anywhere (except the
   category label) opens the post. */
.ds-blog-card-title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ds-blog-card:hover .ds-blog-card-title { color: var(--ds-blue); }

.ds-blog-card-excerpt {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ds-grey);
  margin: 0;
}

/* ---- Pagination ---- */
.ds-blog-pagination { margin-top: 56px; }
.ds-blog-pagination .nav-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.ds-blog-pagination .page-numbers {
  display: inline-block;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-grey);
  text-decoration: none;
  border: 1px solid #e2e2e2;
  border-radius: 3px;
  transition: all 0.2s ease;
}
.ds-blog-pagination .page-numbers:hover,
.ds-blog-pagination .page-numbers.current {
  background: var(--ds-blue);
  border-color: var(--ds-blue);
  color: #fff;
}

.ds-blog-empty { font-size: 16px; color: var(--ds-grey); }

/* ---- Magazine index responsive ---- */
@media (max-width: 900px) {
  .ds-blog-grid { grid-template-columns: repeat(2, 1fr); gap: 34px 28px; }
}
@media (max-width: 768px) {
  .ds-blog-featured {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 44px;
    padding-bottom: 40px;
  }
  .ds-blog-featured-img { order: -1; }
}
@media (max-width: 560px) {
  .ds-blog-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ---- Single post ---- */
.single-post .entry-title {
  font-family: var(--ds-font);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0 0 14px;
  color: var(--ds-black);
}
.single-post .post-image { margin: 24px 0 30px; }
.single-post .entry-content {
  font-size: 17px;
  line-height: 1.8;
  color: var(--ds-grey);
  max-width: 760px;
}
.single-post .entry-content h2 {
  font-family: var(--ds-font);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ds-black);
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  margin: 40px 0 14px;
}
.single-post .entry-content a { color: var(--ds-blue); }
.single-post .entry-content p { margin: 0 0 18px; }

/* ---- Blog responsive ---- */
@media (max-width: 600px) {
  .blog .site-main,
  .archive .site-main,
  .single-post .site-main,
  .search .site-main {
    padding: 0 20px 50px;
  }
}

/* ============================================================
   ABOUT ⇄ VIDEO PRODUCTION CROSS-LINKING
   Showreel embed, shared studio two-up, recent-work strip and
   reciprocal deep-dive callouts. Presentation only — reversible
   by restoring the page-content postmeta backups.
   ============================================================ */

/* Section lead-in heading used above the media sections on About */
.ds-section-lead {
  font-family: var(--ds-font);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ds-black);
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  margin: 48px 0 6px;
}
.ds-section-lead::after {
  content: "";
  display: block;
  width: 45px;
  height: 3px;
  background: var(--ds-blue);
  margin-top: 14px;
}

/* Small grey caption with a blue link, sits under a video/image */
.ds-media-caption {
  font-size: 0.95rem;
  color: var(--ds-grey);
  margin: 14px 0 0;
}
.ds-media-caption a {
  color: var(--ds-blue);
  font-weight: 600;
  text-decoration: none;
}
.ds-media-caption a:hover { text-decoration: underline; }

/* Idea 1 — single showreel in the flow of the About copy.
   Capped to the prose measure so it reads as part of the page, not a banner. */
.ds-about-showreel {
  max-width: 780px;
  margin: 34px 0 10px;
}
.ds-about-showreel .ds-video-wrapper { margin-bottom: 0; }

/* Idea 2 — shared studio two-up (reuses .ds-facilities-grid).
   .ds-studio-twoup is just a hook in case it needs to diverge later. */
.ds-studio-twoup { margin-top: 18px; }

/* Idea 5 — compact recent-work strip on About.
   The shared .ds-portfolio-grid is full-bleed (100vw) on Home/Work; here we
   rein it back into the page container as a tidy 3-up strip. */
.ds-about-work { margin-top: 10px; }
.ds-about-work .ds-portfolio-grid {
  width: 100%;
  left: auto;
  transform: none;
  grid-template-columns: repeat(3, 1fr);
  margin: 18px 0 0;
}
.ds-about-work-more { margin: 18px 0 0; }
@media (max-width: 600px) {
  .ds-about-work .ds-portfolio-grid { grid-template-columns: 1fr 1fr; }
}
.ds-about-work-more a {
  color: var(--ds-blue);
  font-weight: 600;
  text-decoration: none;
}
.ds-about-work-more a:hover { text-decoration: underline; }

/* Idea 3 — reciprocal deep-dive callout cards */
.ds-deepdive {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 30px 0 6px;
}
.ds-deepdive.ds-deepdive-single { grid-template-columns: 1fr; max-width: 560px; }
.ds-deepdive-card {
  display: block;
  padding: 26px 28px;
  background: #f6f8fa;
  border-left: 4px solid var(--ds-blue);
  text-decoration: none;
  color: var(--ds-black);
  transition: background 0.2s ease, transform 0.2s ease;
}
.ds-deepdive-card:hover {
  background: #eef4f8;
  transform: translateY(-2px);
}
.ds-deepdive-card .ds-deepdive-kicker {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ds-blue);
  margin: 0 0 8px;
}
.ds-deepdive-card .ds-deepdive-title {
  display: block;
  font-family: var(--ds-font);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--ds-black);
  margin: 0 0 6px;
}
.ds-deepdive-card .ds-deepdive-desc {
  display: block;
  font-size: 0.95rem;
  color: var(--ds-grey);
  margin: 0;
  line-height: 1.5;
}
.ds-deepdive-card .ds-deepdive-arrow {
  color: var(--ds-blue);
  font-weight: 700;
}

@media (max-width: 600px) {
  .ds-deepdive { grid-template-columns: 1fr; }
}

/* ============================================================
   HOMEPAGE CLIENTS — native blocks (Gallery + Vimeo embed), 2026-06-19
   The clients section was rebuilt from the [ds_clients] shortcode into editable
   inline blocks. These rules reproduce the old .ds-logo-grid + showreel look:
   a 7→4→3-col logo grid of 44px contained logos at 65% opacity, and a centred
   16:9 showreel. The gallery uses the class `ds-logo-gallery`, the embed
   `ds-showreel-embed` (set via the block's Advanced → Additional CSS class).
   ============================================================ */
.home .entry-content > .ds-logo-gallery,
.home .entry-content > .ds-showreel-embed {
  max-width: var(--ds-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 30px;
  padding-right: 30px;
  box-sizing: border-box;
}

/* Logo grid — match the old 7/4/3-col layout. Selectors include
   `.has-nested-images figure.wp-block-image` so they outrank core gallery CSS
   (which otherwise forces the logo img height to auto and collapses it). */
.ds-logo-gallery.wp-block-gallery.has-nested-images {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 30px 40px;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 60px;
}
.ds-logo-gallery.wp-block-gallery.has-nested-images figure.wp-block-image {
  margin: 0;
  /* Core gallery shrink-wraps each figure to its content, collapsing the logo.
     Force it to fill the grid cell so the image can size to 44px tall. */
  width: 100% !important;
  max-width: 100% !important;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ds-logo-gallery.wp-block-gallery.has-nested-images figure.wp-block-image img {
  width: 100% !important;
  height: 44px !important;
  object-fit: contain;
  opacity: 0.65;
  transition: opacity 0.2s ease;
}
.ds-logo-gallery.wp-block-gallery.has-nested-images figure.wp-block-image img:hover { opacity: 1; }

@media (max-width: 900px) {
  .ds-logo-gallery.wp-block-gallery.has-nested-images { grid-template-columns: repeat(4, 1fr); gap: 24px 30px; }
}
@media (max-width: 600px) {
  .ds-logo-gallery.wp-block-gallery.has-nested-images { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .ds-logo-gallery.wp-block-gallery.has-nested-images figure.wp-block-image img { height: 36px; }
}

/* Showreel embed — bottom spacing to match the old clients section */
.ds-showreel-embed { margin: 0 auto 60px; }