/* ============================================================
   ELSHAM PROPERTIES: site stylesheet
   Built on the approved design system (13 Sep 2026):
   C:\elsham-prop-agent\design-system\  (tokens, foundations, applications/web.md)
   One colour (Petrol), one typeface (Schibsted Grotesk), square, flat, hairline.
   ============================================================ */

:root {
    /* Brand: Petrol. 600 is the primary. 400 and lighter are never text on paper. */
    --ep-brand-50:  #F2F7F8;
    --ep-brand-100: #DAE9EB;
    --ep-brand-200: #B2D4DA;
    --ep-brand-300: #73BAC8;
    --ep-brand-500: #1B7789;
    --ep-brand-600: #0B4F5C;
    --ep-brand-700: #0A4651;
    --ep-brand-800: #083B45;
    --ep-brand-900: #062B33;
    /* Ink and surfaces */
    --ep-ink-900: #141718;
    --ep-ink-500: #4F5758;
    --ep-ink-400: #7C8485;
    --ep-ink-200: #C9CECD;
    --ep-ink-100: #ECEEEC;
    --ep-paper:     #F7F7F4;
    --ep-surface:   #FFFFFF;
    --ep-line:      #DADCD8;
    --ep-line-soft: #E8E9E6;
    /* Feedback: forms and system messages only */
    --ep-success-100: #E3F1E9; --ep-success-600: #1F6B45;
    --ep-warn-100:    #F8ECD6; --ep-warn-600:    #8A5300;
    --ep-danger-100:  #F8E2E0; --ep-danger-600:  #A3322C;
    /* Type, shape, motion, layout */
    --ep-font: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
    --ep-radius-ui: 2px;
    --ep-focus: 0 0 0 2px #FFFFFF, 0 0 0 4px #141718;
    --ep-dur-sm: 160ms;
    --ep-dur-md: 240ms;
    --ep-dur-lg: 480ms;
    --ep-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ep-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --nav-h: 72px;
    --max-w: 1200px;
    --gutter: 40px;

    /* Legacy names still referenced by admin screens and stored inline styles. Mapped, not removed. */
    --navy: var(--ep-brand-600);
    --navy-mid: var(--ep-brand-800);
    --blue: var(--ep-brand-600);
    --blue-light: var(--ep-brand-500);
    --white: #FFFFFF;
    --off-white: var(--ep-paper);
    --grey-light: var(--ep-ink-100);
    --grey: var(--ep-line);
    --text: var(--ep-ink-900);
    --text-mid: var(--ep-ink-500);
    --text-muted: var(--ep-ink-500);
    --border: var(--ep-line);
    --shadow-sm: none;
    --shadow: none;
    --shadow-lg: none;
    --radius: 2px;
    --radius-lg: 0px;
    --ease: all var(--ep-dur-sm) var(--ep-ease);
}
@media (max-width: 767px) { :root { --gutter: 20px; } }

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--ep-font); font-size: 17px; line-height: 28px;
    color: var(--ep-ink-900); background: var(--ep-paper);
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }

/* Links: always underlined. Petrol against ink measures 1.96, so colour alone cannot mark a link. */
a { color: var(--ep-brand-600); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ep-brand-800); text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: none; box-shadow: var(--ep-focus);
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4 { font-weight: 600; color: var(--ep-ink-900); text-wrap: balance; }
h1 { font-size: 44px; line-height: 50px; letter-spacing: -0.02em; }
h2 { font-size: 32px; line-height: 38px; letter-spacing: -0.015em; }
h3 { font-size: 24px; line-height: 30px; letter-spacing: -0.01em; }
h4 { font-size: 19px; line-height: 26px; }
p  { color: var(--ep-ink-900); max-width: 64ch; }
.eyebrow, .overline {
    display: inline-block; font-size: 12px; line-height: 16px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--ep-brand-600); margin-bottom: 8px;
}
.lead { font-size: 18px; line-height: 30px; color: var(--ep-ink-900); max-width: 60ch; }
.muted { color: var(--ep-ink-500); }
@media (max-width: 767px) {
    h1 { font-size: 34px; line-height: 40px; }
    h2 { font-size: 26px; line-height: 32px; }
    h3 { font-size: 21px; line-height: 28px; }
}

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 96px 0; }
.section + .section.bg-off-white, .section.bg-off-white + .section.bg-off-white { border-top: 1px solid var(--ep-line); }
.section-sm { padding: 64px 0; }
.bg-white     { background: var(--ep-surface); }
.bg-off-white { background: var(--ep-paper); }
.bg-grey      { background: var(--ep-paper); }
/* The builder still offers navy backgrounds; they render as the one Petrol surface. */
.bg-navy, .bg-navy-mid { background: var(--ep-brand-600); color: #FFFFFF; }
.bg-navy h2, .bg-navy h3, .bg-navy-mid h2, .bg-navy-mid h3 { color: #FFFFFF; }
.bg-navy p, .bg-navy-mid p, .bg-navy li, .bg-navy-mid li { color: var(--ep-brand-100); }
.bg-navy .eyebrow, .bg-navy-mid .eyebrow { color: var(--ep-brand-100); }
.bg-navy a, .bg-navy-mid a { color: #FFFFFF; }
/* Full brand background set (foundations/color.md) */
.bg-petrol-50  { background: var(--ep-brand-50); }
.bg-petrol-100 { background: var(--ep-brand-100); }
.bg-petrol-700 { background: var(--ep-brand-700); color: #FFFFFF; }
.bg-petrol-800 { background: var(--ep-brand-800); color: #FFFFFF; }
.bg-petrol-900 { background: var(--ep-brand-900); color: #FFFFFF; }
.bg-ink        { background: var(--ep-ink-900);   color: #FFFFFF; }
:is(.bg-petrol-700, .bg-petrol-800, .bg-petrol-900, .bg-ink) :is(h2, h3, a) { color: #FFFFFF; }
:is(.bg-petrol-700, .bg-petrol-800, .bg-petrol-900, .bg-ink) :is(p, li, .eyebrow, .pillar-num) { color: var(--ep-brand-100); }
:is(.bg-petrol-700, .bg-petrol-800, .bg-petrol-900, .bg-ink) .pillars::before { background: #FFFFFF; }
:is(.bg-petrol-700, .bg-petrol-800, .bg-petrol-900, .bg-ink) .pillar { border-bottom-color: rgba(255,255,255,.18); }
@media (max-width: 767px) { .section { padding: 64px 0; } }

.section-header { margin-bottom: 48px; display: grid; gap: 12px; justify-items: start; }
.section-header .eyebrow { margin-bottom: 0; }
.section-header.center { justify-items: center; text-align: center; }
.section-header.center .section-lead { margin: 0 auto; }
.section-lead { font-size: 18px; line-height: 30px; color: var(--ep-ink-500); max-width: 60ch; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 9999; height: var(--nav-h);
    background: var(--ep-paper); border-bottom: 1px solid var(--ep-line);
}
.nav-wrap {
    display: flex; align-items: center; gap: 32px; height: var(--nav-h);
    max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter);
}
.nav-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; margin-right: auto; }
.nav-logo svg { height: 40px; width: auto; display: block; }
.nav-logo:focus-visible { box-shadow: var(--ep-focus); }
.nav-links { display: none; align-items: center; gap: 28px; }
.nav-links a {
    font-size: 15px; line-height: 24px; font-weight: 500; color: var(--ep-ink-900);
    text-decoration: none; white-space: nowrap; padding: 4px 0 6px;
    background: linear-gradient(var(--ep-brand-600), var(--ep-brand-600)) left bottom / 0 2px no-repeat;
    transition: background-size var(--ep-dur-md) var(--ep-ease), color var(--ep-dur-sm) var(--ep-ease);
}
.nav-links a:hover { color: var(--ep-brand-600); background-size: 100% 2px; }
.nav-links a.active { color: var(--ep-brand-600); background-size: 100% 2px; }
.nav-cta {
    display: none; background: var(--ep-brand-600); color: #FFFFFF; text-decoration: none;
    padding: 10px 18px; border-radius: var(--ep-radius-ui); font-size: 15px; line-height: 24px; font-weight: 600;
    flex-shrink: 0; transition: background-color var(--ep-dur-sm) var(--ep-ease);
}
.nav-cta:hover { background: var(--ep-brand-800); color: #FFFFFF; }
.nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; background: none; border: 0; padding: 10px; flex-shrink: 0;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ep-ink-900); transition: transform var(--ep-dur-md) var(--ep-ease), opacity var(--ep-dur-md) var(--ep-ease); }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-mobile {
    display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 9998;
    background: var(--ep-paper); border-bottom: 1px solid var(--ep-line); padding: 16px var(--gutter) 24px;
}
.nav-mobile.open { display: block; animation: ep-drop var(--ep-dur-md) var(--ep-ease-in-out); }
.nav-mobile ul { margin-bottom: 16px; }
.nav-mobile ul li a {
    display: block; padding: 14px 0; font-size: 18px; font-weight: 500; color: var(--ep-ink-900);
    text-decoration: none; border-bottom: 1px solid var(--ep-line);
}
.nav-mobile ul li a.active { color: var(--ep-brand-600); }
.nav-mobile-cta {
    display: block; text-align: center; background: var(--ep-brand-600); color: #FFFFFF; text-decoration: none;
    padding: 14px; border-radius: var(--ep-radius-ui); font-weight: 600;
}
@media (min-width: 1024px) {
    .nav-links { display: flex; }
    .nav-cta { display: inline-flex; align-items: center; }
    .nav-toggle, .nav-mobile { display: none !important; }
}
.nav-dropdown { position: relative; display: inline-flex; align-items: center; }
.nav-arrow { font-size: 10px; margin-left: 4px; }
.nav-dropdown-menu {
    display: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 200px; z-index: 9999;
    background: var(--ep-surface); border: 1px solid var(--ep-line); padding: 8px 0;
}
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a { display: block; padding: 8px 16px; border: 0; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn, .form-submit {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 20px; border-radius: var(--ep-radius-ui); border: 1px solid transparent;
    font-size: 15px; line-height: 24px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background-color var(--ep-dur-sm) var(--ep-ease), border-color var(--ep-dur-sm) var(--ep-ease), color var(--ep-dur-sm) var(--ep-ease);
}
.btn-primary, .form-submit { background: var(--ep-brand-600); border-color: var(--ep-brand-600); color: #FFFFFF; }
.btn-primary:hover, .form-submit:hover { background: var(--ep-brand-800); border-color: var(--ep-brand-800); color: #FFFFFF; }
.btn-outline-dark { background: transparent; border-color: var(--ep-brand-600); color: var(--ep-brand-600); }
.btn-outline-dark:hover { background: var(--ep-brand-50); color: var(--ep-brand-800); }
/* On Petrol */
.btn-white { background: #FFFFFF; border-color: #FFFFFF; color: var(--ep-brand-600); }
.btn-white:hover { background: var(--ep-brand-100); border-color: var(--ep-brand-100); color: var(--ep-brand-800); }
.btn-outline { background: transparent; border-color: #FFFFFF; color: #FFFFFF; }
.btn-outline:hover { background: var(--ep-brand-800); color: #FFFFFF; }
.btn-sm { padding: 8px 14px; font-size: 14px; }
.btn[disabled], .form-submit[disabled] { opacity: .6; cursor: default; }
.btn svg { width: 18px; height: 18px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ============================================================
   HERO
   ============================================================ */
.hero, .page-hero { background: var(--ep-paper); border-bottom: 1px solid var(--ep-line); }
.hero { padding: 96px 0; }
.hero .hero-layout { display: grid; gap: 48px; align-items: center; }
.hero.has-image .hero-layout { grid-template-columns: 1fr; }
@media (min-width: 1024px) { .hero.has-image .hero-layout { grid-template-columns: 7fr 5fr; gap: 64px; } }
.hero-inner { display: grid; gap: 20px; justify-items: start; }
.hero-badge, .page-hero-badge { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ep-brand-600); }
.hero h1 { font-size: 60px; line-height: 64px; letter-spacing: -0.02em; max-width: 16ch; }
.hero .lead { color: var(--ep-ink-500); }
.hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.hero-media { border: 1px solid var(--ep-line); background: var(--ep-surface); }
.hero-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 767px) { .hero { padding: 56px 0 64px; } .hero h1 { font-size: 40px; line-height: 44px; } .hero-media img { aspect-ratio: 4 / 3; } }

.page-hero { padding: 80px 0 64px; }
.page-hero-inner { display: grid; gap: 16px; justify-items: start; }
.page-hero h1 { max-width: 22ch; }
.page-hero .lead { color: var(--ep-ink-500); margin-top: 4px; }
@media (max-width: 767px) { .page-hero { padding: 48px 0 40px; } }

/* ============================================================
   CARDS AND GRIDS
   ============================================================ */
.grid-2, .grid-3, .grid-4 { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }

.card, .service-card, .capital-card, .team-card, .form-card, .route-card {
    background: var(--ep-surface); border: 1px solid var(--ep-line); border-radius: 0;
}
.service-card { padding: 32px 28px; display: flex; flex-direction: column; gap: 12px; transition: border-color var(--ep-dur-sm) var(--ep-ease); }
.service-card:hover { border-color: var(--ep-brand-600); }
.service-card h3 { font-size: 21px; line-height: 28px; }
.service-card h3 a { color: var(--ep-ink-900); text-decoration: none; }
.service-card h3 a:hover { color: var(--ep-brand-600); text-decoration: underline; }
.service-card p { font-size: 16px; line-height: 26px; color: var(--ep-ink-500); }
.service-card .card-link { margin-top: auto; padding-top: 8px; font-size: 15px; font-weight: 500; }
.icon-chip {
    width: 44px; height: 44px; display: grid; place-items: center; flex-shrink: 0;
    background: var(--ep-brand-50); border: 1px solid var(--ep-brand-100); color: var(--ep-brand-600);
    transition: background-color var(--ep-dur-sm) var(--ep-ease), border-color var(--ep-dur-sm) var(--ep-ease), color var(--ep-dur-sm) var(--ep-ease);
}
.service-card:hover .icon-chip { background: var(--ep-brand-600); border-color: var(--ep-brand-600); color: #FFFFFF; }
.icon-chip svg { width: 24px; height: 24px; }
.icon-text { font-size: 22px; line-height: 1; }
.service-metric {
    display: block; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--ep-line-soft);
    font-size: 13px; line-height: 20px; font-weight: 500; color: var(--ep-brand-600);
}
.card-media { overflow: hidden; margin: -32px -28px 8px; }
.card-media .img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card-media.fallback { display: none; }
.card-body { padding: 28px; display: grid; gap: 10px; }
.card-body h3 { font-size: 21px; line-height: 28px; }
.card-body p { font-size: 16px; line-height: 26px; color: var(--ep-ink-500); }
.card-img { overflow: hidden; }
.card-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* Pillars: numbered only where the order is real; the grid follows the item count */
.pillars { display: grid; gap: 0; grid-template-columns: 1fr; position: relative; }
.pillars::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--ep-ink-900); transform-origin: left center; }
@media (min-width: 640px)  { .pillars[data-count="2"], .pillars[data-count="4"] { grid-template-columns: repeat(2, 1fr); } .pillars[data-count="3"] { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .pillars[data-count="4"] { grid-template-columns: repeat(4, 1fr); } }
.pillar { padding: 28px 28px 32px 0; display: grid; gap: 10px; align-content: start; border-bottom: 1px solid var(--ep-line); }
@media (min-width: 640px) { .pillar { padding-right: 32px; } .pillar + .pillar { padding-left: 0; } }
/* Tabular figures only on pure numbers: Schibsted's tabular set also widens full stops and commas. */
.pillar-num, .stat-value { font-variant-numeric: tabular-nums; }
.pillar-num { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ep-brand-600); letter-spacing: .04em; }
.pillar h3 { font-size: 21px; line-height: 28px; }
.pillar p { font-size: 16px; line-height: 26px; color: var(--ep-ink-500); }
.bg-navy .pillars::before, .bg-navy-mid .pillars::before { background: #FFFFFF; }
.bg-navy .pillar, .bg-navy-mid .pillar { border-bottom-color: var(--ep-brand-800); }
.bg-navy .pillar-num, .bg-navy-mid .pillar-num { color: var(--ep-brand-100); }

/* Two routes: the homepage split */
.routes { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .routes { grid-template-columns: 1fr 1fr; } }
.route-card { padding: 36px 32px; display: grid; gap: 14px; align-content: start; border-top: 3px solid var(--ep-brand-600); }
.route-card h3 { font-size: 28px; line-height: 34px; }
.route-card p { color: var(--ep-ink-500); }
.route-card .btn { justify-self: start; margin-top: 8px; }

/* ============================================================
   TWO COLUMN
   ============================================================ */
.two-col { display: grid; gap: 48px; align-items: start; }
.two-col.no-img { gap: 20px; }
@media (min-width: 1024px) { .two-col { grid-template-columns: 1fr 1fr; gap: 64px; } .two-col.no-img { grid-template-columns: 5fr 7fr; } }
.two-col.reverse .two-col-img { order: -1; }
@media (min-width: 1024px) { .two-col.reverse .two-col-img { order: 1; } }
.two-col-img { border: 1px solid var(--ep-line); background: var(--ep-surface); }
.two-col-img:empty { display: none; }
.two-col-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.two-col-text { display: grid; gap: 16px; justify-items: start; }
.two-col-text h2 { margin: 0; }
.two-col-body { display: grid; gap: 16px; }
.rte-content p + p { margin-top: 16px; }
.feature-list { display: grid; gap: 10px; margin: 8px 0 8px; }
.feature-list li { position: relative; padding-left: 22px; color: var(--ep-ink-900); font-size: 16px; line-height: 26px; max-width: 64ch; }
.feature-list li::before { content: ""; position: absolute; left: 0; top: 12px; width: 10px; height: 2px; background: var(--ep-brand-600); }
.discipline { scroll-margin-top: calc(var(--nav-h) + 24px); }
.discipline .two-col-text .btn { margin-top: 8px; }

/* ============================================================
   CAPITAL STRUCTURES
   ============================================================ */
.capital-card { padding: 32px 28px; display: flex; flex-direction: column; gap: 12px; }
.capital-card h3 { font-size: 21px; line-height: 28px; }
.capital-card > p { font-size: 16px; line-height: 26px; color: var(--ep-ink-500); }
.capital-card .feature-list { margin-top: 4px; }
.capital-featured-badge { display: none; }
.capital-return { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--ep-line); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.capital-return-label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ep-ink-500); }
.capital-return-value { font-size: 17px; font-weight: 600; color: var(--ep-brand-600); }

/* ============================================================
   RISK WARNING (financial promotion)
   ============================================================ */
.risk-warning-wrap { padding: 40px 0 0; }
.risk-warning {
    background: var(--ep-surface); border: 1px solid var(--ep-ink-900); border-left: 4px solid var(--ep-brand-600);
    padding: 20px 24px; display: grid; gap: 6px; max-width: 880px;
}
.risk-warning h2 { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.risk-warning p { font-size: 17px; line-height: 28px; max-width: none; }
.risk-warning.pending { border-color: var(--ep-warn-600); border-left-color: var(--ep-warn-600); background: var(--ep-warn-100); }
.risk-warning.pending p { color: var(--ep-warn-600); }

/* ============================================================
   CLOSING BAND (Petrol)
   ============================================================ */
.cta-band { background: var(--ep-brand-600); color: #FFFFFF; padding: 88px 0; }
.cta-band .wrap { display: grid; gap: 16px; justify-items: start; }
.cta-band h2 { color: #FFFFFF; max-width: 24ch; }
.cta-band p { color: var(--ep-brand-100); font-size: 18px; line-height: 30px; max-width: 60ch; }
.cta-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
@media (max-width: 767px) { .cta-band { padding: 64px 0; } }
.cta-petrol-700 { background: var(--ep-brand-700); }
.cta-petrol-800 { background: var(--ep-brand-800); }
.cta-petrol-900 { background: var(--ep-brand-900); }
.cta-ink        { background: var(--ep-ink-900); }
:is(.cta-petrol-800, .cta-petrol-900, .cta-ink) .btn-outline:hover { background: rgba(255,255,255,.12); }
.cta-white      { background: #FFFFFF; border-top: 1px solid var(--ep-line); }
.cta-paper      { background: var(--ep-paper); border-top: 1px solid var(--ep-line); }
.cta-petrol-50  { background: var(--ep-brand-50); }
.cta-petrol-100 { background: var(--ep-brand-100); }
.cta-band.cta-light { color: var(--ep-ink-900); }
.cta-band.cta-light h2 { color: var(--ep-ink-900); }
.cta-band.cta-light p { color: var(--ep-ink-500); }

/* ============================================================
   FORMS
   ============================================================ */
.form-card { padding: 32px; }
.form-card h3 { font-size: 24px; line-height: 30px; margin-bottom: 8px; }
.form-card .form-intro { color: var(--ep-ink-500); margin-bottom: 24px; }
.form-grid { display: grid; gap: 20px; }
@media (min-width: 640px) { .form-grid.two { grid-template-columns: 1fr 1fr; } }
.form-group { display: grid; gap: 6px; }
.form-group label, .form-group legend { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ep-ink-900); }
.form-group .hint { font-size: 14px; line-height: 22px; color: var(--ep-ink-500); }
.form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 12px 14px; border: 1px solid var(--ep-line); border-radius: var(--ep-radius-ui);
    font-size: 16px; line-height: 24px; color: var(--ep-ink-900); background: #FFFFFF;
    transition: border-color var(--ep-dur-sm) var(--ep-ease);
}
.form-group input:hover, .form-group select:hover, .form-group textarea:hover { border-color: var(--ep-ink-400); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--ep-brand-600); outline: none; box-shadow: var(--ep-focus); }
.form-group textarea { min-height: 132px; resize: vertical; }
fieldset.form-group { border: 0; }
.choice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--ep-line); background: #FFFFFF; cursor: pointer; font-size: 16px; line-height: 24px; font-weight: 400; }
.choice + .choice { margin-top: 8px; }
.choice input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--ep-brand-600); flex-shrink: 0; }
.choice:has(input:checked) { border-color: var(--ep-brand-600); background: var(--ep-brand-50); }
.form-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 8px; }
.form-note { font-size: 14px; line-height: 22px; color: var(--ep-ink-500); }
.form-status { display: none; padding: 14px 16px; font-size: 16px; line-height: 24px; }
.form-status.success { display: block; background: var(--ep-success-100); color: var(--ep-success-600); }
.form-status.error { display: block; background: var(--ep-danger-100); color: var(--ep-danger-600); }
.form-status.info { display: block; background: var(--ep-brand-50); color: var(--ep-brand-700); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Deal pack and owner enquiry layout */
.split { display: grid; gap: 48px; }
@media (min-width: 1024px) { .split { grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; } }
.split-intro { display: grid; gap: 16px; justify-items: start; }
.split-intro p { color: var(--ep-ink-500); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid { display: grid; gap: 48px; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 5fr 7fr; gap: 64px; } }
.contact-intro { display: grid; gap: 16px; align-content: start; }
.contact-intro p { color: var(--ep-ink-500); }
.contact-details { display: grid; gap: 0; margin-top: 16px; border-top: 1px solid var(--ep-line); }
.contact-detail { display: flex; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--ep-line); }
.contact-icon { width: 44px; height: 44px; display: grid; place-items: center; background: var(--ep-brand-50); color: var(--ep-brand-600); flex-shrink: 0; }
.contact-icon svg { width: 20px; height: 20px; }
.contact-label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ep-ink-500); }
.contact-value { font-size: 16px; line-height: 24px; color: var(--ep-ink-900); }

/* ============================================================
   TEAM
   ============================================================ */
.team-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.team-card { display: grid; }
.team-photo { aspect-ratio: 4 / 5; background: var(--ep-ink-100); display: grid; place-items: center; overflow: hidden; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-photo .placeholder-mark { width: 44px; height: auto; opacity: .35; }
.team-info { padding: 20px 24px 24px; display: grid; gap: 6px; }
.team-name { font-size: 21px; line-height: 28px; font-weight: 600; }
.team-role { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ep-brand-600); }
.team-bio { font-size: 16px; line-height: 26px; color: var(--ep-ink-500); margin-top: 6px; }
.team-linkedin { font-size: 15px; margin-top: 6px; }

/* ============================================================
   BLOG
   ============================================================ */
.blog-card { display: grid; grid-template-rows: auto 1fr; }
.blog-card .card-body { align-content: start; }
.blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.blog-cat { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ep-brand-600); }
.blog-date { font-size: 14px; color: var(--ep-ink-500); }
.blog-card h3 a { color: var(--ep-ink-900); text-decoration: none; }
.blog-card h3 a:hover { color: var(--ep-brand-600); text-decoration: underline; }
.read-more { font-size: 15px; font-weight: 500; margin-top: 4px; }
.section-foot { margin-top: 40px; }

.post-content { font-size: 17px; line-height: 30px; color: var(--ep-ink-900); max-width: 720px; }
.post-content > * + * { margin-top: 20px; }
.post-content h2 { font-size: 30px; line-height: 36px; margin-top: 48px; }
.post-content h3 { font-size: 22px; line-height: 28px; margin-top: 36px; }
.post-content p, .post-content li { color: var(--ep-ink-900); }
.post-content ul, .post-content ol { padding-left: 24px; list-style: disc; }
.post-content ol { list-style: decimal; }
.post-content li + li { margin-top: 8px; }
.post-content blockquote { border-left: 4px solid var(--ep-brand-600); padding: 12px 20px; background: var(--ep-surface); }
.post-content img { margin: 32px 0; }
.post-content table { width: 100%; border-collapse: collapse; font-size: 16px; }
.post-content th { text-align: left; border-bottom: 2px solid var(--ep-ink-900); padding: 10px 12px; }
.post-content td { border-bottom: 1px solid var(--ep-line-soft); padding: 10px 12px; }

.faq-item { border-bottom: 1px solid var(--ep-line); }
.faq-question { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; cursor: pointer; font-weight: 600; font-size: 17px; }
.faq-icon { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--ep-line); color: var(--ep-brand-600); flex-shrink: 0; transition: transform var(--ep-dur-sm) var(--ep-ease); }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer { display: none; padding: 0 0 18px; }
.faq-item.open .faq-answer { display: block; }

.pagination { display: flex; gap: 8px; justify-content: flex-start; margin-top: 40px; flex-wrap: wrap; }
.pagination a, .pagination span { display: inline-flex; padding: 8px 14px; border: 1px solid var(--ep-line); font-size: 15px; text-decoration: none; color: var(--ep-ink-900); background: #FFFFFF; }
.pagination a:hover { border-color: var(--ep-brand-600); color: var(--ep-brand-600); }
.pagination .current { background: var(--ep-brand-600); border-color: var(--ep-brand-600); color: #FFFFFF; }

/* ============================================================
   PORTFOLIO (only rendered if real projects exist)
   ============================================================ */
.portfolio-card .card-img { position: relative; background: var(--ep-ink-100); }
.card-tag, .card-status { position: absolute; top: 12px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px; }
.card-tag { left: 12px; background: var(--ep-brand-600); color: #FFFFFF; }
.card-status { right: 12px; background: #FFFFFF; color: var(--ep-ink-900); }
.portfolio-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 16px 28px; border-top: 1px solid var(--ep-line); }
.meta-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ep-ink-500); }
.meta-value { font-weight: 600; font-size: 15px; }

/* Stats: kept only so builder content still renders; the brand does not use stat bars */
.stats-bar { background: var(--ep-surface); border-top: 1px solid var(--ep-line); border-bottom: 1px solid var(--ep-line); padding: 48px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (min-width: 640px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-value { font-size: 32px; line-height: 38px; font-weight: 600; color: var(--ep-ink-900); }
.stat-label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ep-ink-500); }

/* ============================================================
   FOOTER (Petrol)
   ============================================================ */
.site-footer { background: var(--ep-brand-600); color: #FFFFFF; padding: 72px 0 32px; }
.footer-grid { display: grid; gap: 40px; margin-bottom: 56px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 4fr 2fr 2fr 3fr; } }
.footer-brand { display: grid; gap: 16px; align-content: start; }
.footer-brand svg { height: 44px; width: auto; }
.footer-brand p { color: var(--ep-brand-100); font-size: 16px; line-height: 26px; max-width: 34ch; }
.footer-col h4 { color: var(--ep-brand-100); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 16px; }
.footer-col ul { display: grid; gap: 10px; }
.footer-col a { color: #FFFFFF; font-size: 15px; text-decoration: none; }
.footer-col a:hover { text-decoration: underline; color: #FFFFFF; }
.footer-col .footer-text { color: var(--ep-brand-100); font-size: 15px; line-height: 24px; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer-contact svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; color: var(--ep-brand-100); }
.footer-risk { border-top: 1px solid var(--ep-brand-800); padding: 24px 0; }
.footer-risk p { color: var(--ep-brand-100); font-size: 14px; line-height: 22px; max-width: 96ch; }
.footer-bottom { border-top: 1px solid var(--ep-brand-800); padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.footer-bottom p { color: var(--ep-brand-100); font-size: 14px; }
.footer-bottom a { color: var(--ep-brand-100); }
.footer-social { display: flex; gap: 8px; margin-top: 4px; }
.footer-social a { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--ep-brand-200); color: #FFFFFF; }
.footer-social a:hover { background: var(--ep-brand-800); }

/* ============================================================
   UTILITIES
   ============================================================ */
.toast { position: fixed; bottom: 24px; right: 24px; padding: 14px 18px; font-size: 15px; z-index: 99999; transform: translateY(80px); opacity: 0; transition: transform var(--ep-dur-md) var(--ep-ease), opacity var(--ep-dur-md) var(--ep-ease); max-width: 360px; }
.toast.show { transform: none; opacity: 1; }
.toast.success { background: var(--ep-success-600); color: #FFFFFF; }
.toast.error { background: var(--ep-danger-600); color: #FFFFFF; }
.video-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border: 1px solid var(--ep-line); }
.video-embed iframe, .video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -48px; background: var(--ep-brand-600); color: #FFFFFF; padding: 10px 14px; z-index: 100000; }
.skip-link:focus { top: 12px; }
.admin-bar { background: var(--ep-brand-800); color: #FFFFFF; padding: 8px 24px; font-size: 13px; display: flex; justify-content: space-between; align-items: center; }
.admin-bar a { color: #FFFFFF; margin-left: 16px; }
.img-field-wrap { display: flex; gap: 8px; align-items: center; }
.img-field-wrap input { flex: 1; }
.upload-btn { padding: 8px 12px; background: var(--ep-ink-100); border: 1px solid var(--ep-line); border-radius: 2px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ep-ink-900); white-space: nowrap; font-family: var(--ep-font); }
.upload-btn:hover { background: var(--ep-line); }

/* ============================================================
   MOTION (design-system/foundations/motion.md, stronger set requested by Edwin 13 Sep 2026)
   Only blocks below the fold at load are tagged by main.js, so what a visitor first sees is never waiting on an
   animation. Printing, reduced motion, and scripts off all show every block at rest.
   ============================================================ */
.reveal { opacity: 1; transform: none; }
@keyframes ep-rise  { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes ep-left  { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } }
@keyframes ep-right { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
@keyframes ep-drop  { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes ep-draw  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ep-wipe  { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ep-bar   { from { transform: scaleX(0); } to { transform: none; } }
@keyframes ep-stem  { from { transform: scaleY(0); } to { transform: none; } }
@keyframes ep-zoom  { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes ep-fill  { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Page load: the opening statement arrives in order, heading first, action last. */
.hero-inner > *, .page-hero-inner > * { animation: ep-rise 800ms var(--ep-ease) backwards; }
.hero-inner > :nth-child(2), .page-hero-inner > :nth-child(2) { animation-delay: 120ms; }
.hero-inner > :nth-child(3), .page-hero-inner > :nth-child(3) { animation-delay: 240ms; }
.hero-inner > :nth-child(n+4), .page-hero-inner > :nth-child(n+4) { animation-delay: 360ms; }
.hero-media { animation: ep-wipe 1000ms var(--ep-ease) 300ms backwards; }

/* First visit in a session: the Facade E builds, stem then floors. */
.ep-intro .nav-logo svg g rect { transform-box: fill-box; transform-origin: left center; animation: ep-bar 600ms var(--ep-ease) backwards; }
.ep-intro .nav-logo svg g rect:nth-child(1) { animation-name: ep-stem; transform-origin: center top; }
.ep-intro .nav-logo svg g rect:nth-child(2) { animation-delay: 250ms; }
.ep-intro .nav-logo svg g rect:nth-child(3) { animation-delay: 380ms; }
.ep-intro .nav-logo svg g rect:nth-child(4) { animation-delay: 510ms; }

/* Scroll: each block arrives once as it enters, siblings 120ms apart. Text columns come in from their own side. */
.ep-reveal { opacity: 0; }
.ep-reveal.is-in { opacity: 1; animation: ep-rise 800ms var(--ep-ease) var(--ep-delay, 0ms) backwards; }
.two-col-text.ep-reveal.is-in, .split-intro.ep-reveal.is-in { animation-name: ep-left; }
.two-col-body.ep-reveal.is-in, .form-card.ep-reveal.is-in { animation-name: ep-right; }
.pillars.ep-line::before { transform: scaleX(0); }
.pillars.ep-line.is-in::before { transform: none; animation: ep-draw 1100ms var(--ep-ease) backwards; }

/* Hover: cards lift and take the Petrol edge; images inside them ease forward. */
.service-card, .capital-card, .blog-card, .team-card, .route-card { transition: transform var(--ep-dur-md) var(--ep-ease), border-color var(--ep-dur-sm) var(--ep-ease); }
.service-card:hover, .capital-card:hover, .blog-card:hover, .team-card:hover { transform: translateY(-6px); border-color: var(--ep-brand-600); }
.route-card:hover { transform: translateY(-6px); }
.card-media, .blog-card .card-img, .team-photo { overflow: hidden; }
.card-media img, .blog-card .cover, .blog-feature .cover, .team-photo img { transition: transform 600ms var(--ep-ease); }
.service-card:hover .card-media img, .blog-card:hover .cover, .blog-feature:hover .cover, .team-card:hover .team-photo img { transform: scale(1.04); }
.btn { transition: background-color var(--ep-dur-sm) var(--ep-ease), border-color var(--ep-dur-sm) var(--ep-ease), color var(--ep-dur-sm) var(--ep-ease), transform var(--ep-dur-sm) var(--ep-ease); }
.btn:hover { transform: translateY(-2px); }

/* ============================================================
   HOME IMAGE CAROUSEL
   ============================================================ */
.hero:has(.carousel) { padding: 64px 0 72px; }
@media (min-width: 1024px) { .hero:has(.carousel) h1 { max-width: 24ch; } .hero:has(.carousel) .carousel { margin-top: 48px; } }
.carousel { position: relative; margin-top: 56px; animation: ep-wipe 1100ms var(--ep-ease) 420ms backwards; }
.carousel-track { position: relative; aspect-ratio: 16 / 7; overflow: hidden; background: var(--ep-ink-900); border: 1px solid var(--ep-line); }
.carousel-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1000ms var(--ep-ease-in-out); }
.carousel-slide.is-active { opacity: 1; z-index: 1; }
.carousel-slide img { width: 100%; height: 100%; object-fit: cover; transform-origin: 60% 50%; }
.carousel-slide.is-active img { animation: ep-zoom 7000ms linear forwards; }
.carousel-controls { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.carousel-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--ep-line); background: var(--ep-surface); color: var(--ep-ink-900); border-radius: var(--ep-radius-ui); transition: background-color var(--ep-dur-sm) var(--ep-ease), border-color var(--ep-dur-sm) var(--ep-ease), color var(--ep-dur-sm) var(--ep-ease); }
.carousel-btn:hover { border-color: var(--ep-brand-600); background: var(--ep-brand-600); color: #FFFFFF; }
.carousel-pause { margin-left: auto; }
.carousel-pause svg + svg, .carousel.is-paused .carousel-pause svg:first-child { display: none; }
.carousel.is-paused .carousel-pause svg + svg { display: block; }
.carousel-dots { display: flex; gap: 8px; }
.carousel-dot { width: 56px; height: 44px; padding: 0; border: 0; background: none; display: grid; align-items: center; }
.carousel-dot span { display: block; height: 3px; background: var(--ep-line); position: relative; overflow: hidden; }
.carousel-dot span::after { content: ""; position: absolute; inset: 0; background: var(--ep-brand-600); transform: scaleX(0); transform-origin: left center; }
.carousel-dot[aria-current="true"] span::after { transform: scaleX(1); }
.carousel.is-playing .carousel-dot[aria-current="true"] span::after { animation: ep-fill var(--ep-carousel-ms, 6000ms) linear forwards; }
/* Carousel placed as its own section, or inside a post or text section with a short code */
.carousel-section .carousel, .carousel-embed .carousel { margin-top: 0; }
.carousel-section .section-header { margin-bottom: 32px; }
.carousel-embed { margin-block: 32px; }
.post-content .carousel img, .rte-content .carousel img { margin: 0; }
.carousel-embed .carousel-track { aspect-ratio: 16 / 9; }
.carousel-embed .carousel-caption { padding: 28px 32px; }
.carousel-embed .carousel-title { font-size: 30px; line-height: 36px; }
.carousel-embed .carousel-text { font-size: 17px; line-height: 26px; }

/* Text overlay: a Petrol scrim rises from the bottom edge so white type holds on any photograph. */
.carousel-slide.has-caption::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(6, 43, 51, 0.88) 0%, rgba(6, 43, 51, 0.55) 38%, rgba(6, 43, 51, 0) 70%);
}
.carousel-caption {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 48px 56px;
    display: grid; gap: 10px; justify-items: start; max-width: 720px; color: #FFFFFF;
}
.carousel-count { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.12em; color: var(--ep-brand-200); font-variant-numeric: tabular-nums; }
.carousel-title { font-size: 44px; line-height: 50px; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
.carousel-text { font-size: 19px; line-height: 30px; color: var(--ep-brand-100); max-width: 46ch; }
.carousel-count::after { content: ""; display: block; width: 40px; height: 2px; margin-top: 12px; background: #FFFFFF; transform-origin: left center; }
/* Each time a slide comes in, its words arrive after the picture: counter and rule, heading, then text. */
.carousel-slide.is-active .carousel-caption > * { animation: ep-rise 900ms var(--ep-ease) backwards; }
.carousel-slide.is-active .carousel-count { animation-delay: 350ms; }
.carousel-slide.is-active .carousel-count::after { animation: ep-draw 900ms var(--ep-ease) 500ms backwards; }
.carousel-slide.is-active .carousel-title { animation-delay: 500ms; }
.carousel-slide.is-active .carousel-text { animation-delay: 700ms; }
@media (max-width: 767px) {
    .carousel { margin-top: 40px; }
    .carousel-track { aspect-ratio: 4 / 3; }
    .carousel-track:has(.has-caption) { aspect-ratio: 4 / 5; }
    .carousel-caption { padding: 24px 20px; gap: 8px; }
    .carousel-title { font-size: 28px; line-height: 34px; }
    .carousel-text { font-size: 16px; line-height: 24px; }
    .carousel-dot { width: 32px; }
}

@media print {
    .ep-reveal, .pillars.ep-line::before { opacity: 1 !important; transform: none !important; animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
    .ep-reveal { opacity: 1; }
}

/* Direct lines beside the owner enquiry form */
.split-contact { display: grid; gap: 12px; margin-top: 24px; }
.split-contact li { display: flex; align-items: center; gap: 10px; }
.split-contact svg { color: var(--ep-brand-600); flex-shrink: 0; }

/* ============================================================
   BLOG (content kit approved 14 Sep 2026)
   ============================================================ */
/* Drawn cover: sized by its box, so the same markup works as a card, a feature and an article header. */
.cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; container-type: inline-size; background: var(--ep-paper); }
.cover-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cover-petrol { background: #0B4F5C; } .cover-paper { background: #F7F7F4; } .cover-wash { background: #DAE9EB; }
.cover-text { position: absolute; left: 4.8cqw; top: 4.8cqw; width: 50cqw; display: grid; gap: 1.9cqw; justify-items: start; }
.cover-cat { font-size: max(8px, 1.26cqw); line-height: 1.2; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.cover-title { font-size: 4.2cqw; line-height: 1.08; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
.cover-logo { position: absolute; left: 4.8cqw; bottom: 3.8cqw; height: 4.2cqw; width: auto; max-width: none; }
.cover-petrol .cover-cat { color: #B2D4DA; } .cover-petrol .cover-title { color: #FFFFFF; }
.cover-paper .cover-cat { color: #0B4F5C; }  .cover-paper .cover-title { color: #141718; }
.cover-wash .cover-cat { color: #083B45; }   .cover-wash .cover-title { color: #062B33; }
.cover-photo img { width: 100%; height: 100%; object-fit: cover; }
.blog-cover-link { display: block; overflow: hidden; border-bottom: 1px solid var(--ep-line); }

/* Insights page */
.blog-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.blog-filters a { font-size: 14px; line-height: 20px; font-weight: 500; text-decoration: none; color: var(--ep-ink-900); border: 1px solid var(--ep-line); background: var(--ep-surface); padding: 7px 14px; border-radius: var(--ep-radius-ui); transition: background-color var(--ep-dur-sm) var(--ep-ease), border-color var(--ep-dur-sm) var(--ep-ease), color var(--ep-dur-sm) var(--ep-ease); }
.blog-filters a:hover { border-color: var(--ep-brand-600); color: var(--ep-brand-600); }
.blog-filters a.on { background: var(--ep-brand-600); border-color: var(--ep-brand-600); color: #FFFFFF; }
.blog-feature { display: grid; grid-template-columns: 1fr; background: var(--ep-surface); border: 1px solid var(--ep-line); margin-bottom: 32px; transition: border-color var(--ep-dur-sm) var(--ep-ease); }
.blog-feature:hover { border-color: var(--ep-brand-600); }
.blog-feature .blog-cover-link { border-bottom: 1px solid var(--ep-line); }
.blog-feature-body { padding: 28px; display: grid; gap: 14px; align-content: center; justify-items: start; }
.blog-feature h2 { font-size: 30px; line-height: 36px; letter-spacing: -0.01em; }
.blog-feature h2 a { color: var(--ep-ink-900); text-decoration: none; }
.blog-feature h2 a:hover { color: var(--ep-brand-600); text-decoration: underline; }
.blog-feature p { color: var(--ep-ink-500); }
@media (min-width: 1024px) { .blog-feature { grid-template-columns: 7fr 5fr; } .blog-feature .blog-cover-link { border-bottom: 0; border-right: 1px solid var(--ep-line); } .blog-feature-body { padding: 40px; } }

/* Article */
.read-progress { position: fixed; top: var(--nav-h); left: 0; right: 0; height: 3px; z-index: 9998; pointer-events: none; }
.read-progress span { display: block; height: 100%; background: var(--ep-brand-600); transform: scaleX(0); transform-origin: left center; }
.post-head { padding: 56px 0 40px; }
.post-head .wrap { display: grid; gap: 18px; justify-items: start; }
.post-crumbs { display: flex; gap: 8px; font-size: 14px; line-height: 20px; color: var(--ep-ink-500); }
.post-crumbs a { color: var(--ep-ink-500); }
.post-head h1 { max-width: 22ch; }
.post-head .lead { color: var(--ep-ink-500); max-width: 62ch; }
.post-byline { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 20px; color: var(--ep-ink-500); font-variant-numeric: tabular-nums; }
.post-byline b { display: block; color: var(--ep-ink-900); font-weight: 600; }
.post-avatar { width: 40px; height: 40px; background: var(--ep-brand-600); display: grid; place-items: center; flex-shrink: 0; }
.post-avatar svg { width: 60%; height: auto; }
.post-avatar svg rect, .post-avatar svg path { fill: #FFFFFF; }
.post-avatar.lg { width: 64px; height: 64px; }
.post-cover { margin: 0; border: 1px solid var(--ep-line); }
.post-layout { display: grid; grid-template-columns: 1fr; gap: 40px; padding-block: 56px 80px; }
@media (min-width: 1024px) { .post-layout { grid-template-columns: minmax(0, 1fr) 260px; gap: 64px; align-items: start; } }
.post-main { display: grid; gap: 40px; min-width: 0; }
.post-content { max-width: 700px; }
.post-content h2 { scroll-margin-top: calc(var(--nav-h) + 24px); }
.post-content .takeaways { background: var(--ep-brand-50); border-top: 3px solid var(--ep-brand-600); padding: 24px 28px; }
.post-content .takeaways > * + * { margin-top: 14px; }
.post-content .takeaways .eyebrow { margin-bottom: 0; }
.post-content figure { border: 1px solid var(--ep-line); background: var(--ep-surface); padding: 24px; }
.post-content figcaption { font-size: 14px; line-height: 22px; color: var(--ep-ink-500); border-top: 1px solid var(--ep-line); padding-top: 12px; margin-top: 14px; }
.post-content table { border-collapse: collapse; width: 100%; font-size: 15px; }
.post-content th, .post-content td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--ep-line); vertical-align: top; }
.post-author { display: grid; grid-template-columns: 64px 1fr; gap: 18px; border-top: 1px solid var(--ep-line); border-bottom: 1px solid var(--ep-line); padding-block: 24px; max-width: 700px; }
.post-author b { font-size: 18px; line-height: 26px; }
.post-author p { font-size: 15px; line-height: 24px; color: var(--ep-ink-500); }
.post-aside { display: grid; gap: 28px; }
@media (min-width: 1024px) { .post-aside { position: sticky; top: calc(var(--nav-h) + 32px); } }
.post-toc { display: none; }
@media (min-width: 1024px) { .post-toc { display: grid; gap: 2px; } }
.post-toc .eyebrow { margin-bottom: 8px; }
.post-toc a { font-size: 14px; line-height: 20px; color: var(--ep-ink-500); text-decoration: none; padding: 7px 0 7px 14px; border-left: 2px solid var(--ep-line); transition: color var(--ep-dur-sm) var(--ep-ease), border-color var(--ep-dur-sm) var(--ep-ease); }
.post-toc a:hover { color: var(--ep-ink-900); }
.post-toc a.on { color: var(--ep-brand-600); border-left-color: var(--ep-brand-600); font-weight: 600; }
.post-share > div { display: flex; gap: 8px; margin-top: 10px; }
.post-share a, .post-share button { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--ep-line); background: var(--ep-surface); color: var(--ep-ink-900); border-radius: var(--ep-radius-ui); transition: background-color var(--ep-dur-sm) var(--ep-ease), border-color var(--ep-dur-sm) var(--ep-ease), color var(--ep-dur-sm) var(--ep-ease); }
.post-share a:hover, .post-share button:hover, .post-share button.copied { background: var(--ep-brand-600); border-color: var(--ep-brand-600); color: #FFFFFF; }
.post-aside-cta { background: var(--ep-brand-600); color: #FFFFFF; padding: 22px; display: grid; gap: 12px; justify-items: start; }
.post-aside-cta p { color: var(--ep-brand-100); font-size: 14px; line-height: 22px; }
.post-aside-cta a { background: #FFFFFF; color: var(--ep-brand-600); font-weight: 600; font-size: 14px; text-decoration: none; padding: 9px 14px; border-radius: var(--ep-radius-ui); }
.post-aside-cta a:hover { background: var(--ep-brand-100); }
.post-related h2 { margin-bottom: 32px; }

/* Draft preview bar: only a signed-in editor ever sees this (blog-post.php). */
.draft-bar { position: sticky; top: var(--nav-h); z-index: 60; background: var(--ep-warn-100); color: var(--ep-warn-600);
    padding: 12px var(--gutter); font-size: 14px; line-height: 20px; text-align: center; border-bottom: 1px solid var(--ep-line); }
.draft-bar a { color: var(--ep-warn-600); margin-left: 8px; }
@media print { .draft-bar { display: none; } }

/* ============================================================
   BACKGROUND PICTURES (hero or any section). Admin sets the picture and the overlay.
   ============================================================ */
.has-bg-image { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; isolation: isolate; }
.has-bg-image > * { position: relative; z-index: 2; }
.has-bg-image::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.bg-overlay-dark::before  { background: linear-gradient(to right, rgba(6,43,51,.86), rgba(6,43,51,.62)); }
.bg-overlay-light::before { background: rgba(255,255,255,.80); }
.bg-overlay-none::before  { background: none; }
.bg-overlay-dark, .bg-overlay-dark h1, .bg-overlay-dark h2, .bg-overlay-dark h3 { color: #FFFFFF; }
.bg-overlay-dark p, .bg-overlay-dark li, .bg-overlay-dark .lead, .bg-overlay-dark .eyebrow { color: var(--ep-brand-100); }
.bg-overlay-dark .page-hero-badge, .bg-overlay-dark .hero-badge { background: rgba(255,255,255,.14); color: #FFFFFF; border-color: rgba(255,255,255,.3); }
.bg-overlay-dark .btn-outline-dark { border-color: #FFFFFF; color: #FFFFFF; }
.bg-overlay-dark .btn-outline-dark:hover { background: rgba(255,255,255,.14); color: #FFFFFF; }
.has-bg-image.page-hero, .has-bg-image.hero { padding-block: 96px; }
@media (max-width: 767px) { .has-bg-image.page-hero, .has-bg-image.hero { padding-block: 64px; } }

/* A picture beside the words, on any inner page (previously only the home page could do this). */
.page-hero-layout { display: grid; gap: 40px; align-items: center; }
.page-hero.has-image .page-hero-layout { grid-template-columns: 1.1fr 0.9fr; }
.page-hero.has-image .hero-media img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; border-radius: var(--radius, 4px); display: block; }
@media (max-width: 900px) { .page-hero.has-image .page-hero-layout { grid-template-columns: 1fr; } }

/* A picture instead of an icon on a card. */
.card-icon-img { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; display: block; margin-bottom: 16px; }