/*
Theme Name: Ebstar Child Theme
Theme URI: https://www.figma.com/design/8msAEt21JX3jzFgqSV8eAP/Ebstar
Description: High-performance bespoke child theme built for Ebstar engineering.
Author: Ebstar
Template: underscores
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: ebstar
*/

/* =========================================================
   Design tokens — sourced from Figma "Ebstar" UI Sheet
   https://www.figma.com/design/8msAEt21JX3jzFgqSV8eAP/Ebstar?node-id=236-398
   ========================================================= */
:root {
    /* Colour palette (Figma variable names in comments) */
    --ebstar-color-bg: #FBFCFB;           /* Core White  — main web background */
    --ebstar-color-white: #FFFFFF;
    --ebstar-color-black: #0C0C0C;        /* Core Black  — body / heading text */
    --ebstar-color-charcoal: #1A1A1A;    /* Charcoal */
    --ebstar-color-slate: #4A4A4A;       /* Slate */
    --ebstar-color-cool-grey: #8A8A94;   /* Cool Grey */
    --ebstar-color-light-grey: #D8D8DD;  /* Light Grey */
    --ebstar-color-orange: #FF7633;      /* Core Orange — links, CTA border */
    --ebstar-color-red: #E1384D;         /* Core Red */
    --ebstar-color-purple: #9F62E6;      /* Core Purple */
    --ebstar-color-purple-light: #AC77E9; /* gradient stop */

    /* Primary gradient — CTA fill (purple -> red -> orange, left to right) */
    --ebstar-gradient-primary: linear-gradient(
        90deg,
        var(--ebstar-color-purple-light) 0%,
        var(--ebstar-color-red) 50%,
        var(--ebstar-color-orange) 100%
    );

    /* Typography — "Web font is Poppins" (Figma dev note) */
    --ebstar-font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ebstar-font-weight-light: 300;
    --ebstar-font-weight-regular: 400;
    --ebstar-font-weight-semibold: 600;
    --ebstar-font-weight-bold: 700;

    --ebstar-font-size-base: 16px;
    /* Heading scale from the UI Sheet: 66 / 38 / 26, fluid down to mobile */
    --ebstar-h1: clamp(2.5rem, 5vw + 1rem, 66px);
    --ebstar-h2: clamp(1.875rem, 3vw + 1rem, 38px);
    --ebstar-h3: clamp(1.375rem, 1.5vw + 1rem, 26px);

    /* Shape */
    --ebstar-radius-pill: 999px;
    --ebstar-shadow-btn: 0 7px 14px rgba(0, 0, 0, 0.05);
    --ebstar-shadow-btn-hover: 0 7px 18px rgba(0, 0, 0, 0.10);
    --ebstar-btn-glow: inset 0 0 120px rgba(204, 215, 255, 0.15);

    /* Layout — design is drawn at 1440 with an 80px gutter */
    --ebstar-container-max: 1440px;
    --ebstar-container-pad: clamp(20px, 5.56vw, 80px);

    /* Breakpoints (reference — drive the media queries below) */
    --breakpoint-mobile: 480px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
    --breakpoint-cinematic: 1440px;

    /* Section spacing scale — drives the Padding Top / Bottom sliders on
       every Page Content layout's Style tab (0 = none, 10 = largest). */
    --ebstar-space-0: 0;
    --ebstar-space-1: 0.5rem;
    --ebstar-space-2: 1rem;
    --ebstar-space-3: clamp(1.5rem, 3vw, 2rem);
    --ebstar-space-4: clamp(2rem, 4vw, 3rem);
    --ebstar-space-5: clamp(2.5rem, 5vw, 4rem);
    --ebstar-space-6: clamp(3rem, 6vw, 5rem);
    --ebstar-space-7: clamp(3.5rem, 7vw, 6rem);
    --ebstar-space-8: clamp(4rem, 8vw, 7rem);
    --ebstar-space-9: clamp(4.5rem, 9vw, 8rem);
    --ebstar-space-10: clamp(5rem, 10vw, 10rem);
}

/* Legacy aliases — the blueprint's header.php / footer.php / page.php still
   reference these var names in inline styles. Mapped onto the Figma palette so
   those templates render correctly until they're rebuilt against the
   --ebstar-* tokens. */
:root {
    --brand-primary: var(--ebstar-color-charcoal);
    --brand-accent: var(--ebstar-color-orange);
    --neutral-dark: var(--ebstar-color-black);
    --neutral-light: var(--ebstar-color-light-grey);
    --white: var(--ebstar-color-white);
    --font-heading: var(--ebstar-font-family);
    --font-body: var(--ebstar-font-family);
}

/* =========================================================
   Base
   ========================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--ebstar-color-bg);
    color: var(--ebstar-color-black);
    font-family: var(--ebstar-font-family);
    font-weight: var(--ebstar-font-weight-regular);
    font-size: var(--ebstar-font-size-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.5em;
    font-family: var(--ebstar-font-family);
    font-weight: var(--ebstar-font-weight-semibold);
    line-height: 1.2;
    color: var(--ebstar-color-black);
}

h1 { font-size: var(--ebstar-h1); }
h2 { font-size: var(--ebstar-h2); }
h3 { font-size: var(--ebstar-h3); }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }

p { margin: 0 0 1rem; }

img {
    max-width: 100%;
    height: auto;
}

/* =========================================================
   Links
   Figma dev note: on hover the cursor becomes the hand/finger point;
   links are Core Orange and underline on hover.
   ========================================================= */
a {
    color: var(--ebstar-color-orange);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

a:hover,
a:focus {
    color: var(--ebstar-color-orange);
    text-decoration: underline;
}

/* Arrow glyph shown after text links, buttons and CTAs.
   UI Sheet (node 236:398): the arrow sits on the up-right diagonal at rest and
   rotates to point straight right on hover. The glyph is drawn diagonally, so
   rest is 0deg and hover is a 45deg turn. */
.ebstar-cta-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    transform: rotate(0deg);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ebstar-cta-arrow svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Rotate whenever the thing the arrow lives in is hovered or keyboard-focused */
a:hover .ebstar-cta-arrow,
a:focus-visible .ebstar-cta-arrow,
button:hover .ebstar-cta-arrow,
button:focus-visible .ebstar-cta-arrow,
.btn-primary:hover .ebstar-cta-arrow,
.btn-primary:focus-visible .ebstar-cta-arrow,
.btn-outline:hover .ebstar-cta-arrow,
.btn-outline:focus-visible .ebstar-cta-arrow,
.ebstar-btn:hover .ebstar-cta-arrow,
.ebstar-btn:focus-visible .ebstar-cta-arrow {
    transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
    .ebstar-cta-arrow { transition: none; }
}

/* =========================================================
   Buttons
   Primary = gradient fill, white text, orange border, pill
   Outline = transparent fill, orange border, black text (fills on hover)
   ========================================================= */
.btn-primary,
.ebstar-btn,
button:not(.menu-toggle),
input[type="submit"],
input[type="button"],
.wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--ebstar-font-family);
    font-size: 16px;
    font-weight: var(--ebstar-font-weight-regular);
    line-height: normal;
    color: var(--ebstar-color-white);
    background: var(--ebstar-gradient-primary);
    border: 2px solid var(--ebstar-color-orange);
    border-radius: var(--ebstar-radius-pill);
    padding: 12px 32px;
    box-shadow: var(--ebstar-shadow-btn), var(--ebstar-btn-glow);
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.btn-primary:hover,
.ebstar-btn:hover,
button:not(.menu-toggle):hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.wpcf7-submit:hover {
    color: var(--ebstar-color-white);
    text-decoration: none;
    box-shadow: var(--ebstar-shadow-btn-hover), var(--ebstar-btn-glow);
    transform: translateY(-2px);
}

.btn-outline,
.ebstar-btn-outline {
    background: transparent;
    color: var(--ebstar-color-black);
    border: 2px solid var(--ebstar-color-orange);
    box-shadow: none;
}

.btn-outline:hover,
.ebstar-btn-outline:hover {
    color: var(--ebstar-color-white);
    background: var(--ebstar-gradient-primary);
    box-shadow: var(--ebstar-shadow-btn);
}

/* =========================================================
   Site header — Figma "Nav & drop down" (nodes 116:8715 / 169:1751)
   Sticky dark bar: utility strip + logo + centre nav capsule + Contact CTA
   ========================================================= */
.site-header {
    position: sticky;      /* Figma dev note: "Menu is a sticky nav." */
    top: 0;
    z-index: 1000;
    background: var(--ebstar-color-charcoal);
    color: var(--ebstar-color-white);
}

/* Overlay variant — transparent, laid over a dark hero on landing pages.
   Add class "overlay-active" to #masthead (or filter body_class) to use it. */
.site-header.overlay-active {
    position: absolute;
    inset: 0 0 auto 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 100%);
}

.site-header a { color: var(--ebstar-color-white); }
.site-header a:hover,
.site-header a:focus { color: var(--ebstar-color-white); }

/* --- Utility strip ------------------------------------------------------- */
.ebstar-utility-bar {
    display: flex;
    justify-content: flex-end;
    max-width: var(--ebstar-container-max);
    margin-inline: auto;
    padding: 10px var(--ebstar-container-pad) 0;
    font-size: 15px;
}

.ebstar-utility-menu {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ebstar-utility-menu li {
    position: relative;
    padding: 0 16px;
}

.ebstar-utility-menu li + li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    height: 14px;
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    transform: translateY(-50%);
}

.ebstar-utility-menu a { text-decoration: none; }
.ebstar-utility-menu a:hover { text-decoration: underline; }

/* --- Main bar --------------------------------------------------------- */
.ebstar-header-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: var(--ebstar-container-max);
    margin-inline: auto;
    padding: 14px var(--ebstar-container-pad);
}

/* Logo (custom-logo when set, otherwise the wordmark fallback) */
.site-branding {
    flex: 1 1 0;
}

.custom-logo,
.custom-logo-link img {
    display: block;
    height: auto;
    max-height: 44px;
    width: auto;
}

/* Header logo — the built-in ebstar mark, or an image set in Ebstar Settings */
.ebstar-logo {
    display: inline-flex;
    text-decoration: none;
}

.ebstar-logo:hover,
.ebstar-logo:focus { text-decoration: none; }

.ebstar-logo__img {
    display: block;
    height: 37px;          /* Figma logo is 180 x 36.8 */
    width: auto;
    max-height: 44px;
}

@media (max-width: 600px) {
    .ebstar-logo__img { height: 30px; }
}

/* --- Centre nav capsule --------------------------------------------------- */
.main-navigation {
    flex: 0 0 auto;
    width: auto;          /* override the _s parent's .main-navigation { width: 100% } */
}

#primary-menu {
    display: flex;
    align-items: center;
    gap: 2px;
    width: max-content;   /* hug the items instead of filling the row */
    max-width: 100%;
    margin: 0;
    padding: 6px 10px;
    list-style: none;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--ebstar-radius-pill);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: var(--ebstar-shadow-btn);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.main-navigation li {
    position: relative;
    margin: 0;
    padding: 0;
}

.main-navigation a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    font-size: 16px;
    line-height: normal;
    color: var(--ebstar-color-white);
    text-decoration: none;
    white-space: nowrap;
    border-radius: var(--ebstar-radius-pill);
    transition: background-color 0.2s ease;
}

.main-navigation li:hover > a,
.main-navigation li:focus-within > a,
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a {
    text-decoration: none;
    background: rgba(255, 255, 255, 0.12);
}

/* Caret on items that open a submenu */
.main-navigation .menu-item-has-children > a::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-top: -3px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.main-navigation .menu-item-has-children:hover > a::after,
.main-navigation .menu-item-has-children:focus-within > a::after {
    transform: translateY(2px) rotate(225deg);
}

/* --- Dropdown panel ----------------------------------------------------- */
.main-navigation ul ul.sub-menu {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    display: flex;              /* always laid out; shown/hidden via visibility */
    flex-direction: column;     /* stack the pills regardless of _s float rules */
    gap: 10px;
    min-width: 237px;
    margin: 0;
    padding: 14px;
    list-style: none;
    background: var(--ebstar-color-charcoal);
    border-radius: 18px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
    z-index: 99999;

    /* Toggle via visibility (not display) so the hide can be delayed —
       this, plus the .menu-item-has-children::after bridge below, stops the
       panel vanishing while the cursor crosses the gap from the parent. */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.25s;
}

.main-navigation li:hover > ul.sub-menu,
.main-navigation li:focus-within > ul.sub-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

/* Invisible bridge spanning the visual gap, so the pointer never leaves a
   hoverable area between the parent item and the panel. */
.main-navigation .menu-item-has-children::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 16px;
}

/* Notch pointing up at the parent item */
.main-navigation ul ul.sub-menu::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    width: 16px;
    height: 16px;
    background: inherit;
    border-radius: 3px;
    transform: translateX(-50%) rotate(45deg);
}

/* Submenu items = light-grey pills, gradient fill on hover / current */
.main-navigation ul ul.sub-menu li {
    float: none;
    width: 100%;
    margin: 0;
}

.main-navigation ul ul.sub-menu a {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 8px 20px;
    font-size: 16px;
    color: var(--ebstar-color-black);
    background: var(--ebstar-color-light-grey);
    border-radius: var(--ebstar-radius-pill);
    white-space: normal;
}

.main-navigation ul ul.sub-menu a:hover,
.main-navigation ul ul.sub-menu a:focus,
.main-navigation ul ul.sub-menu .current-menu-item > a {
    color: var(--ebstar-color-white);
    background: var(--ebstar-gradient-primary);
}

/* --- Contact CTA ------------------------------------------------------- */
.ebstar-header-cta {
    flex: 1 1 0;
    display: flex;
    justify-content: flex-end;
}

.ebstar-header-cta .btn-primary {
    padding: 11px 28px;
}

.ebstar-header-cta .btn-primary:hover {
    font-weight: var(--ebstar-font-weight-semibold);
}

/* --- Hamburger toggle (hidden until the capsule is collapsed) --------- */
.menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    cursor: pointer;
}

.menu-toggle__bar,
.menu-toggle__bar::before,
.menu-toggle__bar::after {
    content: "";
    display: block;
    width: 22px;
    height: 2px;
    background: var(--ebstar-color-white);
}

.menu-toggle__bar { position: relative; }
.menu-toggle__bar::before { position: absolute; top: -7px; left: 0; }
.menu-toggle__bar::after  { position: absolute; top: 7px; left: 0; }

@media (max-width: 1024px) {
    .menu-toggle { display: inline-flex; }

    .main-navigation #primary-menu { display: none; }

    .main-navigation.toggled #primary-menu {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        position: absolute;
        left: var(--ebstar-container-pad);
        right: var(--ebstar-container-pad);
        top: calc(100% + 8px);
        width: auto;
        padding: 12px;
        border: 0;
        border-radius: 18px;
        background: var(--ebstar-color-charcoal);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    /* neutralise the _s parent's floated submenu / list items */
    .main-navigation.toggled #primary-menu li { float: none; width: 100%; }
    .main-navigation.toggled #primary-menu a { display: flex; }
    .main-navigation.toggled #primary-menu .menu-item-has-children > a { justify-content: space-between; }
    .main-navigation.toggled #primary-menu .menu-item-has-children::after { content: none; }

    .main-navigation.toggled #primary-menu .sub-menu {
        position: static;
        display: flex;         /* keep flex so the 10px gap between pills holds */
        float: none;
        width: 100%;
        transform: none;
        min-width: 0;
        padding: 6px 0 0;
        box-shadow: none;
        background: transparent;
        /* no hover on touch — always shown inside the open panel */
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transition: none;
    }

    .main-navigation.toggled #primary-menu .sub-menu::before { display: none; }
    .main-navigation.toggled #primary-menu .sub-menu a { width: 100%; }
}

@media (max-width: 600px) {
    .ebstar-utility-bar { display: none; }
    .ebstar-header-inner { gap: 10px; }
    .ebstar-logo { font-size: 22px; }
    .menu-toggle { width: 40px; }
    .ebstar-header-cta .btn-primary { padding: 8px 16px; font-size: 14px; }
}

/* =========================================================
   Site footer — Figma "Footer" (node 28:9514)
   Dark panel, 4-part top row, divider, bottom bar, plus a
   decorative gradient wash + giant wordmark + spark bleeding off.
   ========================================================= */
.site-footer {
    position: relative;
    overflow: hidden;
    background: var(--ebstar-color-black);
    color: var(--ebstar-color-white);
}

.site-footer a {
    color: var(--ebstar-color-white);
}

.site-footer a:hover,
.site-footer a:focus {
    color: var(--ebstar-color-orange);
}

/* --- decorative layers ------------------------------------------------- */
/* Same layer recipe as the hero (Figma nodes 23:1719 / 23:1720), starting
   30.35% down the footer: black from the top fading downward, a diagonal
   wedge across the upper right, then the brand gradient. Keeping the upper
   part dark is what lets the white asterisk read against it. */
.site-footer__glow {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 69.65%;
    pointer-events: none;
    background-image:
        linear-gradient(181.32deg, rgb(12, 12, 12) 25.06%, rgba(12, 12, 12, 0.1) 98.07%),
        linear-gradient(229.6deg, rgb(0, 0, 0) 33.86%, rgba(0, 0, 0, 0) 68.67%),
        radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to left, #ff7633 0%, #e1384d 50%, #ac77e9 100%);
    background-size: cover, cover, 4px 4px, cover;
    background-repeat: no-repeat, no-repeat, repeat, no-repeat;
}

/* Wordmark + asterisk — Figma places them in flow below the bottom bar,
   spanning the container gutters and fully visible (never cropped). */
.site-footer__mark {
    position: relative;
    margin-top: clamp(28px, 5vw, 56px);
    pointer-events: none;
    user-select: none;
}

.site-footer__wordmark {
    display: block;
    font-family: var(--ebstar-font-family);
    font-weight: var(--ebstar-font-weight-bold);
    font-size: 24.4vw;          /* tuned so "ebstar" spans ~87% of the container, as in Figma */
    line-height: 0.78;
    letter-spacing: -0.04em;
    color: rgba(255, 255, 255, 0.16);
    white-space: nowrap;
}

/* Superscript position: up and right of the "r", per Figma */
.site-footer__asterisk {
    position: absolute;
    right: 0;
    bottom: 74%;
    width: 8.95%;
    height: auto;
    max-width: 124px;
}

/* --- content --------------------------------------------------------- */
.site-footer__inner {
    position: relative;
    z-index: 2;
    max-width: var(--ebstar-container-max);
    margin-inline: auto;
    padding: clamp(48px, 7vw, 88px) var(--ebstar-container-pad) clamp(28px, 3.9vw, 38px);
}

.site-footer__top {
    display: grid;
    grid-template-columns: minmax(300px, 1.5fr) 1fr 1fr 1.2fr;
    gap: 40px 48px;
    align-items: start;
}

.site-footer__tagline {
    margin: 0 0 clamp(28px, 4vw, 44px);
    font-size: var(--ebstar-h2);
    font-weight: var(--ebstar-font-weight-semibold);
    color: var(--ebstar-color-white);
}

.site-footer__lead .btn-primary {
    margin-top: 22px;
}

.site-footer__heading {
    margin: 0;
    font-size: 16px;
    font-weight: var(--ebstar-font-weight-semibold);
    color: var(--ebstar-color-white);
}

.site-footer__links,
.site-footer__locations {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.site-footer__links li,
.site-footer__locations li {
    margin: 0 0 8px;
    line-height: 1.7;
}

.site-footer__address {
    margin: 16px 0 12px;
    font-style: normal;
    line-height: 1.7;
}

.site-footer__contact-lines {
    margin: 0 0 4px;
    line-height: 1.9;
}

.site-footer__social {
    display: flex;
    gap: 16px;
    margin-top: 22px;
}

.site-footer__social-link {
    display: inline-flex;
    color: rgba(255, 255, 255, 0.8);
}

.site-footer__social-link:hover { color: var(--ebstar-color-white); }
.site-footer__social-link svg { display: block; width: 22px; height: 22px; }

/* --- newsletter (Contact Form 7) ------------------------------------- */
.ebstar-newsletter {
    margin-top: 26px;
    max-width: 460px;
}

.ebstar-newsletter__title {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: var(--ebstar-font-weight-semibold);
    color: var(--ebstar-color-white);
}

.ebstar-newsletter .wpcf7 { margin: 0; }

.ebstar-newsletter form.wpcf7-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 70px;
    padding: 4px 10px 4px 22px;
}

.ebstar-newsletter form.wpcf7-form > .hidden-fields-container,
.ebstar-newsletter form.wpcf7-form > .akismet-fields-container {
    display: none;
}

.ebstar-newsletter form.wpcf7-form > p {
    display: flex;
    flex: 1 1 100%;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.ebstar-newsletter .wpcf7-form-control-wrap {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}

.ebstar-newsletter input.wpcf7-form-control.wpcf7-email {
    width: 100%;
    padding: 10px 0;
    background: transparent;
    border: 0;
    color: var(--ebstar-color-white);
    font: 400 12px/1.4 var(--ebstar-font-family);
}

.ebstar-newsletter input.wpcf7-email::placeholder { color: rgba(255, 255, 255, 0.8); }
.ebstar-newsletter input.wpcf7-email:focus { outline: none; }

/* "Subscribe" = quiet text link with an arrow, not the global gradient button */
.ebstar-newsletter input.wpcf7-submit {
    flex: 0 0 auto;
    margin: 0;
    padding: 8px 24px 8px 10px;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 11 11 3M4.2 3H11v6.8' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 12px 12px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--ebstar-color-white);
    font: 300 12px/1 var(--ebstar-font-family);
    cursor: pointer;
}

/* Same 45deg turn as .ebstar-cta-arrow — an <input> has no child to rotate, so
   swap in the glyph pre-rotated inside the SVG instead. */
.ebstar-newsletter input.wpcf7-submit:hover,
.ebstar-newsletter input.wpcf7-submit:focus-visible {
    transform: none;
    box-shadow: none;
    color: var(--ebstar-color-orange);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 11 11 3M4.2 3H11v6.8' fill='none' stroke='%23ff7633' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' transform='rotate(45 7 7)'/%3E%3C/svg%3E");
}

.ebstar-newsletter__consent {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
}

.ebstar-newsletter__consent a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline;
}

.ebstar-newsletter .wpcf7-response-output {
    flex: 0 0 100%;
    order: 9;
    margin: 10px 2px 0 !important;
    padding: 8px 12px !important;
    border-radius: 8px;
    font-size: 12px;
}

.ebstar-newsletter .wpcf7-spinner { margin: 0 0 0 4px; }

.ebstar-newsletter .wpcf7-not-valid-tip {
    margin-top: 4px;
    font-size: 11px;
    color: #ffb3b3;
}

/* --- divider + bottom bar ------------------------------------------- */
.site-footer__divider {
    max-width: var(--ebstar-container-max);
    margin: clamp(32px, 5vw, 56px) auto 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px 24px;
    margin-top: 24px;
    font-size: 12px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.75);
}

.site-footer__bottom p { margin: 0; }

.site-footer__legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.site-footer__legal-links li + li::before {
    content: "|";
    margin-right: 8px;
    color: rgba(255, 255, 255, 0.4);
}

.site-footer__credit { white-space: nowrap; }

@media (max-width: 1024px) {
    .site-footer__top { grid-template-columns: 1fr 1fr; }
    .site-footer__lead { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
    .site-footer__top { grid-template-columns: 1fr; }
    .site-footer__bottom { flex-direction: column; }
    .ebstar-newsletter form.wpcf7-form { flex-wrap: wrap; border-radius: 22px; }
}

/* =========================================================
   Page builder — "Page Content" flexible-content layouts
   page.php -> template-parts/blocks/<layout>.php
   ========================================================= */
.ebstar-container {
    max-width: var(--ebstar-container-max);
    margin-inline: auto;
    padding-inline: var(--ebstar-container-pad);
}

.ebstar-section {
    position: relative;
}

/* --- Style tab: padding scale (section_pt / section_pb) ---------------- */
.ebstar-pt-0 { padding-top: var(--ebstar-space-0); }
.ebstar-pt-1 { padding-top: var(--ebstar-space-1); }
.ebstar-pt-2 { padding-top: var(--ebstar-space-2); }
.ebstar-pt-3 { padding-top: var(--ebstar-space-3); }
.ebstar-pt-4 { padding-top: var(--ebstar-space-4); }
.ebstar-pt-5 { padding-top: var(--ebstar-space-5); }
.ebstar-pt-6 { padding-top: var(--ebstar-space-6); }
.ebstar-pt-7 { padding-top: var(--ebstar-space-7); }
.ebstar-pt-8 { padding-top: var(--ebstar-space-8); }
.ebstar-pt-9 { padding-top: var(--ebstar-space-9); }
.ebstar-pt-10 { padding-top: var(--ebstar-space-10); }

.ebstar-pb-0 { padding-bottom: var(--ebstar-space-0); }
.ebstar-pb-1 { padding-bottom: var(--ebstar-space-1); }
.ebstar-pb-2 { padding-bottom: var(--ebstar-space-2); }
.ebstar-pb-3 { padding-bottom: var(--ebstar-space-3); }
.ebstar-pb-4 { padding-bottom: var(--ebstar-space-4); }
.ebstar-pb-5 { padding-bottom: var(--ebstar-space-5); }
.ebstar-pb-6 { padding-bottom: var(--ebstar-space-6); }
.ebstar-pb-7 { padding-bottom: var(--ebstar-space-7); }
.ebstar-pb-8 { padding-bottom: var(--ebstar-space-8); }
.ebstar-pb-9 { padding-bottom: var(--ebstar-space-9); }
.ebstar-pb-10 { padding-bottom: var(--ebstar-space-10); }

/* --- Style tab: background + text colour (section_bg / section_text) --- */
.ebstar-section.ebstar-has-bg { background-color: var(--ebstar-section-bg); }

.ebstar-section.ebstar-bg-gradient {
    background-color: transparent;
    background-image: var(--ebstar-gradient-primary);
}

.ebstar-has-text { color: var(--ebstar-section-text); }
.ebstar-has-text :is(h1, h2, h3, h4, h5, h6) { color: var(--ebstar-section-text); }
.ebstar-has-text a:not(.btn-primary):not(.btn-outline) {
    color: var(--ebstar-section-text);
    text-decoration: underline;
}

/* On a gradient section the primary button reads better solid white */
.ebstar-bg-gradient .btn-primary {
    background: var(--ebstar-color-white);
    border-color: var(--ebstar-color-white);
    color: var(--ebstar-color-black);
}

.ebstar-bg-gradient .btn-primary:hover {
    background: var(--ebstar-color-black);
    border-color: var(--ebstar-color-black);
    color: var(--ebstar-color-white);
}

/* Buttons row shared by future layouts */
.ebstar-block__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

/* Rich-text / prose */
.ebstar-prose {
    max-width: 70ch;
}

.ebstar-prose--narrow { max-width: 54ch; }
.ebstar-prose--wide { max-width: 92ch; }

.ebstar-prose > :first-child { margin-top: 0; }
.ebstar-prose > :last-child { margin-bottom: 0; }
.ebstar-prose p { margin: 0 0 1.1em; }
.ebstar-prose :is(h2, h3, h4) { margin: 1.6em 0 0.5em; }
.ebstar-prose ul, .ebstar-prose ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.ebstar-prose li { margin: 0 0 0.4em; }
.ebstar-prose img { border-radius: 10px; }
.ebstar-prose a { text-decoration: underline; }

/* Breadcrumbs — Figma 116:6943: "Home / Insights / Blogs / Blog Page".
   14px Poppins Light in Core Black, slash separators, no background band. */
.ebstar-breadcrumbs {
    background: none;
    font-size: 14px;
    font-weight: 300;
    text-transform: capitalize;
}

.ebstar-breadcrumbs .ebstar-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding-block: clamp(18px, 2.4vw, 32px);
}

.ebstar-breadcrumbs a,
.ebstar-breadcrumbs span {
    color: var(--ebstar-color-black);
}

.ebstar-breadcrumbs a { text-decoration: none; }
.ebstar-breadcrumbs a:hover,
.ebstar-breadcrumbs a:focus { color: var(--ebstar-color-orange); text-decoration: underline; }

.ebstar-breadcrumbs__current {
    color: var(--ebstar-color-black);
    font-weight: 300;
}

/* --- Blocks: text blocks ----------------------------------------------
   3/4 (28:8859), 2 column (28:8891), 2/3 column with headings (28:8908).
   Figma gutter between columns is 40px; body text is 16px/30px. */
.ebstar-text__heading {
    margin: 0 0 clamp(20px, 3vw, 34px);
    font-size: var(--ebstar-h2);          /* 38px */
    font-weight: var(--ebstar-font-weight-semibold);
}

.ebstar-text__body {
    font-size: 16px;
    line-height: 1.875;                   /* Figma 30px on 16px */
}

/* 3/4 Text Block — body runs to 838px of the 1280 container, as a ratio so it
   keeps its proportion as the container narrows */
.ebstar-block-text-34 .ebstar-text__body {
    max-width: 65.5%;
}

/* 2 Column Text Block — one flow of text split into two equal columns.
   40px gutter at the 1440 design width, scaled with the viewport. */
.ebstar-block-text-2col .ebstar-text__body {
    max-width: none;
    column-count: 2;
    column-gap: clamp(24px, 2.78vw, 40px);
}

/* Keep headings and list items from breaking across the column boundary */
.ebstar-block-text-2col .ebstar-text__body > * {
    break-inside: avoid-column;
}

.ebstar-block-text-2col .ebstar-text__body > :first-child {
    margin-top: 0;
}

@media (max-width: 782px) {
    .ebstar-block-text-2col .ebstar-text__body { column-count: 1; }
    .ebstar-block-text-34 .ebstar-text__body { max-width: none; }
}

/* Headed column grids */
.ebstar-text__grid {
    display: grid;
    gap: clamp(24px, 2.78vw, 40px);
}

.ebstar-text__grid--2 { grid-template-columns: repeat(2, 1fr); }
.ebstar-text__grid--3 { grid-template-columns: repeat(3, 1fr); }

.ebstar-text__col-heading {
    margin: 0 0 clamp(12px, 1.5vw, 18px);
    font-size: var(--ebstar-h3);          /* 26px */
    font-weight: var(--ebstar-font-weight-semibold);
}

.ebstar-text__col .ebstar-prose {
    max-width: none;
}

@media (max-width: 900px) {
    .ebstar-text__grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .ebstar-text__grid--2,
    .ebstar-text__grid--3 { grid-template-columns: 1fr; }
}

/* =========================================================
   Downloads (custom content type)
   ========================================================= */
.ebstar-download {
    max-width: var(--ebstar-post-col);
    margin-inline: auto;
}

.ebstar-download__head {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 24px);
}

.ebstar-download__icon {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.ebstar-download__heading { min-width: 0; }

.ebstar-download__title {
    margin: 0;
    font-size: var(--ebstar-h2);
    font-weight: var(--ebstar-font-weight-semibold);
    line-height: 1.25;
}

.ebstar-download__meta {
    margin: 6px 0 0;
    font-size: 16px;
    letter-spacing: -0.32px;
    color: color-mix(in srgb, var(--ebstar-color-cool-grey) 87%, transparent);
}

.ebstar-download__actions { margin-top: clamp(24px, 3vw, 34px); }

.ebstar-download__missing {
    margin-top: clamp(24px, 3vw, 34px);
    font-size: 16px;
    color: var(--ebstar-color-slate);
}

/* =========================================================
   "Our Downloads" block — page_content layout "downloads"
   Figma 28:8948 — three 400x243 cards, alternating Core Black / Slate
   ========================================================= */
.ebstar-downloads__title {
    margin: 0 0 clamp(28px, 3.2vw, 46px);
    font-size: var(--ebstar-h2);
    font-weight: var(--ebstar-font-weight-semibold);
    line-height: 1.2;
}

.ebstar-downloads__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* Every row the same height, not just every card within a row */
    grid-auto-rows: 1fr;
    gap: clamp(20px, 2.78vw, 40px);
}

.ebstar-download-card {
    position: relative;
    display: flex;
    flex-direction: column;
    /* 400x243 in the design, but as a floor rather than a fixed ratio: a
       title that wraps to two lines grows the card instead of pushing the
       links past the bottom padding. Grid stretch keeps the row level. */
    min-height: clamp(180px, 16.875vw, 243px);
    /* 30px / 42px / 37px of a 400px-wide card */
    padding: 10.5% 7.5% 9.25%;
    border-radius: 20px;
    color: var(--ebstar-color-bg);
    background: var(--ebstar-color-black);
}

.ebstar-download-card:nth-child(even) {
    background: var(--ebstar-color-slate);
}

.ebstar-download-card__icon {
    width: clamp(32px, 3vw, 41px);
    height: clamp(32px, 3vw, 41px);
    object-fit: contain;
}

.ebstar-download-card__title {
    /* Sits with the meta at the foot of the card, under the icon */
    margin: auto 0 0;
    font-size: var(--ebstar-h3);
    font-weight: var(--ebstar-font-weight-semibold);
    line-height: 1.2;
    color: inherit;
}

.ebstar-download-card__size {
    margin: 7px 0 0;
    font-size: 16px;
    font-weight: var(--ebstar-font-weight-light);
    letter-spacing: -0.32px;
    color: inherit;
}

.ebstar-download-card__get {
    display: inline-flex;
    align-items: center;
    /* Figma: 22px between the label and the arrow */
    gap: 22px;
    /* Only as wide as its own content, so the rest of the card stays inert */
    align-self: flex-start;
    font-size: 16px;
    line-height: 1.4;
    color: inherit;
    text-decoration: none;
    /* Padding cancelled by the margin — a bigger hit area, same position */
    padding: 8px;
    margin: -1px -8px -8px;
}

.ebstar-download-card__get:hover,
.ebstar-download-card__get:focus {
    color: inherit;
}

.ebstar-download-card__get:hover .ebstar-download-card__label,
.ebstar-download-card__get:focus-visible .ebstar-download-card__label {
    text-decoration: underline;
}

.ebstar-download-card__arrow {
    display: block;
    width: 18px;
    height: 18px;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ebstar-download-card__get:hover .ebstar-download-card__arrow,
.ebstar-download-card__get:focus-visible .ebstar-download-card__arrow {
    transform: translateY(3px);
}

.ebstar-download-card__get:focus-visible {
    outline: 2px solid var(--ebstar-color-orange);
    outline-offset: 0;
    border-radius: 6px;
}

@media (max-width: 900px) {
    .ebstar-downloads__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .ebstar-downloads__grid { grid-template-columns: 1fr; }
    .ebstar-download-card {
        min-height: 0;
        padding: 42px 30px 37px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ebstar-download-card__arrow { transition: none; }
}

/* =========================================================
   Testimonial Slider — page_content layout "testimonials"
   Figma 28:9300 — centred quote over black-into-brand-gradient
   ========================================================= */
.ebstar-block-testimonials {
    position: relative;
    color: var(--ebstar-section-text, var(--ebstar-color-bg));
}

/* The designed background, unless the Style tab picks its own colour */
.ebstar-block-testimonials:not(.ebstar-has-bg) {
    background-image:
        linear-gradient(187.79deg, rgb(0, 0, 0) 49.51%, rgba(0, 0, 0, 0) 100.12%),
        linear-gradient(to left, #ff7633 0%, #e1384d 50%, #ac77e9 100%);
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
}

.ebstar-testimonials {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ebstar-testimonials__viewport {
    display: grid;
    width: 100%;
    /* 1096 of the 1280 container in the design */
    max-width: 85.6%;
}

.ebstar-testimonials__slide {
    /* Every slide shares one cell, so the block is as tall as the longest
       quote and never jumps as the slider advances. */
    grid-area: 1 / 1;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

.ebstar-testimonials__slide.is-current {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.45s ease, visibility 0s linear 0s;
}

.ebstar-testimonials__quote {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: var(--ebstar-h2);
    font-weight: var(--ebstar-font-weight-semibold);
    line-height: 1.4;                              /* Figma: 320px over 6 lines */
    color: inherit;
}

.ebstar-testimonials__quote > *:first-child { margin-top: 0; }
.ebstar-testimonials__quote > *:last-child { margin-bottom: 0; }

/* Curly quotes come from the design, not the editor's copy */
.ebstar-testimonials__quote > *:first-child::before { content: "\201C"; }
.ebstar-testimonials__quote > *:last-child::after { content: "\201D"; }

/* The run the editor wraps in <span class="testimonial-highlight"> */
.testimonial-highlight {
    color: var(--ebstar-color-orange);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
    .testimonial-highlight {
        background-image: var(--ebstar-gradient-primary);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

.ebstar-testimonials__source {
    margin-top: 35px;                              /* Figma */
    font-size: 16px;
    font-weight: var(--ebstar-font-weight-regular);
    line-height: 1.2;
    color: inherit;
}

.ebstar-testimonials__name,
.ebstar-testimonials__role {
    display: block;
}

.ebstar-testimonials__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;                                      /* Figma pitch: 24.7px */
    margin-top: 68px;                              /* Figma */
}

/* Scoped past the global button rule, which would give these the CTA fill */
.ebstar-testimonials .ebstar-testimonials__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: var(--ebstar-radius-pill);
    background: none;
    box-shadow: none;
    cursor: pointer;
}

.ebstar-testimonials .ebstar-testimonials__dot::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ebstar-color-light-grey) 60%, transparent);
    transition: background-color 0.25s ease;
}

.ebstar-testimonials .ebstar-testimonials__dot:hover::before {
    background: color-mix(in srgb, var(--ebstar-color-bg) 80%, transparent);
}

.ebstar-testimonials .ebstar-testimonials__dot.is-current::before {
    background: var(--ebstar-color-bg);
}

.ebstar-testimonials .ebstar-testimonials__dot:hover,
.ebstar-testimonials .ebstar-testimonials__dot:focus {
    background: none;
    box-shadow: none;
    transform: none;
}

.ebstar-testimonials .ebstar-testimonials__dot:focus-visible {
    outline: 2px solid var(--ebstar-color-orange);
    outline-offset: 0;
}

@media (max-width: 900px) {
    .ebstar-testimonials__viewport { max-width: 100%; }
    .ebstar-testimonials__source { margin-top: clamp(24px, 4vw, 35px); }
    .ebstar-testimonials__dots { margin-top: clamp(36px, 6vw, 68px); }
}

@media (prefers-reduced-motion: reduce) {
    .ebstar-testimonials__slide,
    .ebstar-testimonials__slide.is-current { transition: none; }
    .ebstar-testimonials .ebstar-testimonials__dot::before { transition: none; }
}

/* =========================================================
   Gallery block — page_content layout "gallery"
   Figma 28:9566 — three 400x416 tiles per row, rounded 20px
   ========================================================= */
.ebstar-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 2.78vw, 40px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ebstar-gallery__item {
    margin: 0;
    list-style: none;
}

.ebstar-gallery__link {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    /* Figma tile proportion; the fill shows while the image loads */
    aspect-ratio: 400 / 416;
    background: var(--ebstar-color-black);
}

.ebstar-gallery__item:nth-child(even) .ebstar-gallery__link {
    background: var(--ebstar-color-slate);
}

.ebstar-gallery__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ebstar-gallery__link:hover .ebstar-gallery__img,
.ebstar-gallery__link:focus-visible .ebstar-gallery__img {
    transform: scale(1.04);
}

.ebstar-gallery__link:focus-visible {
    outline: 2px solid var(--ebstar-color-orange);
    outline-offset: 3px;
}

@media (max-width: 900px) {
    .ebstar-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .ebstar-gallery__grid { grid-template-columns: 1fr; }
}

/* --- Lightbox (assets/js/ebstar-lightbox.js) -------------------------- */
html.ebstar-lightbox-open { overflow: hidden; }

.ebstar-lightbox {
    /* The <dialog> fills the viewport so clicks outside the image close it */
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    padding: clamp(56px, 7vw, 88px) clamp(16px, 4vw, 64px) clamp(24px, 4vw, 56px);
    border: 0;
    background: transparent;
    color: var(--ebstar-color-bg);
    overflow: hidden;
}

.ebstar-lightbox::backdrop {
    background: rgba(12, 12, 12, 0.9);
    backdrop-filter: blur(4px);
}

.ebstar-lightbox[open] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 2vw, 24px);
}

.ebstar-lightbox__bar {
    position: absolute;
    inset: 0 clamp(16px, 4vw, 64px) auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: clamp(56px, 7vw, 88px);
}

.ebstar-lightbox__count {
    margin: 0;
    font-size: 16px;
    letter-spacing: -0.32px;
    color: color-mix(in srgb, var(--ebstar-color-bg) 72%, transparent);
}

.ebstar-lightbox__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: 0;
    min-width: 0;
    max-width: 100%;
    max-height: 100%;
}

.ebstar-lightbox__img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    /* Leave room for the caption under the image */
    max-height: calc(100% - 40px);
    border-radius: 20px;
    object-fit: contain;
    background: var(--ebstar-color-charcoal);
}

.ebstar-lightbox__caption {
    margin: 0;
    max-width: 70ch;
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
    color: color-mix(in srgb, var(--ebstar-color-bg) 80%, transparent);
}

/* Scoped past the global button rule (button:not(.menu-toggle)), which would
   otherwise give these the gradient CTA fill and its 12px/32px padding. */
.ebstar-lightbox .ebstar-lightbox__close,
.ebstar-lightbox .ebstar-lightbox__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--ebstar-color-bg) 28%, transparent);
    border-radius: var(--ebstar-radius-pill);
    background: color-mix(in srgb, var(--ebstar-color-black) 55%, transparent);
    box-shadow: none;
    color: var(--ebstar-color-bg);
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.ebstar-lightbox .ebstar-lightbox__close:hover,
.ebstar-lightbox .ebstar-lightbox__nav:hover {
    background: color-mix(in srgb, var(--ebstar-color-bg) 18%, transparent);
    border-color: color-mix(in srgb, var(--ebstar-color-bg) 55%, transparent);
    box-shadow: none;
    transform: none;
}

.ebstar-lightbox .ebstar-lightbox__close:focus-visible,
.ebstar-lightbox .ebstar-lightbox__nav:focus-visible {
    outline: 2px solid var(--ebstar-color-orange);
    outline-offset: 2px;
}

.ebstar-lightbox .ebstar-lightbox__close { width: 44px; height: 44px; }
.ebstar-lightbox .ebstar-lightbox__nav { width: 48px; height: 48px; }

.ebstar-lightbox .ebstar-lightbox__close svg { width: 20px; height: 20px; }
.ebstar-lightbox .ebstar-lightbox__nav svg { width: 22px; height: 22px; }

@media (max-width: 600px) {
    /* Not enough width for side arrows — float them over the image corners */
    .ebstar-lightbox .ebstar-lightbox__nav {
        position: absolute;
        bottom: clamp(24px, 4vw, 56px);
        width: 44px;
        height: 44px;
    }

    .ebstar-lightbox__nav--prev { left: clamp(16px, 4vw, 64px); }
    .ebstar-lightbox__nav--next { right: clamp(16px, 4vw, 64px); }

    .ebstar-lightbox__img { max-height: calc(100% - 80px); }
}

@media (prefers-reduced-motion: reduce) {
    .ebstar-gallery__img { transition: none; }
    .ebstar-gallery__link:hover .ebstar-gallery__img,
    .ebstar-gallery__link:focus-visible .ebstar-gallery__img { transform: none; }
}

/* =========================================================
   Blog index, archives and single posts
   Figma 116:6869 (Insights listing) and 116:6943 (Blog Content Page)
   ========================================================= */

/* Gradient page header — the 404 block's panel, left aligned */
.ebstar-block-hero-blog {
    min-height: clamp(420px, 64vh, 600px);
    --ebstar-hero-offset: 0.5;
    --ebstar-hero-darken: 197.65deg;
    --ebstar-hero-wedge: 225.12deg;
}

.ebstar-block-hero-blog .ebstar-hero__title {
    margin: 0;
    font-size: clamp(2rem, 4.2vw + 0.5rem, 58px);   /* Figma 58px */
    font-weight: var(--ebstar-font-weight-semibold);
    line-height: 1.2;
}

.ebstar-block-hero-blog .ebstar-hero__text {
    max-width: 510px;                               /* Figma */
}

/* --- Listing ---------------------------------------------------------- */
.ebstar-posts__heading {
    margin: 0 0 clamp(28px, 4vw, 52px);
    font-size: var(--ebstar-h2);                    /* 38px */
    font-weight: var(--ebstar-font-weight-semibold);
}

.ebstar-posts__description { margin: -20px 0 40px; }

/* Two columns of cards, 40px gutter, generous row gap (Figma ~74px) */
.ebstar-posts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(24px, 2.78vw, 40px);
    row-gap: clamp(40px, 5.14vw, 74px);
}

.ebstar-card__media {
    display: block;
    overflow: hidden;
    border-radius: 20px;
    background: var(--ebstar-color-black);
    aspect-ratio: 620 / 368;                        /* Figma */
}

.ebstar-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* Posts with no featured image keep their place in the grid */
.ebstar-card__media--placeholder {
    background-image: var(--ebstar-gradient-primary);
}

.ebstar-card .ebstar-blogs__meta { margin-top: 16px; }

.ebstar-card__title {
    margin: 6px 0 12px;
    font-size: 22px;                                /* Figma */
    font-weight: var(--ebstar-font-weight-semibold);
    line-height: 1.35;
}

.ebstar-card__title a { color: inherit; text-decoration: none; }
.ebstar-card__title a:hover,
.ebstar-card__title a:focus { color: inherit; text-decoration: underline; }

.ebstar-card__excerpt {
    margin: 0;
    font-size: 16px;
    line-height: 1.875;                             /* Figma 30px */
}

.ebstar-posts__empty { font-size: 16px; }

/* --- Pagination ------------------------------------------------------- */
.ebstar-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 16px 28px;
    margin-top: clamp(40px, 5vw, 72px);
}

.ebstar-pagination__count {
    margin: 0;
    font-size: 16px;
    font-weight: 300;                               /* Figma: Poppins Light */
    line-height: 1.5;
}

.ebstar-pagination__controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ebstar-pagination__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;                                    /* Figma */
    height: 46px;
    border-radius: 50%;
    background: var(--ebstar-color-light-grey);
    color: var(--ebstar-color-black);
    transition: background-color 0.2s ease;
}

.ebstar-pagination__btn svg { display: block; width: 18px; height: 18px; }
.ebstar-pagination__btn--prev svg { transform: rotate(180deg); }
.ebstar-pagination__btn:hover { background: var(--ebstar-color-white); color: var(--ebstar-color-black); }
.ebstar-pagination__btn.is-disabled { opacity: 0.35; }

/* --- Single post ------------------------------------------------------ */
/* Figma content column is 842 of the 1280 container — held as a ratio so it
   keeps its proportion as the container narrows. */
:root { --ebstar-post-col: 65.8%; }

.ebstar-post {
    max-width: var(--ebstar-post-col);
    margin-inline: auto;
}

.ebstar-post__title {
    margin: 0 0 10px;
    font-size: var(--ebstar-h2);                    /* 38px */
    font-weight: var(--ebstar-font-weight-semibold);
    line-height: 1.25;
}

.ebstar-post__media {
    margin: clamp(24px, 3vw, 40px) 0 clamp(28px, 4vw, 48px);
    overflow: hidden;
    border-radius: 20px;                            /* Figma */
    background: var(--ebstar-color-black);
    aspect-ratio: 841 / 499;                        /* Figma */
}

.ebstar-post__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.ebstar-post__content {
    max-width: none;
    font-size: 16px;
    line-height: 1.875;                             /* Figma 30px */
}

.ebstar-post__content :is(h2, h3, h4) {
    margin: 1.8em 0 0.6em;
    font-size: var(--ebstar-h3);                    /* 26px */
    font-weight: var(--ebstar-font-weight-semibold);
    line-height: 1.3;
}

.ebstar-post__content ul,
.ebstar-post__content ol { padding-left: 24px; }    /* Figma indent */

.ebstar-post__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    max-width: var(--ebstar-post-col);
    margin: clamp(36px, 5vw, 64px) auto 0;
    padding-top: clamp(24px, 3vw, 36px);
    border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}

.ebstar-post__nav-link--next { margin-left: auto; }

.ebstar-post__comments {
    max-width: var(--ebstar-post-col);
    margin: clamp(36px, 5vw, 64px) auto 0;
}

@media (max-width: 782px) {
    .ebstar-posts { grid-template-columns: 1fr; }
    .ebstar-pagination { justify-content: space-between; }
    :root { --ebstar-post-col: 100%; }
}

/* --- Block: Blogs Feature (Figma 28:9359) ------------------------------
   Header row, then the latest post large on the left and the next four
   listed on the right. Colours come from the section. */
.ebstar-blogs__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px 24px;
    margin-bottom: clamp(28px, 4vw, 52px);
}

.ebstar-blogs__title {
    margin: 0;
    font-size: var(--ebstar-h2);          /* 38px */
    font-weight: var(--ebstar-font-weight-semibold);
}

.ebstar-blogs__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(28px, 2.78vw, 40px);
    align-items: start;
}

/* --- shared media panels --------------------------------------------- */
.ebstar-blogs__media {
    display: block;
    overflow: hidden;
    border-radius: 20px;
    background: var(--ebstar-color-black);
}

.ebstar-blogs__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.ebstar-blogs__media--lead { aspect-ratio: 620 / 368; }   /* Figma */

/* 180 of the 620 column — kept as a ratio so it scales with the container */
.ebstar-blogs__media--thumb {
    flex: 0 0 29%;
    max-width: 180px;
    aspect-ratio: 180 / 108;              /* Figma */
}

/* --- meta line -------------------------------------------------------- */
.ebstar-blogs__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 16px;
    line-height: 1.875;                   /* Figma 30px */
    letter-spacing: -0.32px;              /* Figma */
    color: color-mix(in srgb, var(--ebstar-color-cool-grey) 87%, transparent);
}

/* --- lead post -------------------------------------------------------- */
.ebstar-blogs__lead .ebstar-blogs__meta { margin-top: 16px; }

.ebstar-blogs__lead-title {
    margin: 6px 0 12px;
    font-size: 22px;                      /* Figma */
    font-weight: var(--ebstar-font-weight-semibold);
    line-height: 1.35;
}

.ebstar-blogs__lead-title a,
.ebstar-blogs__item-title a {
    color: inherit;
    text-decoration: none;
}

.ebstar-blogs__lead-title a:hover,
.ebstar-blogs__lead-title a:focus,
.ebstar-blogs__item-title a:hover,
.ebstar-blogs__item-title a:focus {
    color: inherit;
    text-decoration: underline;
}

.ebstar-blogs__excerpt {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.6;
}

/* --- secondary list --------------------------------------------------- */
.ebstar-blogs__list {
    display: flex;
    flex-direction: column;
}

.ebstar-blogs__item {
    display: flex;
    align-items: flex-start;
    gap: 40px;                            /* Figma thumb -> text */
    padding-bottom: 22px;
    border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}

.ebstar-blogs__item + .ebstar-blogs__item { padding-top: 22px; }

.ebstar-blogs__item-body { flex: 1 1 auto; min-width: 0; }

.ebstar-blogs__item-title {
    margin: 4px 0 0;
    font-size: 22px;                      /* Figma */
    font-weight: var(--ebstar-font-weight-semibold);
    line-height: 1.35;
}

@media (max-width: 900px) {
    .ebstar-blogs__grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .ebstar-blogs__item { gap: 18px; }
    .ebstar-blogs__item-title { font-size: 18px; }
}

/* --- Block: Contact Form (Figma 28:9419) -------------------------------
   Gradient section, contact details left, frosted glass form card right. */
.ebstar-block-contact {
    position: relative;
    overflow: hidden;
    background: var(--ebstar-color-black);
    color: var(--ebstar-color-white);

    /* angles taken from the design's two overlay layers */
    --ebstar-hero-darken: 206.22deg;
    --ebstar-hero-wedge: 237.25deg;

    /* full header height of clearance when the header is laid over this block */
    --ebstar-hero-offset: 1;
}

.ebstar-contact__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(28px, 2.78vw, 40px);
    align-items: start;
}

.ebstar-contact__title {
    margin: 0 0 clamp(20px, 3vw, 34px);
    font-size: var(--ebstar-h2);              /* 38px */
    font-weight: var(--ebstar-font-weight-semibold);
    color: var(--ebstar-color-white);
}

.ebstar-contact__text {
    max-width: 620px;                         /* Figma */
    font-size: 16px;
    line-height: 1.6;
}

.ebstar-contact__text a { color: var(--ebstar-color-white); text-decoration: underline; }
.ebstar-contact__text a:hover { color: var(--ebstar-color-orange); }
.ebstar-contact__text strong { font-weight: var(--ebstar-font-weight-bold); }
.ebstar-contact__text > :last-child { margin-bottom: 0; }

.ebstar-contact__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    margin-top: clamp(24px, 3vw, 34px);
}

/* --- glass card ------------------------------------------------------- */
.ebstar-contact__card {
    padding: clamp(28px, 3vw, 40px) clamp(24px, 3.3vw, 47px);
    border: 1.425px solid rgba(255, 255, 255, 0.85);   /* Figma */
    border-radius: 20px;                                /* Figma */
    background-image: linear-gradient(180deg, rgba(46, 51, 90, 0) 0%, rgba(28, 27, 51, 0.1) 100%);
    box-shadow: var(--ebstar-shadow-btn), inset 0 0 142px rgba(204, 215, 255, 0.15);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.ebstar-contact__form-title {
    margin: 0 0 clamp(18px, 2vw, 26px);
    font-size: var(--ebstar-h3);              /* 26px */
    font-weight: var(--ebstar-font-weight-semibold);
    color: var(--ebstar-color-white);
}

.ebstar-contact__notice {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
}

/* --- Contact Form 7 fields inside the card ---------------------------- */
.ebstar-contact__card .wpcf7 { margin: 0; }
.ebstar-contact__card form.wpcf7-form > p { margin: 0; }   /* CF7's autop wrapper */

.ebstar-form__field { margin: 0 0 clamp(14px, 1.6vw, 20px); }

.ebstar-form__field label {
    display: block;
    margin-bottom: 6px;
    font-size: 16px;
    line-height: 24px;                        /* Figma */
    color: var(--ebstar-color-white);
}

.ebstar-form__field .wpcf7-form-control-wrap { display: block; }

.ebstar-contact__card input[type="text"],
.ebstar-contact__card input[type="email"],
.ebstar-contact__card input[type="tel"],
.ebstar-contact__card textarea {
    width: 100%;
    padding: 6px 20px;
    border: 0.5px solid var(--ebstar-color-white);      /* Figma */
    border-radius: 30px;                                /* Figma */
    background: transparent;
    color: var(--ebstar-color-white);
    font: 400 16px/1.5 var(--ebstar-font-family);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ebstar-contact__card input[type="text"],
.ebstar-contact__card input[type="email"],
.ebstar-contact__card input[type="tel"] {
    height: 35px;                                        /* Figma */
}

.ebstar-contact__card textarea {
    min-height: 112px;                                   /* Figma */
    padding: 12px 20px;
    border-radius: 10px;                                 /* Figma */
    resize: vertical;
}

.ebstar-contact__card :is(input, textarea)::placeholder { color: rgba(255, 255, 255, 0.6); }

.ebstar-contact__card :is(input, textarea):focus-visible {
    outline: none;
    border-color: var(--ebstar-color-orange);
    box-shadow: 0 0 0 1px var(--ebstar-color-orange);
}

/* Consent line and Submit sit below the card in the design */
.ebstar-contact__card .ebstar-form__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    margin: clamp(20px, 2.4vw, 30px) calc(clamp(24px, 3.3vw, 47px) * -1) calc(clamp(28px, 3vw, 40px) * -1);
    padding: 0 clamp(24px, 3.3vw, 47px);
}

.ebstar-form__consent { flex: 1 1 260px; }

.ebstar-form__consent .wpcf7-list-item { margin: 0; }

.ebstar-form__consent .wpcf7-list-item-label,
.ebstar-form__consent { font-size: 14px; line-height: 24px; color: var(--ebstar-color-white); }

.ebstar-contact__card input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    accent-color: var(--ebstar-color-orange);
}

.ebstar-contact__card input.wpcf7-submit {
    flex: 0 0 auto;
    height: 50px;                                        /* Figma */
    padding: 0 40px;
    font-weight: var(--ebstar-font-weight-semibold);
}

.ebstar-contact__card .wpcf7-not-valid-tip {
    margin-top: 4px;
    font-size: 12px;
    color: #ffb3b3;
}

.ebstar-contact__card .wpcf7-response-output {
    flex: 0 0 100%;
    margin: 14px 0 0 !important;
    padding: 10px 14px !important;
    border-radius: 10px;
    font-size: 14px;
    color: var(--ebstar-color-white);
}

@media (max-width: 900px) {
    .ebstar-contact__inner { grid-template-columns: 1fr; }
    .ebstar-contact__text { max-width: none; }
}

/* --- Block: Standard Accordion (Figma 28:9114) -------------------------
   Intro column beside a stack of <details> panels. Colours come from the
   section, so it works on the design's black as well as a light background. */
.ebstar-accordion__inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(28px, 2.78vw, 40px);
    align-items: start;
}

.ebstar-accordion__title {
    margin: 0 0 clamp(16px, 2vw, 26px);
    font-size: var(--ebstar-h2);          /* 38px */
    font-weight: var(--ebstar-font-weight-semibold);
}

.ebstar-accordion__text {
    max-width: 622px;                     /* Figma intro column */
    font-size: 16px;
    line-height: 1.6;
}

.ebstar-accordion__text > :last-child { margin-bottom: 0; }

.ebstar-accordion__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    margin-top: clamp(24px, 3vw, 34px);
}

/* --- panels ----------------------------------------------------------- */
.ebstar-accordion__item {
    border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}

.ebstar-accordion__summary {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 0;
    cursor: pointer;
    list-style: none;                     /* hide the native marker */
}

.ebstar-accordion__summary::-webkit-details-marker { display: none; }

.ebstar-accordion__summary:focus-visible {
    outline: 2px solid var(--ebstar-color-orange);
    outline-offset: 4px;
}

.ebstar-accordion__icon {
    flex: 0 0 auto;
    width: 41px;
    height: 41px;
    object-fit: contain;
}

.ebstar-accordion__heading {
    flex: 1 1 auto;
    font-family: var(--ebstar-font-family);
    font-size: var(--ebstar-h3);          /* 26px */
    font-weight: var(--ebstar-font-weight-semibold);
    line-height: 1.25;
}

/* Circular toggle — arrow points right when closed, down when open */
.ebstar-accordion__toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--ebstar-color-light-grey);
    color: var(--ebstar-color-black);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease;
}

.ebstar-accordion__toggle svg {
    display: block;
    width: 18px;
    height: 18px;
}

.ebstar-accordion__item[open] .ebstar-accordion__toggle {
    transform: rotate(90deg);
}

.ebstar-accordion__summary:hover .ebstar-accordion__toggle {
    background: var(--ebstar-color-white);
}

.ebstar-accordion__panel {
    /* line up with the heading, past the icon */
    padding: 0 0 22px calc(41px + 20px);
    max-width: 550px;                     /* Figma revealed-text width */
    font-size: 16px;
    line-height: 1.6;
}

.ebstar-accordion__panel > :first-child { margin-top: 0; }
.ebstar-accordion__panel > :last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
    .ebstar-accordion__toggle { transition: none; }
}

@media (max-width: 900px) {
    .ebstar-accordion__inner { grid-template-columns: 1fr; }
    .ebstar-accordion__text { max-width: none; }
}

@media (max-width: 600px) {
    .ebstar-accordion__summary { gap: 12px; }
    .ebstar-accordion__icon { width: 32px; height: 32px; }
    .ebstar-accordion__toggle { width: 38px; height: 38px; }
    .ebstar-accordion__panel { padding-left: 44px; }
}

/* --- Block: Text & Image (reversible) ----------------------------------
   Figma 28:8918 (image right) / 28:8926 (image left) — mirrored layouts, so
   the image_position field just flips the column order.
   Two equal columns, 40px gutter, image 619x580 with a 20px radius. */
.ebstar-text-image__inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(24px, 2.78vw, 40px);
    align-items: center;
}

.ebstar-text-image__media {
    overflow: hidden;
    border-radius: 20px;
    background: var(--ebstar-color-black);
}

.ebstar-text-image__media img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 619 / 580;   /* Figma panel proportion */
    object-fit: cover;
    border-radius: inherit;
}

/* Default (image right) puts the media after the text; "left" swaps them.
   Source order keeps the text first so it is read first. */
.ebstar-text-image--image-right .ebstar-text-image__media { order: 2; }
.ebstar-text-image--image-left .ebstar-text-image__media { order: -1; }

.ebstar-text-image__heading {
    margin: 0 0 clamp(16px, 2vw, 26px);
    font-size: var(--ebstar-h2);   /* 38px */
    font-weight: var(--ebstar-font-weight-semibold);
}

.ebstar-text-image__text {
    max-width: none;
    font-size: 16px;
    line-height: 1.875;            /* Figma 30px on 16px */
}

.ebstar-text-image__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    margin-top: clamp(24px, 3vw, 34px);
}

@media (max-width: 782px) {
    .ebstar-text-image__inner { grid-template-columns: 1fr; }

    /* Image leads on small screens whichever side it takes on desktop */
    .ebstar-text-image--image-right .ebstar-text-image__media,
    .ebstar-text-image--image-left .ebstar-text-image__media { order: -1; }
}

/* --- Blocks: Hero 1 (28:8205) and Hero 2 (28:8735) ---------------------
   Full-bleed openers. The site header is laid over them (body.ebstar-has-
   overlay-header) so they fill from the very top of the page. Hero 2 is the
   shorter inner-page variant and carries no arrow render. */
.ebstar-hero {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--ebstar-color-black);
    color: var(--ebstar-section-text, var(--ebstar-color-white));

    /* Wedge angles differ slightly between the two heroes (see below) */
    --ebstar-hero-darken: 200.46deg;
    --ebstar-hero-wedge: 229.67deg;
}

/* Tall enough that the overlaid header clears the vertically-centred content.
   --ebstar-hero-offset tunes how far below the header the copy is centred, so
   each hero lands on its Figma position (title at 38% / 35.4% of the section). */
.ebstar-block-hero-1 {
    min-height: clamp(600px, 88vh, 840px);
    --ebstar-hero-offset: 0.5;
}

/* Figma: 540px tall on a 1440 board, vs 674.5px for Hero 1 */
.ebstar-block-hero-2 {
    min-height: clamp(420px, 70vh, 620px);
    --ebstar-hero-offset: 1;
    --ebstar-hero-darken: 196.63deg;
    --ebstar-hero-wedge: 223.32deg;
}

/* 404 block (Figma 116:3281) — 575px tall, same gradient recipe, centred copy */
.ebstar-block-hero-404 {
    min-height: clamp(420px, 64vh, 600px);
    --ebstar-hero-offset: 0.5;
    --ebstar-hero-darken: 197.65deg;
    --ebstar-hero-wedge: 225.12deg;
}

/* Centred variant — used by the 404 block */
.ebstar-hero--centred .ebstar-hero__inner {
    text-align: center;
}

.ebstar-hero--centred .ebstar-hero__title {
    margin-inline: auto;
    font-size: clamp(2rem, 4.2vw + 0.5rem, 58px);   /* Figma 58px */
}

.ebstar-hero--centred .ebstar-hero__text {
    margin-inline: auto;
}

.ebstar-hero--centred .ebstar-hero__links {
    justify-content: center;
    margin-top: clamp(40px, 5.3vw, 76px);   /* Figma: 76px below the heading */
}

/* Background layers — Figma nodes 28:8207 / 28:8208, top layer first:
   1. black -> 10% black  (overall top-down darken)
   2. black -> transparent (diagonal wedge across the upper right)
   3. fine dot texture (stands in for the overlay-blended noise bitmap)
   4. brand gradient, orange at the right through red to purple at the left */
.ebstar-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(var(--ebstar-hero-darken), rgb(0, 0, 0) 25.93%, rgba(0, 0, 0, 0.1) 81.72%),
        linear-gradient(var(--ebstar-hero-wedge), rgb(0, 0, 0) 33.86%, rgba(0, 0, 0, 0) 68.67%),
        radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        var(--ebstar-hero-image, linear-gradient(to left, #ff7633 0%, #e1384d 50%, #ac77e9 100%));
    background-size: cover, cover, 4px 4px, cover;
    background-position: center, center, 0 0, center;
    background-repeat: no-repeat, no-repeat, repeat, no-repeat;
}

/* Glassy 3D arrow render on the right (Figma node 28:8209) — light-on-black
   asset composited with screen so the black drops out and the edges glow. */
/* Figma places the render at x 766.3 / y -49.9, 651.5 x 808.7 on a 1440 x 674.5
   hero — i.e. it starts above the hero's top edge and passes behind the nav. */
.ebstar-hero__arrow {
    position: absolute;
    z-index: 1;
    top: -7.4%;
    right: 1.5%;
    width: 45.2%;
    height: auto;
    max-width: none;
    mix-blend-mode: screen;
    pointer-events: none;
    user-select: none;
}

/* Style-tab background colour = tint over the hero image */
.ebstar-hero.ebstar-has-bg .ebstar-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ebstar-section-bg, transparent);
    opacity: 0.5;
}

.ebstar-hero.ebstar-bg-gradient .ebstar-hero__bg::after {
    background: var(--ebstar-gradient-primary);
    opacity: 0.55;
}

/* Full container width — the copy starts on the shared left gutter, in line
   with the logo, exactly as the header does (Figma: x = 80 on a 1440 board). */
.ebstar-hero__inner {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    width: 100%;   /* the section is a flex row — fill it, or margin-inline:auto centres the copy */
}

/* When the header is laid over the opening hero, Figma centres the copy in the
   space BELOW the header rather than in the section as a whole. Padding on the
   centred flex item shifts it down by half, which lands on the design's ~59%.
   --ebstar-header-h is refreshed from the real header height in ebstar.js. */
body.ebstar-has-overlay-header .ebstar-hero:first-of-type .ebstar-hero__inner,
body.ebstar-has-overlay-header .ebstar-block-contact:first-of-type .ebstar-contact__inner {
    padding-top: calc(var(--ebstar-header-h, 116px) * var(--ebstar-hero-offset, 1));
}

@media (max-width: 782px) {
    .ebstar-hero__arrow {
        top: auto;
        bottom: -6%;
        right: -20%;
        width: 78%;
        opacity: 0.5;
    }
}

.ebstar-hero__title {
    margin: 0;
    max-width: 981px;   /* Figma text box; the line itself runs to ~the "Resources" nav item */
    font-size: var(--ebstar-h1);
    color: var(--ebstar-section-text, var(--ebstar-color-white));
}

.ebstar-hero__text {
    margin-top: 8px;
    max-width: 510px;   /* Figma */
    font-size: 1rem;
    line-height: 1.75;
    color: var(--ebstar-section-text, rgba(255, 255, 255, 0.92));
}

.ebstar-hero__text p { margin: 0 0 0.8em; }
.ebstar-hero__text > :last-child { margin-bottom: 0; }

.ebstar-hero__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    margin-top: 34px;
}

/* Plain text link beside a button ("View our services"). Shared by the heroes
   and the Text & Image block, so it takes its colour from the section. */
.ebstar-textlink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    font-size: 16px;
    text-decoration: none;
}

.ebstar-textlink:hover,
.ebstar-textlink:focus {
    color: inherit;
    text-decoration: underline;
}

/* On the heroes the section colour is the light-on-dark hero text */
.ebstar-hero .ebstar-textlink {
    color: var(--ebstar-section-text, var(--ebstar-color-white));
}

/* --- Overlay header — only on pages that open with Hero 1 ------------- */
body.ebstar-has-overlay-header .site-header {
    position: fixed;
    inset: 0 0 auto 0;
    background: transparent;
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

body.ebstar-has-overlay-header .site-header.is-stuck {
    background: var(--ebstar-color-charcoal);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}

/* =========================================================
   Breakpoints
   ========================================================= */
@media (max-width: 480px) {
    .site-header { padding: 10px 15px; }
}

@media (min-width: 481px) and (max-width: 768px) {
    .flex-column-2, .flex-column-3 { flex: 0 0 100% !important; max-width: 100% !important; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .main-navigation { font-size: 14px; }
}

@media (min-width: 1440px) {
    .container { max-width: 1380px; margin: 0 auto; }
}