/*
Theme Name: West Digital Main
Author: Antigravity
Description: A custom ACF-based theme for West Digital Post Production (westdigital.co.uk).
             Forked from West Digital Custom (the studios theme) — the SEO layer, image
             helpers and content tooling are shared, so a fix to one is usually worth
             copying to the other. See docs/WESTDIGITAL_MIGRATION_PLAN.md.
Version: 1.0.1
*/

/* PT Sans Caption for headings, PT Sans for running text — the faces the Elementor build
   used, so the rebuild keeps the site's voice. Caption is the sturdier of the two at
   display sizes; plain PT Sans is the one that reads well in a paragraph. */
@import url('https://fonts.googleapis.com/css2?family=PT+Sans+Caption:wght@400;700&family=PT+Sans:ital,wght@0,400;0,700;1,400&display=swap');

:root {
    --primary-color: #EC6826;   /* West Digital orange */
    --secondary-color: #353C40; /* charcoal — the old Elementor "primary" */
    --tertiary-color: #FFE7DB;  /* the deeper end of the peach fade, used for tinted sections */
    --bg-color: #FFEEE5;        /* the lighter end; body paints the fade over it */
    --accent-color: #B1C6D2;    /* pale blue, used sparingly for rules and quiet UI */
    --white: #ffffff;

    /* Unlike the studios theme, body copy here is NOT the display face. PT Sans Caption is
       drawn for small sizes and headings; PT Sans is the text face. Every heading, button
       and nav item asks for var(--font-display) explicitly, so changing one of these two
       lines moves exactly the half of the site you meant to move. */
    --font-display: 'PT Sans Caption', 'PT Sans', Verdana, sans-serif;
    --font-body: 'PT Sans', 'Trebuchet MS', Verdana, sans-serif;

    --ink: #23282B;
    --ink-body: #3D454A;
    --ink-muted: #6B767D;
    --rule: rgba(236, 104, 38, 0.15);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* The Elementor build ran a peach gradient across the whole page rather than a flat
       fill. background-color underneath it so anything that paints over the gradient
       (and any browser that skips it) still lands on peach rather than white. */
    background-color: var(--bg-color);
    background-image: linear-gradient(271deg, var(--tertiary-color) 0%, var(--bg-color) 57%);
    background-attachment: fixed;
    color: var(--secondary-color);
    font-family: var(--font-body);
    font-weight: 400;
    text-align: left;
    -webkit-font-smoothing: antialiased;
}

/* --- Navigation --- */
.site-header { position: absolute; top: 0; left: 0; width: 100%; padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; z-index: 10; }
.primary-menu { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.primary-menu > li { position: relative; }
.primary-menu a {
    color: var(--primary-color);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 500;
    text-transform: uppercase;
    transition: color 0.3s ease;
    display: block;
    padding: 10px 0;
}
.primary-menu a:hover { color: var(--white); }

/* Dropdown Styles */
.primary-menu .sub-menu {
    position: absolute; top: 100%; left: 0; background: rgba(255, 255, 255, 0.98); min-width: 220px;
    list-style: none; padding: 10px 0; margin: 0; box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s ease; z-index: 100;
    border-radius: 4px;
}
.primary-menu li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.primary-menu .sub-menu li { display: block; width: 100%; }
.primary-menu .sub-menu a {
    color: var(--primary-color); padding: 12px 20px; font-size: 1.1rem;
}
.primary-menu .sub-menu a:hover {
    background: rgba(242,103,34,0.1);
}
.primary-menu .menu-item-has-children > a::after {
    content: ' \25BC'; font-size: 0.6em; margin-left: 6px; vertical-align: middle;
}

/* --- Hero Section --- */
.hero-section {
    position: relative;
    /* min-height rather than a fixed height: the hero now carries a headline, lede
       and buttons, and must be allowed to grow past the viewport on small screens. */
    min-height: max(100vh, 600px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    padding-top: 110px; /* clears the absolutely-positioned header */
    padding-bottom: 50px;
}
.hero-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;
}
.hero-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2;
    /* Was a flat 15% wash, which was enough behind a logo but not behind a
       headline, lede and buttons over bright moving footage. Weighted toward
       the bottom, where the hero content actually sits. */
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.45) 0%,
        rgba(0,0,0,0.35) 35%,
        rgba(0,0,0,0.72) 100%
    );
}
.hero-content {
    /* 1180 rather than 1000. The headline needs 974px on one line at its full size, and a 1000px
       box minus its own 20px padding each side left 960px — so it wrapped by 14px while there was
       most of a screen going spare either side. Widening keeps the type at full size and leaves
       roughly five characters of headroom before it wraps again. */
    position: relative; z-index: 3; text-align: center; max-width: 1180px; padding: 0 20px;
}

/* Hero darkening variants (hero_slider "Image darkening" field).
   The shared .hero-overlay above is weighted for the VIDEO hero, which carries a headline, lede
   and buttons low in the frame and needs a heavy foot. A slider hero holds only a logo and a
   title, so the same wash just made the photography look nothing like the raw file — it was
   rendering the bottom of the image at 28% of its true brightness.

   These keep a little cover under the header, where the white nav sits, leave the middle of the
   picture alone, and lift again only under the title. Legibility comes mostly from the title's
   own text-shadow now, which costs the image nothing. */
.hero-overlay--none   { background: linear-gradient(to bottom, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0) 20%); }
.hero-overlay--light  { background: linear-gradient(to bottom, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0.06) 24%, rgba(0,0,0,0) 48%, rgba(0,0,0,0.20) 78%, rgba(0,0,0,0.46) 100%); }
.hero-overlay--medium { background: linear-gradient(to bottom, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.16) 24%, rgba(0,0,0,0.10) 48%, rgba(0,0,0,0.34) 78%, rgba(0,0,0,0.60) 100%); }
.hero-overlay--heavy  { background: linear-gradient(to bottom, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.32) 30%, rgba(0,0,0,0.42) 60%, rgba(0,0,0,0.60) 82%, rgba(0,0,0,0.76) 100%); }

.hero-large-logo {
    filter: drop-shadow(0 2px 12px rgba(0,0,0,0.45));
    width: 100%;
    max-width: 800px;
    height: auto;
    margin-bottom: 30px;
    display: block;
    margin-left: auto; margin-right: auto;
}
.hero-title {
    font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 700;
    line-height: 1.1; text-transform: uppercase; margin-bottom: 20px; letter-spacing: 0.02em; color: var(--white);
    /* Carries its own contrast so the overlay does not have to darken the whole photograph.
       Two shadows: a tight one for edge definition, a wide soft one for separation from busy areas. */
    text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 2px 18px rgba(0,0,0,0.45);
}
.hero-subtitle {
    font-size: clamp(1.2rem, 2.5vw, 1.8rem); font-weight: 500; font-family: var(--font-display);
    text-transform: uppercase; margin-top: 10px; color: var(--white); text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
    border: 0; padding: 0; margin: -1px;
}

/* --- Content Sections --- */
.container { max-width: 1000px; margin: 0 auto; padding: 0 20px; }
.section-title {
    font-family: var(--font-display); font-size: 2.5rem; text-transform: uppercase; text-align: center; margin-bottom: 40px; color: var(--primary-color);
}
.about-section, .facilities-section, .testimonials-section {
    padding: 60px 0; background-color: var(--bg-color);
}
.about-content {
    font-size: 1.1rem; line-height: 1.8; color: var(--secondary-color); text-align: center; font-weight: 500;
}
.about-content p { margin-bottom: 25px; }

/* Facilities */
.facilities-hero {
    border-radius: 20px; background-size: cover; background-position: center; text-align: center;
    padding: 100px 20px; margin-bottom: 50px; position: relative; overflow: hidden;
}
.facilities-hero::before {
    content: ''; position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.4); z-index: 1;
}
.facilities-hero h3 {
    position: relative; z-index: 2; font-family: var(--font-display); font-size: 2rem; color: var(--white);
    text-transform: uppercase; margin-bottom: 20px;
}
.btn-primary {
    position: relative; z-index: 2; display: inline-block; background: var(--primary-color); color: var(--white);
    font-family: var(--font-display); font-size: 1.5rem; text-transform: uppercase; padding: 15px 40px;
    border-radius: 8px; text-decoration: none; border: 2px solid var(--white); font-weight: 700;
}
.facilities-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
@media (max-width: 768px) { .facilities-grid { grid-template-columns: repeat(1, 1fr); } }
.facility-card {
    background-color: var(--primary-color); border-radius: 12px; height: 280px; position: relative;
    background-size: cover; background-position: center; overflow: hidden;
}
.facility-card::before {
    content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}
.facility-card.orange-bg::before { display: none; }
.facility-name {
    position: absolute; bottom: 20px; left: 20px; font-family: var(--font-display);
    font-size: 1.5rem; text-transform: uppercase; color: var(--white); line-height: 1.2;
}
.facility-name.center-text {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    text-align: center; width: 100%; font-size: 2rem; bottom: auto; line-height: 1.1;
}

/* Testimonials */
.testimonials-title { text-align: left; }
.testimonials-list { display: flex; flex-direction: column; gap: 60px; }
.testimonial-item { position: relative; padding-right: 50px; }
/* Quotes read as quotes, not as labels — uppercase condensed type is the wrong
   tool for a sentence someone actually said. */
.testimonial-item p {
    font-family: var(--font-display); font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    line-height: 1.35; color: var(--ink); font-weight: 500; margin-bottom: 22px;
    max-width: 800px;
}
.testimonial-item::after {
    content: '”'; position: absolute; right: 0; bottom: 0; font-family: var(--font-display);
    font-size: 120px; color: rgba(242,103,34,0.2); line-height: 0.5;
}
.testimonial-author { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-body); }
.author-name { font-weight: 700; color: var(--ink); font-size: 0.95rem; }
.author-company { color: var(--primary-color); font-size: 0.95rem; }

/* Rotating quotes.
   Base .is-rotating is just the normal stacked list — that's the fallback when
   JS is off or reduced motion is set (all quotes shown, no motion). The script
   adds .js-rotator, which switches to a cross-fade whose height follows the
   quote on screen, so a short quote never leaves a gap beneath it. */
.testimonials-list.is-rotating.js-rotator {
    position: relative;
    display: block;
    gap: 0;
    transition: height 0.45s ease;
    overflow: hidden;
}
.testimonials-list.is-rotating.js-rotator .testimonial-item {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
}
.testimonials-list.is-rotating.js-rotator .testimonial-item.is-shown {
    opacity: 1;
    pointer-events: auto;
}


/* --- Footer --- */
.site-footer { background-color: var(--secondary-color); color: var(--white); padding: 40px 20px; text-align: center; }
.footer-container { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; align-items: center; }
.footer-links, .footer-socials { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.site-footer a { color: var(--white); text-decoration: none; font-family: var(--font-display); font-size: 1.1rem; text-transform: uppercase; transition: color 0.3s ease; }
.site-footer a:hover { color: var(--primary-color); }
.footer-copyright { margin-top: 20px; font-size: 0.9rem; opacity: 0.7; }
@media (min-width: 768px) {
    .footer-container { flex-direction: row; justify-content: space-between; }
    .footer-copyright { margin-top: 0; }
}


/* ============================================================
   Homepage sections (wd-*)
   Prefixed to stay clear of Bootstrap 5, which wd-studios-plugin-v2
   loads site-wide and which owns .btn-*, .container, .accordion.
   ============================================================ */

.wd-section { padding: 100px 0; background-color: var(--bg-color); }
.wd-section--white { background-color: var(--white); }
/* Wider measure and roomier gutters than the legacy 1000px/20px container. */
.wd-section .container { max-width: 1100px; padding: 0 40px; }

/* Headings sit left, near-black, with a quiet orange eyebrow above them —
   orange is the accent, not the heading colour. */
.wd-section .section-title {
    text-align: left;
    color: var(--ink);
    font-size: clamp(1.7rem, 3.4vw, 2.7rem);
    font-weight: 800;
    line-height: 1.05;
    margin-bottom: 22px;
}
.wd-eyebrow {
    display: block;
    font-family: var(--font-display);
    font-size: 0.85rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 16px;
}

/* Hero headline: the keyword line leads at full size, the claim sits under it as
   a subhead. Both stay white — orange over the showreel video does not hold
   contrast. Sized in em so both track the clamp on .hero-title. */
.hero-title-lead {
    display: block; font-weight: 700;
    letter-spacing: 0.02em; margin-bottom: 0.18em;
}
.hero-title-emph {
    display: block; font-size: 0.52em; font-weight: 500;
    letter-spacing: 0.03em; line-height: 1.15; opacity: 0.95;
}
.hero-lede {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.6vw, 1.15rem); font-weight: 400; line-height: 1.6;
    color: rgba(255,255,255,0.88); max-width: 40rem; margin: 20px auto 0;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6); text-transform: none;
}

/* Buttons. Not .btn-primary: wd-studios-plugin-v2/css/style.css forces that one
   to #EC6826 with !important, which is why older call sites carry inline styles. */
.wd-btn {
    display: inline-block; background: var(--primary-color); color: var(--white);
    font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.03em; text-decoration: none;
    padding: 14px 32px; border: 2px solid var(--primary-color); border-radius: 8px;
    transition: background-color 0.25s ease, color 0.25s ease;
}
.wd-btn:hover, .wd-btn:focus-visible { background: var(--secondary-color); border-color: var(--secondary-color); color: var(--white); }
.wd-btn-outline { background: transparent; color: var(--white); border-color: var(--white); }
.wd-btn-outline:hover, .wd-btn-outline:focus-visible { background: var(--white); border-color: var(--white); color: var(--secondary-color); }
.wd-section .wd-btn-outline { color: var(--primary-color); border-color: var(--primary-color); }
.wd-section .wd-btn-outline:hover, .wd-section .wd-btn-outline:focus-visible { background: var(--primary-color); color: var(--white); }

.wd-cta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.wd-cta-row--hero { justify-content: center; }
.wd-note {
    margin-top: 24px; font-family: var(--font-display); font-size: 0.8rem; font-weight: 500;
    color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.12em;
}

/* Editor prose. The global `* { padding: 0 }` reset at the top of this file strips
   list indentation, so bullets must be drawn manually or they clip off the edge. */
/* Hero slider layers. These were inline on the elements, which meant a media query could not
   reach them — an inline style beats a stylesheet rule — and the phone layout below silently did
   nothing. Only the per-slide image, stacking order and animation stay inline, because those are
   generated per slide. */
.hero-slider-wrapper { position: relative; overflow: hidden; background: #000; }
.hero-slider-wrapper .slider-images { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.hero-slider-wrapper .slide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center; opacity: 1;
}
.hero-overlay { z-index: 2; }
.hero-content  { z-index: 3; }

/* ── Hero on a phone ───────────────────────────────────────────────────────
   A landscape photograph cannot fill a portrait window and still be seen: at
   390px wide against a 100vh hero, a 16:9 frame loses roughly three quarters of
   its width to the centre crop, so a shot of a room became a shot of whatever
   happened to be in the middle of it.

   So on a phone the picture is shown whole, at its own proportions — page.php
   hands CSS the first slide's real ratio — and the words move below it rather
   than sitting on top. Nothing is cropped and nothing is letterboxed. */
@media (max-width: 700px) {
    .hero-section {
        display: block;
        min-height: 0;
        padding: 0 0 34px;
        background: var(--bg-color);
        align-items: initial;
    }
    .hero-section .slider-images,
    .hero-section .hero-video {
        position: relative; inset: auto; top: auto; left: auto;
        width: 100%; height: auto;
        aspect-ratio: var(--wd-hero-ratio, 16 / 9);
        margin-top: 64px;   /* the header is absolutely positioned over the page */
        z-index: auto;
    }
    .hero-section .hero-video { object-fit: cover; }

    /* Nothing sits on the photograph any more, so it needs no darkening. */
    .hero-overlay { display: none; }

    .hero-content {
        position: static; z-index: auto;
        max-width: none; padding: 26px 22px 0; text-align: center;
    }
    .hero-title, .hero-subtitle { color: var(--ink); text-shadow: none; }
    .hero-lede { color: var(--ink-body); text-shadow: none; margin-top: 16px; }
    .hero-large-logo { filter: none; max-width: 230px; margin-bottom: 20px; }
    /* Outline buttons were drawn white to sit on footage; on the page ground they need ink. */
    .hero-content .wd-btn-outline { color: var(--primary-color); border-color: var(--primary-color); }
    .wd-cta-row--hero { justify-content: center; }
}

/* Shortcode sections carry apps (the planner, bookings, the profile form) that already set their
   own width, so this supplies the alignment and nothing else. Do not add a max-width here: it
   outranks the shortcode's own and stretched the Pod-To-Go form to the full container while the
   prose above it stayed at 720. */

/* ── Front-end text editing (only ever loaded for someone who can edit) ── */
#wd-editbar {
    position: fixed; right: 18px; bottom: 18px; z-index: 99999;
    display: flex; align-items: center; gap: 10px;
    background: #14100e; color: #fff; padding: 8px 10px 8px 14px; border-radius: 999px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.28); font-family: var(--font-display); font-size: 0.82rem;
}
#wd-editbar.is-bad { background: #7a1f1f; }
#wd-editbar button {
    font: inherit; border-radius: 999px; padding: 7px 15px; cursor: pointer; border: 0;
    letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
}
.wd-eb-main { background: var(--primary-color); color: #fff; }
.wd-eb-main.is-on { background: #fff; color: #14100e; }
.wd-eb-save { background: #2e9e5b; color: #fff; }
.wd-eb-ghost { background: transparent; color: rgba(255,255,255,0.75); border: 1px solid rgba(255,255,255,0.3) !important; }
.wd-eb-label { color: rgba(255,255,255,0.8); letter-spacing: 0.04em; padding-right: 4px; }

/* Outline, never border: a border would change layout and reflow the whole page the moment
   edit mode was armed. */
body.wd-editing [data-wd-key] { outline: 1px dashed rgba(242,103,34,0.5); outline-offset: 3px; cursor: text; }
body.wd-editing [data-wd-key]:hover { outline-style: solid; }
body.wd-editing [data-wd-key]:focus { outline: 2px solid var(--primary-color); outline-offset: 3px; }
/* Show the stored casing, not the CSS's. Otherwise staff retype headings in capitals to match
   what they can see, and the capitals get saved. */
body.wd-editing [data-wd-key] { text-transform: none !important; }
body.wd-editing [data-wd-key].wd-dirty { box-shadow: inset 3px 0 0 var(--primary-color); }
body.wd-editing [data-wd-key].wd-saved { outline-color: #2e9e5b; }
body.wd-editing [data-wd-key].wd-failed { outline: 2px solid #c0392b; }
/* The slider would move text out from under the caret. */
body.wd-editing .hero-slider-wrapper .slide { animation: none !important; }

@media (max-width: 600px) { #wd-editbar { right: 10px; bottom: 58px; font-size: 0.76rem; } }

#wd-edittools {
    position: absolute; z-index: 100000; display: flex; gap: 2px;
    background: #14100e; border-radius: 7px; padding: 3px; box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
#wd-edittools button {
    background: transparent; color: #fff; border: 0; border-radius: 5px; cursor: pointer;
    font: 600 0.78rem/1 var(--font-body); padding: 7px 10px;
}
#wd-edittools button:hover { background: var(--primary-color); }

/* ── Section backgrounds ──────────────────────────────────────────────────
   Peach is the default. White and the warm tint are light grounds, so everything keeps its normal
   ink. Dark inverts, which is why it needs its own block: the headings, prose, rules and outline
   buttons are all near-black or orange-on-light by default and would disappear. */
.wd-section--tint { background-color: var(--tertiary-color); }
.wd-section--tint .wd-eyebrow { color: var(--secondary-color); }

.wd-section--dark { background-color: var(--secondary-color); }
.wd-section--dark .section-title,
.wd-section--dark .wd-pricing-price,
.wd-section--dark .wd-card-name,
.wd-section--dark .wd-map-address { color: #fff; }
.wd-section--dark .wd-prose,
.wd-section--dark .wd-prose p,
.wd-section--dark .wd-rooms-intro,
.wd-section--dark .wd-pricing-item,
.wd-section--dark .wd-note,
.wd-section--dark .wd-record-hint,
.wd-section--dark .wd-pricing-footnote,
.wd-section--dark .wd-pricing-small,
.wd-section--dark .wd-card-blurb,
.wd-section--dark .wd-empty p { color: rgba(255,255,255,0.78); }
.wd-section--dark .wd-prose h3 { color: #fff; }
.wd-section--dark .wd-prose ul li { border-bottom-color: rgba(255,255,255,0.1); }
.wd-section--dark .wd-pricing-row { border-bottom-color: rgba(255,255,255,0.14); }
.wd-section--dark .wd-eyebrow,
.wd-section--dark .wd-pricing-heading { color: var(--tertiary-color); }
/* The outline button is orange-on-light everywhere else; on dark it needs to be white-on-dark. */
.wd-section--dark .wd-btn-outline { color: #fff; border-color: rgba(255,255,255,0.55); }
.wd-section--dark .wd-btn-outline:hover,
.wd-section--dark .wd-btn-outline:focus-visible { background: #fff; color: var(--secondary-color); border-color: #fff; }
/* Cards keep their own white ground, so only their frame needs to stop being a faint orange. */
.wd-section--dark .wd-card a,
.wd-section--dark .wd-pkg,
.wd-section--dark .wd-map-frame { border-color: rgba(255,255,255,0.16); }
.wd-section--dark .wd-empty { border-color: rgba(255,255,255,0.2); }
.wd-section--dark .wd-empty-head { color: #fff !important; }

.wd-rowctl { display: none; }
body.wd-editing .wd-rowctl {
    display: flex; gap: 2px; position: absolute; top: 4px; right: 4px; z-index: 40;
    background: rgba(20,16,14,0.88); border-radius: 6px; padding: 2px;
}
body.wd-editing .wd-rowctl button {
    background: transparent; color: #fff; border: 0; border-radius: 4px; cursor: pointer;
    font: 700 0.85rem/1 var(--font-body); padding: 4px 8px;
}
body.wd-editing .wd-rowctl button:hover { background: var(--primary-color); }
body.wd-editing .wd-rowctl button[data-r="del"]:hover { background: #c0392b; }
/* The FAQ answer must stay visible while editing, whatever the disclosure state. */
body.wd-editing details.wd-faq-item > .wd-faq-answer { display: block !important; }

/* Per-section controls, visible only in edit mode */
.wd-secctl { display: none; }
body.wd-editing .wd-secctl {
    display: flex; align-items: center; gap: 3px; position: absolute; top: 8px; right: 8px; z-index: 50;
    background: #14100e; border-radius: 8px; padding: 4px;
}
body.wd-editing .wd-secctl button {
    background: transparent; color: #fff; border: 0; border-radius: 5px; cursor: pointer;
    font: 600 0.72rem/1 var(--font-body); padding: 6px 8px; min-width: 26px;
}
body.wd-editing .wd-secctl button:hover:not(:disabled) { background: var(--primary-color); }
body.wd-editing .wd-secctl button:disabled { opacity: 0.25; cursor: default; }
body.wd-editing .wd-secctl button.is-on { background: rgba(255,255,255,0.18); }
.wd-secctl-txt { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; }
.wd-secctl-sep { width: 1px; height: 16px; background: rgba(255,255,255,0.2); margin: 0 3px; }
.wd-sw { display: block; width: 13px; height: 13px; border-radius: 3px; border: 1px solid rgba(255,255,255,0.45); }
.wd-sw-white { background: #fff; }
.wd-sw-peach { background: var(--bg-color); }
.wd-sw-tint { background: var(--tertiary-color); }
.wd-sw-dark { background: var(--secondary-color); }
.wd-sw-none { background: linear-gradient(135deg, #ddd 50%, #999 50%); }
.wd-sw-light { background: #b9b2aa; }
.wd-sw-medium { background: #6d675f; }
.wd-sw-heavy { background: #2a2622; }

/* --- Map + Getting Here --- */
.wd-mapgrid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: start; }
.wd-mapgrid-text .wd-prose { max-width: none; }   /* the column already sets the measure */
.wd-map-address {
    font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; line-height: 1.45;
    color: var(--ink); margin: 0 0 14px;
}
.wd-map-frame {
    position: relative; aspect-ratio: 4 / 3; overflow: hidden;
    border: 2px solid var(--rule); border-radius: 10px; background: #e8e2db;
}
.wd-map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.wd-map-link {
    display: inline-block; margin-top: 14px; text-decoration: none;
    font-family: var(--font-display); font-size: 0.82rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary-color);
}
.wd-map-link:hover, .wd-map-link:focus-visible { color: var(--secondary-color); }

@media (max-width: 860px) {
    .wd-mapgrid { grid-template-columns: 1fr; gap: 34px; }
    .wd-map-frame { aspect-ratio: 3 / 2; }
}

/* --- Video Grid (podcasts shot here) --- */
/* Rides on .wd-cards, so the grid, hover lift and image zoom are the room cards' — the difference
   is a 16:9 frame instead of 4:3, and a play badge so a card reads as a video before it is read. */
.wd-card-media--video { aspect-ratio: 16 / 9; position: relative; background: #14100e; }
.wd-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 62px; height: 44px; border-radius: 11px;
    background: rgba(20, 16, 14, 0.62);
    /* Backdrop blur keeps the badge legible over a busy frame without a heavy scrim. */
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
/* The triangle, drawn rather than shipped as an asset. */
.wd-play::after {
    content: ''; position: absolute; left: 52%; top: 50%; transform: translate(-50%, -50%);
    border-style: solid; border-width: 8px 0 8px 14px;
    border-color: transparent transparent transparent #fff;
}
.wd-card a:hover .wd-play, .wd-card a:focus-visible .wd-play {
    background: var(--primary-color); border-color: var(--primary-color);
    transform: translate(-50%, -50%) scale(1.08);
}
/* Slightly dim the frame so white type and the badge hold up over a bright thumbnail. */
.wd-card-media--video .wd-card-img { opacity: 0.92; transition: transform 0.4s ease, opacity 0.25s ease; }
.wd-card a:hover .wd-card-media--video .wd-card-img { opacity: 1; }
/* Episode titles run longer than room names, so let them breathe rather than shout. */
.wd-cards--video .wd-card-name { font-size: 1.08rem; letter-spacing: 0.02em; line-height: 1.25; }

@media (max-width: 900px) { .wd-cards--video { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .wd-cards--video { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
    .wd-card a:hover .wd-play { transform: translate(-50%, -50%); }
}

/* A section's heading field rendered as ordinary copy, for the times the line is a sentence
   rather than a title. Same measure and rhythm as the prose it now reads as. */
.wd-section-lede { margin-bottom: 28px; }
.wd-section-lede { font-size: 1.15rem; line-height: 1.7; color: var(--ink-body); }

/* --- Pricing Table --- */
.wd-pricing { max-width: 720px; }  /* flush left under the heading, like .wd-prose */
.wd-pricing-group + .wd-pricing-group { margin-top: 44px; }
.wd-pricing-heading {
    font-family: var(--font-display); font-size: 1.15rem; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--primary-color); margin: 0 0 6px;
}
.wd-pricing-rows { margin: 0; }
/* Item and price on one line, price hard right, with a rule between rows rather than a box
   around each one — a price list reads faster as a list than as a table of cells. */
.wd-pricing-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
    padding: 13px 0; border-bottom: 1px solid var(--rule);
}
.wd-pricing-row:last-child { border-bottom: 0; }
.wd-pricing-row dt { margin: 0; flex: 1 1 auto; }
.wd-pricing-item { font-size: 1.08rem; color: var(--ink-body); line-height: 1.45; }
.wd-pricing-small { display: block; font-size: 0.88rem; color: var(--ink-muted); margin-top: 3px; }
.wd-pricing-price {
    margin: 0; flex: 0 0 auto; white-space: nowrap;
    font-family: var(--font-display); font-weight: 600; font-size: 1.18rem; color: var(--ink);
}
.wd-pricing-footnote::before { content: '*'; margin-right: 0.35em; }
.wd-pricing-footnote {
    /* The asterisk is decoration, so CSS draws it. It used to be a literal "* " in the markup
       with a matching ltrim() on the value, which meant the rendered text was never exactly what was
       stored. */
    max-width: 720px; margin: 26px 0 0; padding-left: 1.1em; text-indent: -1.1em;
    font-size: 0.92rem; line-height: 1.55; color: var(--ink-muted);
}

@media (max-width: 560px) {
    /* Price drops under the item rather than being squeezed against it. */
    .wd-pricing-row { display: block; }
    .wd-pricing-price { margin-top: 4px; }
}

.wd-prose {
    font-family: var(--font-body);
    font-size: 1.15rem; line-height: 1.7; color: var(--ink-body);
    max-width: 720px; /* keeps the line length readable */
}
.wd-prose p { margin-bottom: 18px; }
.wd-prose p:last-child { margin-bottom: 0; }
.wd-prose h3 {
    font-family: var(--font-display); font-size: 1.35rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--primary-color);
    margin: 40px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--rule);
}
.wd-prose ul, .wd-prose ol { margin: 0 0 20px; padding-left: 0; list-style: none; }
.wd-prose ul li {
    position: relative; padding: 9px 0 9px 40px; line-height: 1.6;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
/* The studios theme used its cactus artwork as the list bullet. That is a studios motif and
   there is no equivalent here, so this is a plain mark drawn in CSS — no asset to deploy, no
   file to 404, and it takes the brand orange from the variable so a rebrand moves it too. */
.wd-prose ul li::before {
    content: ''; position: absolute; left: 2px; top: 15px;
    width: 8px; height: 8px;
    background: var(--primary-color);
    border-radius: 1px;
    transform: rotate(45deg);
}
.wd-prose ol { counter-reset: wd-ol; }
.wd-prose ol li { position: relative; padding: 8px 0 8px 24px; line-height: 1.6; counter-increment: wd-ol; }
.wd-prose ol li::before {
    content: counter(wd-ol) '.'; position: absolute; left: 0; top: 8px;
    color: var(--primary-color); font-weight: 600;
}
.wd-prose strong { font-weight: 700; }
.wd-prose a { color: var(--primary-color); }

/* Room list — every room links to its own page. */
.wd-rooms-intro { font-family: var(--font-body); font-size: 1.15rem; line-height: 1.7; color: var(--ink-muted); margin-bottom: 32px; max-width: 680px; }
.wd-rooms { list-style: none; padding-left: 0; display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
.wd-room a {
    display: block; height: 100%; text-decoration: none; color: var(--ink);
    background: var(--white); border: 2px solid var(--rule);
    border-left: 3px solid var(--primary-color);
    padding: 26px 28px; border-radius: 0 8px 8px 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wd-room a:hover, .wd-room a:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.08); }
.wd-room-name {
    display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink); margin-bottom: 8px;
}
.wd-room a:hover .wd-room-name, .wd-room a:focus-visible .wd-room-name { color: var(--primary-color); }
.wd-room-desc { display: block; font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--ink-muted); }

/* FAQ — native <details>, no JS. */
.wd-faq { max-width: 46rem; }
.wd-faq-item { border-bottom: 1px solid rgba(0,0,0,0.1); }
.wd-faq-item summary {
    cursor: pointer; list-style: none; padding: 20px 32px 20px 0; position: relative;
    font-family: var(--font-display); font-size: 1.15rem; font-weight: 600;
    line-height: 1.4; color: var(--ink);
}
.wd-faq-item summary::-webkit-details-marker { display: none; }
.wd-faq-item summary::after {
    content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    font-size: 1.5rem; line-height: 1; color: var(--primary-color);
}
.wd-faq-item[open] summary::after { content: '\2013'; }
.wd-faq-item summary:hover, .wd-faq-item summary:focus-visible { color: var(--primary-color); }
.wd-faq-answer { padding: 0 32px 20px 0; font-family: var(--font-body); font-size: 1.1rem; line-height: 1.7; color: var(--ink-body); max-width: 680px; }
.wd-faq-answer p { margin-bottom: 14px; }
.wd-faq-answer p:last-child { margin-bottom: 0; }

.wd-testimonial-footnote { margin-top: 40px; font-family: var(--font-body); font-size: 1.15rem; line-height: 1.6; color: var(--ink-body); }

@media (max-width: 768px) {
    .wd-rooms { grid-template-columns: 1fr; }
    .wd-cta-row { gap: 12px; }
    .wd-btn { padding: 12px 24px; font-size: 0.95rem; }
}


/* ── Room cards: image-led links through to each room ──────────────────────
   Images carry srcset (see wd_image()), so the aspect ratio is held by the
   container with object-fit rather than by a cropped WordPress size — that way
   it works for images already in the library, with no thumbnail regeneration. */
.wd-cards {
    list-style: none; padding-left: 0; margin: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.wd-card a {
    display: flex; flex-direction: column; height: 100%;
    text-decoration: none; color: var(--ink);
    background: var(--white); border: 2px solid var(--rule);
    border-radius: 10px; overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.wd-card a:hover, .wd-card a:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
    border-color: var(--primary-color);
}
.wd-card-media { display: block; aspect-ratio: 4 / 3; background: #e8e2db; overflow: hidden; }
.wd-card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.wd-card a:hover .wd-card-img { transform: scale(1.04); }
.wd-card-body { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 22px; flex: 1; }
.wd-card-name {
    font-family: var(--font-display); font-size: 1.2rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink);
}
.wd-card a:hover .wd-card-name { color: var(--primary-color); }
.wd-card-blurb { font-family: var(--font-body); font-size: 1rem; line-height: 1.55; color: var(--ink-muted); }
.wd-card-go {
    margin-top: auto; padding-top: 12px;
    font-family: var(--font-display); font-size: 0.78rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em; color: var(--primary-color);
}
@media (max-width: 900px) { .wd-cards { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 600px) { .wd-cards { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
    .wd-card a, .wd-card-img { transition: none; }
    .wd-card a:hover { transform: none; }
    .wd-card a:hover .wd-card-img { transform: none; }
}

/* Hero slider: hold on the first image for anyone who has asked for less motion.
   (A single image never animates at all — see the $is_sliding guard in page.php.) */
@media (prefers-reduced-motion: reduce) {
    .hero-slider-wrapper .slide { animation: none !important; opacity: 0 !important; }
    .hero-slider-wrapper .slide:first-child { opacity: 1 !important; }
}

/* Facility card images were CSS background-image, which can never carry srcset. They are now real
   <img> elements sitting behind the label — object-fit reproduces background-size:cover exactly,
   so the cards look unchanged while each device fetches an appropriately sized file. */
.facility-card .facility-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block; z-index: 0;
}
.facility-card::before { z-index: 1; }   /* keep the gradient above the image */
.facility-card .facility-name { z-index: 2; }
/* Pricing card images keep the dimensions they had as an inline-styled <img>. */
.wd-pricing-img {
    width: 100%; height: 250px; object-fit: cover; display: block;
    border-bottom: 2px solid var(--primary-color);
}
/* Gallery tiles: the inline height/radius the background-image version carried. */
.wd-gallery-tile { height: 300px; border-radius: 12px; overflow: hidden; }
.wd-gallery-tile::before { display: none; }   /* no gradient scrim — there is no label to protect */

/* ── Images inside a Content Section ──────────────────────────────────────
   The wysiwyg gives an editor no width control, so a screenshot pasted at its
   native size overflows the page on every viewport narrower than the image -
   and wp_kses_post() strips any inline style that tried to fix it per-image.
   Constraining here means it can only ever happen once.

   Ported from the studios theme (1.23.2), where the bug was found. Applies to
   service_blocks bodies here as well as content_section. */
.wd-prose img { max-width: 100%; height: auto; }


/* ==========================================================================
   westdigital.co.uk sections
   --------------------------------------------------------------------------
   Everything added for this fork. The blocks above came across from the studios
   theme; these five are the layouts this site needed that it did not have.
   ========================================================================== */

/* ── Hero ──────────────────────────────────────────────────────────────────
   The picture is a real <img> rather than a background-image so it can carry a
   srcset — a phone has no business downloading the 2000px file. It is pinned
   behind the copy with object-fit rather than being laid out, and --wd-hero-ratio
   comes from the picture's own dimensions (wd_image_ratio) so the mobile frame
   takes the shape of the photograph instead of cropping it to 16/9. */
.wd-hero {
    position: relative;
    display: grid;
    align-items: end;
    min-height: 72vh;
    isolation: isolate;
    overflow: hidden;
}
.wd-hero-media { position: absolute; inset: 0; z-index: -2; }
.wd-hero-img   { width: 100%; height: 100%; object-fit: cover; display: block; }

/* White text needs something behind it, and how much depends on the picture. */
.wd-hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(35,40,43,.35) 0%, rgba(35,40,43,.15) 45%, rgba(35,40,43,.75) 100%);
}
.wd-hero--none::after   { background: none; }
.wd-hero--light::after  { background: linear-gradient(180deg, rgba(35,40,43,.15) 0%, rgba(35,40,43,.45) 100%); }
.wd-hero--heavy::after  { background: linear-gradient(180deg, rgba(35,40,43,.55) 0%, rgba(35,40,43,.85) 100%); }

.wd-hero-body { padding: 80px 0 64px; color: var(--white); }
.wd-hero-logo { margin-bottom: 24px; }
.wd-hero-logo-img { max-width: 420px; width: 60%; height: auto; display: block; }
.wd-hero-headline {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.6vw, 3.4rem);
    font-weight: 700;
    line-height: 1.08;
    color: var(--white);
    max-width: 20ch;
    text-wrap: balance;
    margin-bottom: 18px;
}
.wd-hero-lede {
    font-family: var(--font-body);
    font-size: clamp(1.05rem, 1.7vw, 1.35rem);
    line-height: 1.5;
    color: var(--white);
    max-width: 52ch;
    margin-bottom: 28px;
}
.wd-hero .wd-cta-row { margin-top: 0; }

@media (max-width: 700px) {
    /* Rather than cropping a landscape photograph into a portrait window — which loses about
       three quarters of its width — the frame takes the picture's own shape. */
    .wd-hero { min-height: 0; aspect-ratio: var(--wd-hero-ratio, 16 / 9); }
    .wd-hero-body { padding: 40px 0 32px; }
    .wd-hero-logo-img { width: 70%; }
}

/* ── Service blocks ────────────────────────────────────────────────────────
   Picture and copy alternate sides. The alternation is done here rather than by
   emitting different markup per block, so the reading order stays
   picture-then-copy for a screen reader however the page looks. */
.wd-services { display: flex; flex-direction: column; gap: 64px; margin-top: 40px; }
.wd-service {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}
.wd-service:nth-child(even) .wd-service-media { order: 2; }
.wd-service-media { border-radius: 10px; overflow: hidden; }
.wd-service-img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 3; }
.wd-service-title {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 12px;
}
.wd-service-body .wd-btn { margin-top: 18px; }

@media (max-width: 800px) {
    .wd-service { grid-template-columns: 1fr; gap: 20px; }
    .wd-service:nth-child(even) .wd-service-media { order: 0; }
    .wd-services { gap: 48px; }
}

/* ── Feature grid ──────────────────────────────────────────────────────────
   Title-and-sentence items. No icons: these are commitments, and a stock glyph
   beside each would be decoration pretending to be information. */
.wd-features {
    list-style: none; padding: 0; margin: 40px 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
}
.wd-feature {
    background: var(--white);
    border-radius: 10px;
    padding: 24px 26px;
    border-top: 3px solid var(--primary-color);
}
.wd-feature-title {
    font-family: var(--font-display);
    font-size: 1.15rem; font-weight: 700;
    color: var(--ink); margin-bottom: 8px;
}
.wd-feature-text { font-family: var(--font-body); color: var(--ink-body); line-height: 1.55; }

/* ── Team grid ─────────────────────────────────────────────────────────── */
.wd-team {
    list-style: none; padding: 0; margin: 40px 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px 32px;
}
.wd-member-media { border-radius: 10px; overflow: hidden; margin-bottom: 16px; }
.wd-member-img   { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 3; }
.wd-member-name  {
    font-family: var(--font-display);
    font-size: 1.25rem; font-weight: 700;
    color: var(--ink); margin-bottom: 2px;
}
.wd-member-role  {
    font-family: var(--font-body); font-style: italic;
    color: var(--primary-color); margin-bottom: 10px;
}
.wd-member-bio   { font-family: var(--font-body); color: var(--ink-body); line-height: 1.55; font-size: .96rem; }

/* ── Work grid (showreels) ─────────────────────────────────────────────────
   The poster is what is on screen almost all the time; the video sits on top of
   it at zero opacity and is only faded in once it is actually playing, so a card
   never flashes black between the poster hiding and the first frame arriving. */
.wd-work {
    list-style: none; padding: 0; margin: 40px 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}
.wd-work-figure {
    position: relative; margin: 0;
    border-radius: 8px; overflow: hidden;
    background: var(--secondary-color);
    aspect-ratio: 16 / 9;
}
.wd-work-poster,
.wd-work-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.wd-work-video { opacity: 0; transition: opacity .25s ease; }
.wd-work-item.is-playing .wd-work-video { opacity: 1; }

.wd-work-title {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 10px 14px;
    font-family: var(--font-body);
    font-size: 1rem; line-height: 1.3;
    color: var(--white); text-align: center;
    background: rgba(35, 40, 43, .55);
    backdrop-filter: blur(2px);
}
.wd-work-item:hover .wd-work-figure,
.wd-work-item:focus-within .wd-work-figure {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    /* The script bails out too, so the poster is all there ever is. */
    .wd-work-video { display: none; }
}

/* ── Default page shell (no sections yet) ───────────────────────────────── */
.page-default-header  { padding: 40px 0; text-align: center; }
.page-default-header .section-title { color: var(--primary-color); }
.page-default-content { padding: 16px 0 64px; }

/* ── Footer ────────────────────────────────────────────────────────────────
   The studios footer was a single centred row. This one carries the address and
   phone as well, so it is a two-column block with the copyright underneath. */
.footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 28px 48px;
    align-items: start;
}
.footer-heading {
    font-family: var(--font-display);
    font-size: 1.05rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--primary-color);
    margin-bottom: 10px;
}
.footer-address,
.footer-contact { font-family: var(--font-body); font-style: normal; line-height: 1.7; }
.footer-socials { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.footer-copyright {
    grid-column: 1 / -1;
    font-family: var(--font-body);
    font-size: .9rem;
    opacity: .75;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.12);
}

/* ── Dark-section overrides for the new layouts ────────────────────────────
   Every one of these renders dark-on-light by default, so without this block a
   section set to "Dark" in the admin would be black text on charcoal. This is
   the list that has to grow whenever a new layout introduces a class name. */
.wd-section--dark .wd-service-title,
.wd-section--dark .wd-member-name,
.wd-section--dark .wd-feature-title { color: var(--white); }
.wd-section--dark .wd-member-bio,
.wd-section--dark .wd-feature-text,
.wd-section--dark .wd-service-body .wd-prose,
.wd-section--dark .wd-service-body .wd-prose p { color: rgba(255,255,255,.82); }
.wd-section--dark .wd-feature { background: rgba(255,255,255,.06); }
.wd-section--dark .wd-member-role { color: var(--tertiary-color); }

/* The hero can be a video instead of a photograph — the homepage showreel. It sits in
   the same layer as .wd-hero-img and is cropped the same way, so the overlay, the ratio
   variable and the copy on top all behave identically whichever one is present. */
.wd-hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Reduced motion is handled in JS, not here: hiding the <video> would hide its poster
   with it and leave flat colour, which is worse than the still it was meant to show. */

/* ── Video hero — full frame, everything centred at the foot ───────────────
   Only the video hero. A photograph hero on an interior page should stay the
   band it is; it is the showreel that earns a whole screen.

   100svh, not 100vh: on a phone 100vh is the viewport with the browser chrome
   RETRACTED, so the bottom-anchored copy sits behind the address bar until you
   scroll. svh is the smaller, always-visible height. vh stays as the fallback
   for anything that does not know svh. */
.wd-hero--video { min-height: 100vh; min-height: 100svh; }

.wd-hero--video .wd-hero-body { text-align: center; padding-bottom: 56px; }
.wd-hero--video .wd-hero-logo-img { margin-inline: auto; max-width: 260px; width: 42%; }
.wd-hero--video .wd-hero-headline {
    /* Smaller than a photo hero's. The video is the statement here; the words
       label it rather than competing with it. */
    font-size: clamp(1.5rem, 2.6vw, 2.25rem);
    max-width: 24ch;
    margin-inline: auto;
}
.wd-hero--video .wd-hero-lede { margin-inline: auto; }
.wd-hero--video .wd-cta-row { justify-content: center; }

@media (max-width: 700px) {
    /* The aspect-ratio crop above exists so a landscape PHOTOGRAPH is not cut to a
       portrait window. A full-frame video hero wants the opposite — the whole screen. */
    .wd-hero--video { min-height: 100svh; aspect-ratio: auto; }
    .wd-hero--video .wd-hero-logo-img { width: 62%; }
}

/* ── Footer corrections ────────────────────────────────────────────────────
   Two rules survived from the studios footer, which was a single centred row,
   and neither suits a two-column block:

     text-align: center on .site-footer — inherited by the address, the phone and
     the copyright, so they sat centred while the socials (a flex column) did not.

     text-transform: uppercase on EVERY .site-footer a — which is wanted on the
     social links and is why the email address was shouting HELLO@WESTDIGITAL.CO.UK. */
.site-footer { text-align: left; }
.site-footer a { text-transform: none; font-family: inherit; font-size: inherit; }
.footer-socials a {
    font-family: var(--font-display);
    font-size: 1.1rem;
    text-transform: uppercase;
}
.footer-address a,
.footer-contact a { text-decoration: underline; text-underline-offset: 2px; }

/* ── Blog ──────────────────────────────────────────────────────────────────
   One column, no sidebar. A newsletter story is read once, from a link, by
   someone who already knows what they came for — so the page's whole job is to
   get out of the way of the words.

   The measure is capped at 68ch rather than the section's 1100px: prose at full
   width is hard to track back along at the end of a line. */
.wd-post .container { max-width: 820px; }
.wd-post-head { margin-bottom: 8px; }
.wd-post-meta,
.wd-post-card-meta {
    font-family: var(--font-body);
    font-size: .95rem;
    opacity: .7;
    margin: 0 0 28px;
}
.wd-post-image { margin: 0 0 32px; }
.wd-post-image img { width: 100%; height: auto; display: block; border-radius: 8px; }
.wd-post-body { max-width: 68ch; }
.wd-post-body h2,
.wd-post-body h3 { font-family: var(--font-display); margin: 1.6em 0 .5em; }
.wd-post-body p { margin: 0 0 1.1em; }
.wd-post-body img { max-width: 100%; height: auto; border-radius: 8px; }
.wd-post-back { margin-top: 48px; }
.wd-post-back a { color: var(--primary-color); font-weight: 700; text-decoration: none; }
.wd-post-back a:hover { text-decoration: underline; }

.wd-post-list { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 36px; }
.wd-post-card { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 28px; align-items: start; }
.wd-post-card-media img { width: 100%; height: auto; display: block; border-radius: 8px; }
.wd-post-card-title { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 6px; }
.wd-post-card-title a { color: var(--secondary-color); text-decoration: none; }
.wd-post-card-title a:hover { color: var(--primary-color); }
.wd-post-card-excerpt { font-family: var(--font-body); line-height: 1.6; margin: 0; }

/* A card with no picture should not leave a 320px hole where one would have been. */
.wd-post-card:not(:has(.wd-post-card-media)) { grid-template-columns: minmax(0, 1fr); }

.wd-pagination { margin-top: 48px; }
.wd-pagination .page-numbers { padding: 6px 12px; text-decoration: none; }
.wd-pagination .current { color: var(--primary-color); font-weight: 700; }

@media (max-width: 700px) {
    .wd-post-card { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}