/* ============================================================
   HOUDINI WINDOW SITE STYLES v1.43
   Everything that makes houdiniwindow.com look like itself.
   Shared framework files are never edited; site-specific
   settings and overrides live here.
   v1.0: Pictorial header settings for the porthole image.
   v1.1: Header image scales to fill the panel and stays centred
         on the porthole at every screen size.
   v1.2: Header now matches the old Bootstrap prototype: height
         set by padding around the title rather than a fixed
         height, 30% dark overlay for legible white text, and
         the 8px hub-blue line along the bottom.
   v1.3: Highlight colour changed from thinkamigo orange to retro
         computer-screen green for the Cold War feel. Bright green
         on the dark navigation, footer and back-to-top; a deeper
         green for anything on the light eggshell background, so
         it stays readable.
   v1.4: Back-to-top button picks up the green on hover. The
         chassis styles this button with its own grey colours
         rather than the highlight setting, so it needs its own rule.
   v1.5: Navigation bar black instead of thinkamigo blue, including
         the drop-down menu on phones and tablets.
   v1.6: Phosphor glow on the navigation links when hovered or
         reached with the keyboard, fading in gently.
   v1.7: Navigation made black through the chassis's own colour
         token (--brand-primary) instead of separate rules. The
         chassis forces #main-nav's colour as important, so a plain
         rule here couldn't override it; setting the token can.
   v1.8: Brand colour tokens (--brand-primary black, --brand-orange
         green) moved into Houdini's own chassis.css :root, where
         each site's chassis copy sets its colours. Removed here so
         they're only set in one place.
   v1.9: Colour settings restored here, as in v1.7, so the green
         works whichever chassis copy is in the folder. Black set
         under both names the chassis versions use for the bar:
         --brand-primary (Whatever chassis) and --brand-blue
         (older thinkamigo chassis).
   v1.10: Nav link glow strengthened: three layered green halos
         (tight, medium, wide) so it reads like lit phosphor.
   v1.11: Back-to-top glows on hover to match: a green halo around
         the button and a glow on the chevron itself.
   v1.12: v1.11 glow removed. Back-to-top returned to the green
         arrow and faint green background from v1.10.
   v1.13: Glow on the chevron only; the button square is unchanged.
   v1.14: Button square keeps its original grey on hover (no green
         tint, no chassis orange). Only the chevron turns green and
         glows.
   v1.15: Green softened from neon #33ff33 to classic terminal
         green #20c20e, everywhere it appears.
   v1.16: Desktop logotype sized as a share of the screen width
         (36%, matching the old Bootstrap title), so it grows and
         shrinks with the porthole and always sits inside it.
   v1.17: v1.16 reversed. Logotype now a fixed 580px, as the old
         Bootstrap title was; only the porthole grows with the
         browser width. Shrinks only if the screen is narrower.
   v1.18: Strapline and credit matched to the old Bootstrap type:
         thin weight, 8px and 3px letter spacing, softened white,
         same sizes and gaps. Poppins in place of Roboto.
   v1.19: On phones the header becomes a square, as in the old
         Bootstrap version, so the whole porthole sits inside it.
         Capped at 460px tall so it doesn't tower on tablets.
   v1.20: Back-to-top chevron stays white on hover, for contrast
         against the grey square, with just a slight soft glow.
   v1.21: Same slight white glow on the nav logo when hovered or
         reached with the keyboard.
   v1.22: White hairline along the top of the header image,
         dividing it from the navigation bar.
   v1.23: Hairline moved from the header to the bottom of the
         navigation bar, so every page has it, and softened to a
         translucent white so it reads like a fine metal edge.
   v1.24: Matching translucent hairline along the bottom of the
         header image, just above the hub-blue bar.
   v1.25: Footer text links get the same phosphor glow as the
         top navigation links, for mouse and keyboard alike.
   v1.26: Card captions in retro-screen green. A deeper green than
         the nav's #20c20e, so the text stays readable on the white
         cards (#1a7f1a, contrast 5.1 to 1).
   v1.27: Feature page titles in the title-card style (option D):
         light spaced capitals with a short terminal-green line
         above, and a lighter standfirst beneath.
   v1.28: Feature titles in very dark terminal green, typed on once
         by type-on.js, with a dim green blinking underscore cursor.
   v1.29: Card captions lighten to a brighter terminal green when
         a card lights up on hover.
   v1.30: Picture captions on feature pages made smaller, lighter
         and a soft grey, so they sit quietly beneath the image.
   v1.31: Same caption style under inline videos. The play button
         on inline videos stays visible on phones (the shared
         theatre hides it on small screens) and brightens on hover.
   v1.32: Inline video gets a fine terminal-green outline on hover.
         New Play link under the standfirst, in the card greens,
         like the Play links on the thinkamigo.com video tiles.
   v1.33: Play link gets a green underline on hover, matching the
         navigation links' offset and thickness.
   v1.34: Green hairline edge around the white play triangle on
         inline videos, so it stays visible over bright images.
   v1.35: Inline video made clearly clickable: a proper round play
         button (dark disc, green ring, white triangle) always on
         show; on hover the button fills green and glows, the image
         brightens, and the frame lights up outline-then-glow like
         the home page cards.
   v1.36: Image no longer brightens or scales on hover. Stronger
         glow around the video frame once it lights up.
   v1.37: Play button disc stays dark on hover; only its ring
         brightens to terminal green with a soft glow.
   v1.38: No ring on the play button at rest; the green ring only
         appears on hover.
   v1.39: Play button much lighter at rest (faint disc, softer
         triangle) so the image shows through; on hover the disc
         darkens, the triangle goes full white and the ring appears.
   v1.40: Links in body text are dark terminal green instead of
         blue, underlined, brightening on hover. The chassis link
         colour (--link-accent) is also set to green, so anything
         else using it follows.
   v1.41: Send message button on the contact page restyled for
         Houdini: dark pill with a white label at rest; on hover
         and keyboard focus a terminal-green outline appears, then
         the glow lights up, like the home page cards and the
         inline video frame.
   v1.42: Contact page title in the same title-card style as the
         feature pages: light spaced capitals in dark terminal
         green, with the short green line above.
   v1.43: Home page video tile (Splashdown): a scaled-down version
         of the inline video play button on the tile image, and a
         Play link under the tile's description. Both light up
         with the card's glow on hover and keyboard focus.
   ============================================================ */

/* --- 1. SITE COLOURS --- */
:root {
    --hub-blue: #1a3a5a;

    /* Navigation bar colour, under both chassis names */
    --brand-primary: #000000;
    --brand-blue: #000000;

    /* Highlight colour: phosphor green */
    --brand-orange: #20c20e;

    /* Deeper green for highlights on light backgrounds */
    --highlight-on-light: #1e8f1e;

    /* Chassis link colour: dark terminal green instead of blue */
    --link-accent: #1a7f1a;

    --hero-position: center;
    --hero-text-colour: #ffffff;
}

/* --- 2. PICTORIAL HEADER, AS THE BOOTSTRAP PROTOTYPE --- */
/* hero.jpg is the old houdini-hub-orbit-still-v2.0.jpg, renamed.
   The header grows with its content, so on phones the stacked
   logotype makes it taller and the porthole stays in view. */
.site-hero {
    height: auto;
    padding: 80px 0;
    background-image: linear-gradient(#0000004d, #0000004d), url('assets/img/hero.jpg');
    background-size: cover;
    background-position: center center;
    border-bottom: 8px solid var(--hub-blue);
    box-shadow: inset 0 -1px 0 #ffffff59;
}

@media (max-width: 1080px) {
    .site-hero { height: auto; }
}

@media (max-width: 768px) {
    /* A square panel, like the Bootstrap version, so the whole
       porthole fits inside it; the title stays centred within */
    .site-hero {
        height: auto;
        aspect-ratio: 1 / 1;
        max-height: 460px;
        padding: 0;
        background-position: center center;
    }
}

/* Desktop logotype stays a fixed size, like the old Bootstrap title,
   while the porthole behind it grows with the browser width. It only
   shrinks if the screen itself is narrower than the logotype. */
.hero-logotype {
    width: 580px;
    max-width: 100%;
}

/* Strapline and credit, matched to the old Bootstrap version */
.site-hero-inner {
    gap: 0;
}

.hero-strapline {
    font-family: 'Poppins', sans-serif;
    font-size: 19px;
    font-weight: 200;
    text-transform: uppercase;
    letter-spacing: 8px;
    padding-left: 8px;
    color: #ffffffcc;
    margin: 15px 0 0 0;
}

.hero-credit {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 200;
    letter-spacing: 3px;
    padding-left: 3px;
    color: #ffffffb3;
    margin: 8px 0 0 0;
}

/* --- 3. BACK-TO-TOP BUTTON --- */
/* On hover the square stays its original grey; the white chevron just glows slightly */
.back-to-top:hover {
    background-color: #E0E0E099;
}

.chevron-up {
    transition: filter 0.25s ease-in-out;
}

.back-to-top:hover .chevron-up {
    filter: drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 4px #ffffffb3);
}

/* --- 4. NAVIGATION LINKS --- */
/* Phosphor glow on the navigation links, for mouse and keyboard alike */
.nav-links a {
    transition: text-shadow 0.25s ease-in-out;
}

.nav-links a:hover,
.nav-links a:focus-visible {
    text-shadow: 0 0 4px #20c20e, 0 0 10px #20c20ecc, 0 0 20px #20c20e99;
}

/* --- 5. NAVIGATION LOGO --- */
/* Same slight white glow as the back-to-top chevron */
.logo img {
    transition: filter 0.25s ease-in-out;
}

.logo a:hover img,
.logo a:focus-visible img {
    filter: drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 4px #ffffffb3);
}

/* --- 6. NAVIGATION HAIRLINE --- */
/* A fine translucent white edge under the nav bar, on every page */
#main-nav {
    border-bottom: 1px solid #ffffff59;
}

/* --- 7. FOOTER LINKS --- */
/* Same phosphor glow as the top navigation links */
.footer-nav-col a,
.footer-address a {
    transition: text-shadow 0.25s ease-in-out;
}

.footer-nav-col a:hover,
.footer-nav-col a:focus-visible,
.footer-address a:hover,
.footer-address a:focus-visible {
    text-shadow: 0 0 4px #20c20e, 0 0 10px #20c20ecc, 0 0 20px #20c20e99;
}

/* --- 8. CARD GRID --- */
/* Retro-screen green captions, deep enough to read on white cards */
:root {
    --card-title-colour: #1a7f1a;
    --card-title-hover: #2a9d2a;
}

/* --- 9. FEATURE PAGE TITLES (OPTION D) --- */
/* Title card: light spaced capitals, with a terminal-green accent line */
.content-page .text-rail h1,
.content-page .legal-content h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: 8px;
    text-transform: uppercase;
    color: #124d17;
}

.content-page .text-rail h1::before,
.content-page .legal-content h1::before {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    background-color: #1a7f1a;
    margin: 0 0 18px 0;
}

/* The contact page title sits a little lower above the form,
   matching the gap under the feature page titles */
.content-page .legal-content h1 {
    margin: 0 0 20px 0;
}

/* The standfirst: the first subheading straight after the title */
.content-page .text-rail h1 + h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 300;
    line-height: 1.5;
    color: #555555;
}

@media (max-width: 600px) {
    .content-page .text-rail h1,
    .content-page .legal-content h1 {
        font-size: 22px;
        letter-spacing: 5px;
    }

    .content-page .text-rail h1 + h2 {
        font-size: 18px;
    }
}

/* --- 10. TYPE-ON TITLE CURSOR --- */
/* Used with type-on.js: a dim terminal-green underscore that blinks
   after the last letter, like an old screen waiting for input */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.type-cursor {
    color: #2f8f2f;
    text-shadow: 0 0 3px #2f8f2f66;
    animation: cursor-blink 1s steps(1) infinite;
}

@keyframes cursor-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .type-cursor {
        animation: none;
    }
}

/* --- 11. FEATURE PAGE PICTURE CAPTIONS --- */
/* Smaller, lighter and softer than the shared feature style */
.content-page .story-inline-image .stone-caption,
.content-page .story-inline-video .stone-caption {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
    color: #666666;
}

@media (max-width: 600px) {
    .content-page .story-inline-image .stone-caption,
    .content-page .story-inline-video .stone-caption {
        font-size: 13px;
    }
}

/* --- 12. INLINE VIDEO PLAY BUTTON --- */
/* A round play button, always visible, on every screen size */

/* The disc behind the triangle */
.content-page .story-inline-video .theatre-thumb::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 84px;
    height: 84px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: #00000040;
    border: 2px solid #00000000;
    box-sizing: border-box;
    z-index: 1;
    pointer-events: none;
    transition: background-color 0.3s ease-out, border-color 0.3s ease-out, box-shadow 0.3s ease-out;
}

/* The triangle itself */
.content-page .story-inline-video .theatre-thumb::after {
    display: block;
    opacity: 0.6;
    filter: none;
    transition: opacity 0.3s ease-out;
    border-top-width: 16px;
    border-bottom-width: 16px;
    border-left-width: 26px;
    transform: translate(-35%, -50%);
}

/* The frame and image */
.content-page .story-inline-video .theatre-thumb {
    transition: box-shadow 0.3s ease-out;
}

/* Hover: the button's ring brightens and glows, and the frame
   lights up outline first, then glow */
.content-page .story-inline-video .theatre-card:hover .theatre-thumb::before {
    background-color: #000000a6;
    border-color: #20c20e;
    box-shadow: 0 0 8px #20c20e80;
}

.content-page .story-inline-video .theatre-card:hover .theatre-thumb::after {
    opacity: 1;
}

.content-page .story-inline-video .theatre-card:hover .theatre-thumb img {
    outline: none;
}

.content-page .story-inline-video .theatre-card:hover .theatre-thumb {
    box-shadow: 0 0 0 1px #20c20e, 0 0 12px #20c20e80, 0 0 24px #20c20e40;
    animation: video-light-up 0.9s ease-out;
}

@keyframes video-light-up {
    0%, 50% { box-shadow: 0 0 0 1px #20c20e, 0 0 0 #20c20e00, 0 0 0 #20c20e00; }
    100% { box-shadow: 0 0 0 1px #20c20e, 0 0 12px #20c20e80, 0 0 24px #20c20e40; }
}

@media (prefers-reduced-motion: reduce) {
    .content-page .story-inline-video .theatre-card:hover .theatre-thumb {
        animation: none;
    }
}

@media (max-width: 600px) {
    .content-page .story-inline-video .theatre-thumb::before {
        width: 64px;
        height: 64px;
    }

    .content-page .story-inline-video .theatre-thumb::after {
        border-top-width: 12px;
        border-bottom-width: 12px;
        border-left-width: 20px;
    }
}

/* --- 13. PLAY LINK UNDER THE STANDFIRST --- */
/* Opens the same video in the theatre, like the Play links on
   the thinkamigo.com video tiles, but in Houdini's greens */
.content-page .play-link {
    display: block;
    height: auto;
    margin: 0 0 25px 0;
}

.content-page .play-link .theatre-actions {
    margin: 0;
    padding: 0;
}

.content-page .play-link .res-link {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--card-title-colour);
    transition: color 0.3s ease-out;
}

.content-page .play-link:hover .res-link {
    color: var(--card-title-hover);
    text-decoration: underline;
    text-decoration-color: var(--card-title-hover);
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
}

/* --- 14. LINKS IN BODY TEXT --- */
/* Dark terminal green, underlined so they're easy to spot,
   brightening to the lighter green on hover */
.content-page .text-rail p a {
    color: #1a7f1a;
    text-decoration: underline;
    text-decoration-color: #1a7f1a;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 0.3s ease-out, text-decoration-color 0.3s ease-out;
}

.content-page .text-rail p a:hover,
.content-page .text-rail p a:focus-visible {
    color: #2a9d2a;
    text-decoration-color: #2a9d2a;
    text-decoration-thickness: 2px;
}

/* --- 15. CONTACT FORM BUTTON --- */
/* Dark pill at rest; outline first, then the phosphor glow */
.contact-form-refined .btn-contact-pill {
    display: inline-block;
    padding: 12px 40px;
    background-color: #000000;
    color: #ffffff;
    border: 1px solid #000000;
    border-radius: 50px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.05em;
    cursor: pointer;
    box-shadow: none;
    transition: border-color 0.25s ease-out, box-shadow 0.25s ease-out;
}

.contact-form-refined .btn-contact-pill:hover,
.contact-form-refined .btn-contact-pill:focus-visible {
    background-color: #000000;
    color: #ffffff;
    border-color: #20c20e;
    outline: none;
    box-shadow: 0 0 0 1px #20c20e, 0 0 12px #20c20e80, 0 0 24px #20c20e40;
    animation: button-light-up 0.9s ease-out;
}

@keyframes button-light-up {
    0%, 50% { box-shadow: 0 0 0 1px #20c20e, 0 0 0 #20c20e00, 0 0 0 #20c20e00; }
    100% { box-shadow: 0 0 0 1px #20c20e, 0 0 12px #20c20e80, 0 0 24px #20c20e40; }
}

@media (prefers-reduced-motion: reduce) {
    .contact-form-refined .btn-contact-pill:hover,
    .contact-form-refined .btn-contact-pill:focus-visible {
        animation: none;
    }
}

/* --- 16. HOME PAGE VIDEO TILE --- */
/* The Splashdown tile opens the theatre player directly. The play
   button is a smaller version of the inline video button (section
   12), and lights up in step with the card's glow. */
.grid-card-play {
    position: relative;
    line-height: 0;
}

/* The disc behind the triangle */
.grid-card-play::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: #00000040;
    border: 2px solid #00000000;
    box-sizing: border-box;
    z-index: 1;
    pointer-events: none;
    transition: background-color 0.3s ease-out, border-color 0.3s ease-out, box-shadow 0.3s ease-out;
}

/* The triangle itself */
.grid-card-play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: #00000000 #00000000 #00000000 #ffffff;
    transform: translate(-35%, -50%);
    opacity: 0.6;
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.3s ease-out;
}

/* Hover and keyboard focus: the ring lights up with the card's glow */
.grid-card:hover .grid-card-play::before,
.grid-card:focus-within .grid-card-play::before {
    background-color: #000000a6;
    border-color: #20c20e;
    box-shadow: 0 0 8px #20c20e80;
    transition-delay: 0.45s;
}

.grid-card:hover .grid-card-play::after,
.grid-card:focus-within .grid-card-play::after {
    opacity: 1;
    transition-delay: 0.45s;
}

/* The Play link under the description, in the caption greens */
.grid-card-caption .grid-card-play-link {
    margin: 10px 0 0 0;
    font-size: 15px;
    font-weight: 600;
}

.grid-card-caption .grid-card-play-link a {
    color: var(--card-title-colour);
    text-decoration: none;
    transition: color 0.3s ease-out;
}

.grid-card:hover .grid-card-caption .grid-card-play-link a,
.grid-card:focus-within .grid-card-caption .grid-card-play-link a {
    color: var(--card-title-hover);
    text-decoration: underline;
    text-decoration-color: var(--card-title-hover);
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
    transition-delay: 0.45s;
}

@media (prefers-reduced-motion: reduce) {
    .grid-card:hover .grid-card-play::before,
    .grid-card:focus-within .grid-card-play::before,
    .grid-card:hover .grid-card-play::after,
    .grid-card:focus-within .grid-card-play::after,
    .grid-card:hover .grid-card-caption .grid-card-play-link a,
    .grid-card:focus-within .grid-card-caption .grid-card-play-link a {
        transition-delay: 0s;
    }
}

/* Phones: a smaller button to suit the smaller tiles */
@media (max-width: 600px) {
    .grid-card-play::before {
        width: 40px;
        height: 40px;
    }

    .grid-card-play::after {
        border-width: 8px 0 8px 13px;
    }

    .grid-card-caption .grid-card-play-link {
        margin: 6px 0 0 0;
        font-size: 13px;
    }
}