/*
 * CBAM Advisory - style.css
 * Look and feel follows the European Union website (european-union.europa.eu):
 * flat colours, Arial, plain text, no gradients, no animations.
 *
 * Colours given by the client (EU colour system):
 *   Blue   #4073AF
 *   Yellow #FFDE39
 *   Grey   #CFCFCF
 *
 * v38 (chat 12h): rules that nothing uses any more were removed (the old tabs, the old Filing
 * obligations diagram .flow-*, the old Home page .home-* blocks). The Home page is styled in home.css.
 */

/*
 * ==========================================================
 *  HOME PAGE MAP STRENGTH  -  change ONLY the number below
 *
 *    0.85  =  Light    (map very faded)
 *    0.75  =  Medium   (default)
 *    0.65  =  Strong   (map more visible)
 *
 *  The number is how much white is laid over the map.
 *  Higher number = more white = fainter map.
 * ==========================================================
 */
:root {
    --map-overlay: 0.75;
}

:root {
    --blue:   #4073AF;
    --yellow: #FFDE39;
    --grey:   #CFCFCF;
    --light:  #F4F4F4;   /* very light grey for section backgrounds */
    --text:   #262626;
    --white:  #FFFFFF;
}

* {
    box-sizing: border-box;
}

html {
    font-size: 100%;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
    background: var(--white);
}

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

/* Link colour, underline and hover: see assets/css/design-system.css */

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

@media (max-width: 639px) {
    .container {
        padding: 0 16px;
    }
}

/* Skip link: only visible when a keyboard user tabs to it */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--white);
    padding: 8px 12px;
    z-index: 100;
}

.skip-link:focus {
    left: 0;
}

/* ---------- Header: logo band ---------- */

.logo-band {
    background: var(--white);
    padding: 16px 0;
}

.logo-link {
    display: inline-block;
}

.logo-link img {
    width: auto;
    height: 64px;
}

/* Phones keep the smaller logo (150px wide) */
@media (max-width: 639px) {
    .logo-link img {
        width: 150px;
        height: auto;
    }
}

/* ---------- Header: blue menu bar ---------- */

.main-nav {
    background: var(--blue);
}

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

.menu-list li {
    margin: 0;
}

.menu-list a {
    display: block;
    padding: 14px 14px;
    color: var(--white);
    text-decoration: none;
    font-size: 0.95rem;
    border-right: 1px solid rgba(255, 255, 255, 0.35);
}

.menu-list li:first-child a {
    border-left: 1px solid rgba(255, 255, 255, 0.35);
}

/* No divider line after the last menu item (Contact) */
.menu-list li:last-child a {
    border-right: 0;
}

.menu-list a:hover,
.menu-list a:focus {
    background: var(--white);
    color: var(--blue);
}

/* Current page: light background with blue text (as "Home" on the EU site) */
.menu-list a.current {
    background: var(--light);
    color: #255D9D;
}

/* The Menu button is only used on small screens */
.nav-toggle {
    display: none;
    width: 100%;
    padding: 12px 14px;              /* 14px left = same as the links below, so the text lines up */
    background: var(--blue);
    color: var(--white);
    border: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;   /* no coloured flash when tapped on a phone */
}

/* Subtle focus style: a thin, soft white line inside the button */
.nav-toggle:focus {
    outline: 1px solid rgba(255, 255, 255, 0.7);
    outline-offset: -4px;
}

/* A tap or mouse click does not need it; only keyboard users see it */
.nav-toggle:focus:not(:focus-visible) {
    outline: none;
}

/* ---------- Content sections ---------- */

.section {
    padding: 64px 0;
}

/* Phones: 40px */
@media (max-width: 640px) {
    .section {
        padding: 40px 0;
    }
}

.section-white {
    background: var(--white);
}

.section-grey {
    background: var(--light);
}

/* Home page "Who we are": world map as the background, faded with a white layer */
.section-map {
    position: relative;
    background-color: var(--white);
    background-image: url('../images/world-map.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;          /* the whole map is always shown, nothing is cut off */
}

/* The white layer on top of the map. Its strength is set by --map-overlay at the top of this file. */
.section-map::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(255, 255, 255, var(--map-overlay));
}

/* The text sits above the white layer */
.section-map > .container {
    position: relative;
}

h1 {
    font-size: 2rem;
    font-weight: normal;
    line-height: 1.25;
    margin: 0 0 12px 0;
    color: var(--text);
    overflow-wrap: break-word;
}

h2 {
    font-size: 1.25rem;
    font-weight: normal;
    margin: 0 0 12px 0;
}

p {
    margin: 0 0 16px 0;
}

ol,
ul {
    margin: 0 0 16px 0;
    padding-left: 28px;
}

li {
    margin-bottom: 6px;
}

/* Text on the Home page is kept to a readable line length */
.section .container > p,
.section .container > ol {
    max-width: 760px;
}

/* ---------- Content wrapper of the EU CBAM and UK CBAM pages (class "tab-panel") ---------- */

.tab-panel {
    max-width: 760px;
}

.tab-panel h2 {
    font-size: 1.5rem;
    line-height: 1.3;
    margin: 32px 0 16px 0;
}

.tab-panel h3 {
    font-size: 1.1rem;
    font-weight: bold;
    margin: 28px 0 8px 0;
}

.tab-panel h4 {
    font-size: 1rem;
    font-weight: bold;
    margin: 16px 0 6px 0;
}

/* ---------- Footer ---------- */

.site-footer {
    background: var(--light);
    border-top: 4px solid var(--yellow);   /* yellow accent, as on the EU site cards */
    padding: 32px 0 24px 0;
    font-size: 1rem;                       /* v37: text 16px (was 0.95rem) */
}

.footer-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}

.footer-col {
    flex: 1 1 260px;
}

.footer-col h2 {
    font-size: 1.1rem;
    font-weight: normal;
    color: var(--text);
    padding-bottom: 8px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--grey);
}

/* The logo file has a solid white background, so it sits on a white tile in the grey footer */
.footer-logo {
    width: 150px;
    height: auto;
    margin-bottom: 12px;
    padding: 8px;
    background: var(--white);
    border: 1px solid var(--grey);
}

.footer-col address {
    font-style: normal;
    margin-bottom: 12px;
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col li {
    margin-bottom: 8px;                    /* v37: 8px between lines (was 4px) */
}

/* ---------- Small screens ---------- */

@media (max-width: 800px) {

    .nav-toggle {
        display: block;
    }

    .menu-list {
        display: none;
        flex-direction: column;
    }

    .menu-list.open {
        display: flex;
    }

    .menu-list a,
    .menu-list li:first-child a {
        border: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.35);
    }

    h1 {
        font-size: 1.6rem;
    }

    .tab-panel h2 {
        font-size: 1.3rem;
    }

}

/* Very small phones: the page title (h1) is a little smaller on every page */
@media (max-width: 380px) {
    h1 {
        font-size: 1.5rem;
    }
}

/* ---------- Space under headings ---------- */
/* The Home page's own blocks are styled in assets/css/home.css. */

/* Section intro copy sits a little further from the heading above it */
h2 + p,
h1 + p {
    margin-top: 4px;
}

.section > .container > h2 {
    margin-top: 8px;
}

/* ---------- EU CBAM tab (What is CBAM? page) ---------- */
/*
 * Only used inside the EU CBAM tab (<div class="tab-panel eu-cbam">).
 * Same EU look as the rest of the site: flat colours, thin grey borders,
 * small yellow accent bars, blue for headings and buttons. No animations.
 * Every rule starts with ".eu-cbam" so nothing here can change the UK tab
 * or any other page.
 * v36 (chat 12f): the intro sits beside its photo (rule shared with the other three
 * pages, see design-system.css), cards / panels / notes / chips / image frames follow
 * the design-system rules, sector rows have one photo size.
 */

/* The EU tab uses the full page width (the UK tab keeps its 760px text width) */
.tab-panel.eu-cbam {
    max-width: none;
}

/* Space between the big blocks of the tab */
.eu-cbam .eu-block + .eu-block {
    margin-top: 64px;
}

/* Section titles, e.g. "WHERE ARE YOU TODAY?" */
.tab-panel.eu-cbam h2 {
    margin: 0 0 6px 0;
    font-size: 1.65rem;
    font-weight: bold;
    line-height: 1.25;
    color: var(--text);
}

/* Blue line under each section title, e.g. "Start with the problem you actually have." */
.eu-cbam .eu-lead {
    margin: 0 0 24px 0;
    color: var(--blue);
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.4;
}

/* Default h3 inside the tab (cards and steps set their own size below) */
.tab-panel.eu-cbam h3 {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.35;
}

/* Keep plain text lines at a readable length */
.eu-cbam .eu-intro > p,
.eu-cbam .eu-text-width {
    max-width: 760px;
}

/* ----- Buttons ----- */

.eu-cbam .eu-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 24px 0 28px 0;
}

.eu-cbam .eu-btn {
    display: inline-block;
    padding: 12px 24px;
    min-height: 46px;
    border: 2px solid var(--blue);
    font-weight: bold;
    line-height: 1.3;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.eu-cbam .eu-btn-primary {
    background: var(--blue);
    color: var(--white);
}

.eu-cbam .eu-btn-primary:hover,
.eu-cbam .eu-btn-primary:focus {
    background: #255D9D;              /* a darker shade of the EC blue */
    border-color: #255D9D;
    color: var(--white);
    text-decoration: none;
}

.eu-cbam .eu-btn-secondary {
    background: var(--white);
    color: #255D9D;
}

.eu-cbam .eu-btn-secondary:hover,
.eu-cbam .eu-btn-secondary:focus {
    background: #E8EEF6;
    border-color: #255D9D;
    color: #255D9D;
    text-decoration: none;
}

.eu-cbam .eu-btn:focus-visible,
.eu-cbam .eu-arrow-link:focus-visible {
    outline: 3px solid var(--yellow);
    outline-offset: 0;
    box-shadow: 0 0 0 5px var(--text);
}

/* ----- Images (image frame: 1px grey line, 8px white padding, no yellow line) ----- */

/* Hero photo: under the buttons on small screens, beside the intro text from 1000px (design-system.css) */
.eu-cbam .eu-hero-image {
    border: 1px solid var(--grey);
    padding: 8px;
    background: var(--white);
}

.eu-cbam .eu-hero-image img {
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
}

/* Banner image under a section title - shown whole (it has text printed on it) */
.eu-cbam .eu-banner {
    max-width: 760px;
    margin: 0 0 28px 0;
    padding: 8px;
    border: 1px solid var(--grey);
    background: var(--white);
}

.eu-cbam .eu-banner img {
    width: 100%;
}

/* Image next to the content (image left, content right; stacks on small screens).
   Built with flex-wrap, so it can never overflow: if there is no room, the
   content simply moves under the image. */
.eu-cbam .eu-split {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 32px;
}

.eu-cbam .eu-split-media {
    flex: 0 1 360px;
    padding: 8px;
    border: 1px solid var(--grey);
    background: var(--white);
}

.eu-cbam .eu-split-media img {
    width: 100%;                       /* the whole image is shown, nothing is cut off */
}

.eu-cbam .eu-split-body {
    flex: 1 1 420px;
    min-width: 0;
}

/* ----- EU CBAM - Current Position (Panel with four cards and a note) ----- */

.eu-cbam .eu-position {
    padding: 28px;
    background: var(--light);
    border-left: 4px solid var(--blue);
}

.eu-cbam .eu-position h2 {
    margin-bottom: 20px;
}

/* Four cards in a row (two rows of two on tablets, one column on phones). The cards are as
   tall as the tallest card of their row; text starts at the top of each card. */
.eu-cbam .eu-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px;
    margin: 0 0 16px 0;
}

.eu-cbam .eu-stat {
    padding: 24px;
    background: var(--white);
    border: 1px solid var(--grey);
    border-top: 3px solid var(--yellow);
}

.tab-panel.eu-cbam .eu-stat h3 {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    color: var(--blue);
}

.eu-cbam .eu-stat p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* The short answers (date, list of sectors) are shown bigger */
.eu-cbam .eu-stat p.eu-stat-value {
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.4;
}

/* "Regulatory Watch" is a Note: pale yellow, 4px yellow bar on the left */
.eu-cbam .eu-watch {
    padding: 16px 20px;
    background: var(--yellow-tint);
    border-left: 4px solid var(--yellow);
    color: var(--text);
}

.tab-panel.eu-cbam .eu-watch h3 {
    margin: 0 0 6px 0;
    color: var(--blue-deep);
}

.eu-cbam .eu-watch p {
    margin: 0;
}

/* ----- Where are you today? (4 scenario cards, all the same height) ----- */

.eu-cbam .eu-scenarios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    grid-auto-rows: 1fr;
    gap: 16px;
}

.eu-cbam .eu-scenario {
    display: flex;
    flex-direction: column;
    padding: 24px;
    background: var(--white);
    border: 1px solid var(--grey);
    border-top: 3px solid var(--yellow);
}

/* The customer's words */
.eu-cbam .eu-scenario-quote {
    margin: 0 0 10px 0;
    color: var(--blue);
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.4;
}

/* Our response: sits at the bottom of the card, on a light grey band with a blue bar */
.eu-cbam .eu-scenario p.eu-scenario-response {
    margin: auto 0 0 0;
    padding: 12px 16px;
    background: var(--light);
    border-left: 4px solid var(--blue);
    font-weight: bold;
}

/* ----- What do we need from your installation? (7 categories) ----- */

.eu-cbam .eu-needs {
    margin: 0 0 20px 0;
    border-top: 1px solid var(--grey);
}

.eu-cbam .eu-need {
    display: grid;
    grid-template-columns: minmax(150px, 220px) 1fr;
    gap: 4px 20px;
    padding: 12px 0;
    border-bottom: 1px solid var(--grey);
}

.eu-cbam .eu-need dt {
    color: var(--blue);
    font-weight: bold;
}

.eu-cbam .eu-need dd {
    margin: 0;
}

/* Short note under a list, e.g. "Already have only part of this? ..." (Note: pale yellow, yellow bar) */
.eu-cbam .eu-note {
    max-width: none;
    margin: 0;
    padding: 16px 20px;
    background: var(--yellow-tint);
    border-left: 4px solid var(--yellow);
    color: var(--text);
}

/* ----- What CBAM Advisory actually builds (3 numbered files) ----- */

.eu-cbam .eu-files {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: stretch;
    gap: 20px;
    margin: 0 0 24px 0;
}

.eu-cbam .eu-file {
    padding: 24px;
    background: var(--white);
    border: 1px solid var(--grey);
    border-top: 3px solid var(--yellow);
}

.eu-cbam .eu-file-number {
    margin: 0;
    padding: 0;
    color: var(--blue);
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
}

.tab-panel.eu-cbam .eu-file h3 {
    margin: 0;
    padding: 8px 0 12px 0;
    border-bottom: 1px solid var(--grey);
    font-size: 1.1rem;
    color: var(--blue);
}

.eu-cbam .eu-file ul {
    margin: 0;
    padding: 16px 0 0 20px;
    font-size: 0.95rem;
    line-height: 1.45;
}

/* ----- How we work with an installation (7 steps, one under the other) ----- */
/* The step pattern (48px blue number box, 16px gap, plain blue line) is the same on the Filing page */

.eu-cbam .eu-steps {
    list-style: none;
    margin: 0;
    padding: 0;
}

.eu-cbam .eu-step {
    position: relative;
    display: flex;
    gap: 16px;
    margin: 0;
    padding: 0 0 24px 0;
}

.eu-cbam .eu-step:last-child {
    padding-bottom: 0;
}

/* Plain blue line joining each number box to the next one */
.eu-cbam .eu-step:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 48px;
    bottom: 0;
    left: 23px;
    width: 2px;
    background: var(--blue);
}

.eu-cbam .eu-step-number {
    flex: 0 0 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue);
    color: var(--white);
    font-weight: bold;
    border-bottom: 3px solid var(--yellow);
}

.eu-cbam .eu-step-text {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 10px;
}

.tab-panel.eu-cbam .eu-step h3 {
    margin: 0 0 4px 0;
    color: var(--blue);
}

.eu-cbam .eu-step p {
    margin: 0;
}

/* ----- Sectors (6 rows: text + photo, photo side swaps every other row) ----- */
/* One photo size for all six rows (3:2). Rows are divided by a 1px grey line. */

.eu-cbam .eu-sectors {
    margin: 32px 0 32px 0;
}

.eu-cbam .eu-sector {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, min(360px, 40%));
    gap: 40px;
    align-items: center;
    padding: 24px 0;
    border-top: 1px solid var(--grey);
}

.eu-cbam .eu-sector:last-child {
    border-bottom: 1px solid var(--grey);
}

/* Every second sector: photo on the left */
.eu-cbam .eu-sector:nth-child(even) {
    grid-template-columns: minmax(0, min(360px, 40%)) minmax(0, 1fr);
}

.eu-cbam .eu-sector:nth-child(even) .eu-sector-media {
    order: -1;
}

/* Sector name: card title style, no yellow underline (the capitals are typed in the page text) */
.tab-panel.eu-cbam .eu-sector h3 {
    margin: 0 0 8px 0;
    color: var(--blue);
    font-size: 1.1rem;
}

.eu-cbam .eu-sector-lead {
    font-size: 1.05rem;
}

.eu-cbam .eu-sector-text p:last-child {
    margin-bottom: 0;
}

.eu-cbam .eu-sector-media {
    padding: 8px;
    border: 1px solid var(--grey);
    background: var(--white);
}

.eu-cbam .eu-sector-media img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* Closing statement under the sectors (same style as "Our Vision" on the Home page) */
.eu-cbam .eu-statement {
    max-width: 760px;
    padding: 4px 0 4px 24px;
    border-left: 4px solid var(--yellow);
    color: var(--blue);
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.45;
}

.eu-cbam .eu-statement p {
    margin: 0;
}

/* ----- Filing obligations / Reducing emissions cards ----- */

.eu-cbam .eu-next {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: stretch;
    gap: 20px;
}

.eu-cbam .eu-next-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    background: var(--white);
    border: 1px solid var(--grey);
    border-top: 3px solid var(--yellow);
}

/* Both card headings use this one style (card title: 1.1rem bold blue). The first one is typed in
   capitals and the second in sentence case in the page text; no text-transform is used, so the
   authored text shows exactly as written. */
.tab-panel.eu-cbam .eu-next-card h2 {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    line-height: 1.35;
    color: var(--blue);
}

.eu-cbam .eu-next-subtitle {
    font-weight: bold;
}

/* Tag chips for short lists, e.g. "AMM", "CBAM Registry" (same chip on the UK page) */
.eu-cbam .eu-tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px 0;
    padding: 0;
}

.eu-cbam .eu-tags li {
    margin: 0;
    padding: 6px 12px;
    background: var(--white);
    border: 1px solid var(--grey);
    color: var(--text);
    font-size: 14px;
    line-height: 1.4;
}

.eu-cbam .eu-arrow-link {
    margin-top: auto;                  /* keeps both links at the bottom of their cards */
    font-weight: bold;
}

/* ----- Contact block at the end (closing call-to-action Panel: grey, yellow top line, blue bar) ----- */

.eu-cbam .eu-contact {
    padding: 28px;
    background: var(--light);
    border-top: 4px solid var(--yellow);
    border-left: 4px solid var(--blue);
    scroll-margin-top: 16px;
}

.tab-panel.eu-cbam .eu-contact h2 {
    margin-bottom: 14px;
    font-size: 1.5rem;
    color: #255D9D;
}

.eu-cbam .eu-contact .eu-tags li {
    background: var(--white);
}

.eu-cbam .eu-contact .eu-buttons {
    margin: 8px 0 12px 0;
}

.eu-cbam .eu-contact-email {
    margin: 0;
    font-weight: bold;
}

/* ----- EU CBAM tab: tablets and small screens ----- */

/* Current position: two cards per row */
@media (max-width: 1099px) {

    .eu-cbam .eu-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {

    .eu-cbam .eu-split-media {
        flex-basis: 100%;
        max-width: 420px;
    }

    .eu-cbam .eu-hero-image img {
        aspect-ratio: 3 / 2;
    }

    /* Sectors: one column, photo always under the text */
    .eu-cbam .eu-sector,
    .eu-cbam .eu-sector:nth-child(even) {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .eu-cbam .eu-sector:nth-child(even) .eu-sector-media {
        order: 0;
    }

    .eu-cbam .eu-position,
    .eu-cbam .eu-contact {
        padding: 20px;
    }
}

@media (max-width: 700px) {

    .eu-cbam .eu-block + .eu-block {
        margin-top: 40px;
    }
}

@media (max-width: 560px) {

    /* Current position: one card per row */
    .eu-cbam .eu-stats {
        grid-template-columns: minmax(0, 1fr);
    }

    /* "What do we need" list: heading above its description */
    .eu-cbam .eu-need {
        grid-template-columns: minmax(0, 1fr);
    }

    .eu-cbam .eu-buttons .eu-btn {
        width: 100%;
        text-align: center;
    }
}

/* ----- EU CBAM tab: images fill the space beside their content ----- */
/*
 * Removes the empty space next to images that are shorter than the text or
 * cards beside them. The image is stretched to the full height of its row and
 * cropped neatly (object-fit: cover), so both sides end at the same line.
 */

/* "Where are you today?", "What do we need from your installation?" and
   "How we work with an installation":
   the image column becomes as tall as the cards / steps beside it.
   (Built with flex, so if the columns stack on a small screen the image
   simply shows at its normal size.) */
.eu-cbam .eu-split:has(.eu-scenarios),
.eu-cbam .eu-split:has(.eu-needs),
.eu-cbam .eu-split:has(.eu-steps) {
    align-items: stretch;
}

.eu-cbam .eu-split:has(.eu-scenarios) .eu-split-media,
.eu-cbam .eu-split:has(.eu-needs) .eu-split-media,
.eu-cbam .eu-split:has(.eu-steps) .eu-split-media {
    display: flex;
    flex-direction: column;
}

.eu-cbam .eu-split:has(.eu-scenarios) .eu-split-media img,
.eu-cbam .eu-split:has(.eu-needs) .eu-split-media img,
.eu-cbam .eu-split:has(.eu-steps) .eu-split-media img {
    flex: 1 1 auto;
    min-height: 0;
    object-fit: cover;
    object-position: center top;       /* keeps the people / hands in view */
}

/* "What CBAM Advisory actually builds": the banner has text printed on it,
   so it is not cropped. It is centred in the section instead of leaving
   all the empty space on one side. */
.eu-cbam .eu-banner {
    margin-left: auto;
    margin-right: auto;
}

/* ---------- UK CBAM tab (What is CBAM? page) ---------- */
/*
 * Only used inside the UK CBAM tab (<div class="tab-panel uk-cbam">).
 * Mirrors the EU CBAM tab's visual language and structure exactly.
 * Every rule starts with ".uk-cbam" so nothing here can change the EU tab
 * or any other page.
 * v36 (chat 12f): same changes as the EU tab (intro beside its photo, Card / Panel / Note /
 * chip / image-frame rules), plus: yellow top lines on the formula boxes, the formula diagram
 * beside the illustration (1000px and up), two-column support list (900px and up) and the
 * timeline as four cards (900px and up).
 */

/* The UK tab uses the full page width (like the EU tab) */
.tab-panel.uk-cbam {
    max-width: none;
}

/* Space between the big blocks of the tab (same as the EU tab) */
.uk-cbam .uk-block + .uk-block {
    margin-top: 64px;
}

/* Section titles, e.g. "WHO DOES UK CBAM AFFECT?" */
.tab-panel.uk-cbam h2 {
    margin: 0 0 6px 0;
    font-size: 1.65rem;
    font-weight: bold;
    line-height: 1.25;
    color: var(--text);
}

/* Blue lead line under a section title */
.uk-cbam .uk-lead {
    margin: 0 0 24px 0;
    color: var(--blue);
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.4;
}

/* Default h3 inside the tab (cards / stats set their own size below) */
.tab-panel.uk-cbam h3 {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.35;
}

/* Keep plain text lines at a readable length */
.uk-cbam .uk-intro > p,
.uk-cbam .uk-text-width {
    max-width: 760px;
}

/* ----- Buttons ----- */

.uk-cbam .uk-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 24px 0 28px 0;
}

.uk-cbam .uk-btn {
    display: inline-block;
    padding: 12px 24px;
    min-height: 46px;
    border: 2px solid var(--blue);
    font-weight: bold;
    line-height: 1.3;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.uk-cbam .uk-btn-primary {
    background: var(--blue);
    color: var(--white);
}

.uk-cbam .uk-btn-primary:hover,
.uk-cbam .uk-btn-primary:focus {
    background: #255D9D;
    border-color: #255D9D;
    color: var(--white);
    text-decoration: none;
}

.uk-cbam .uk-btn:focus-visible {
    outline: 3px solid var(--yellow);
    outline-offset: 0;
    box-shadow: 0 0 0 5px var(--text);
}

/* ----- Images (image frame: 1px grey line, 8px white padding, no yellow line) ----- */

/* Hero photo: under the buttons on small screens, beside the intro text from 1000px (design-system.css) */
.uk-cbam .uk-hero-image {
    border: 1px solid var(--grey);
    padding: 8px;
    background: var(--white);
}

.uk-cbam .uk-hero-image img {
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
}

/* Banner image under a section - shown whole, centred, not stretched/cropped */
.uk-cbam .uk-banner {
    max-width: 600px;
    margin: 28px auto 0 auto;
    padding: 8px;
    border: 1px solid var(--grey);
    background: var(--white);
    text-align: center;
}

.uk-cbam .uk-banner img {
    display: block;
    width: 100%;
}

/* Image next to content (image left, content right; stacks on small screens) */
.uk-cbam .uk-split {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 32px;
}

.uk-cbam .uk-split-media {
    flex: 0 1 360px;
    padding: 8px;
    border: 1px solid var(--grey);
    background: var(--white);
}

.uk-cbam .uk-split-media img {
    width: 100%;
}

.uk-cbam .uk-split-body {
    flex: 1 1 420px;
    min-width: 0;
}

/* "For Overseas Producers": the image column becomes as tall as the list
   beside it, same approach as the EU CBAM tab's image/text height fixes.
   (Built with flex, so if the columns stack on a small screen the image
   simply shows at its normal size.) */
.uk-cbam .uk-split:has(.uk-plain-list) {
    align-items: stretch;
}

.uk-cbam .uk-split:has(.uk-plain-list) .uk-split-media {
    display: flex;
    flex-direction: column;
}

.uk-cbam .uk-split:has(.uk-plain-list) .uk-split-media img {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    object-fit: cover;
}

/* ----- UK CBAM Current Position (Panel with four cards and a note) ----- */

.uk-cbam .uk-position {
    padding: 28px;
    background: var(--light);
    border-left: 4px solid var(--blue);
}

.uk-cbam .uk-position h2 {
    margin-bottom: 20px;
}

/* Four cards in a row (two rows of two on tablets, one column on phones), same as the EU tab */
.uk-cbam .uk-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px;
    margin: 0 0 16px 0;
}

.uk-cbam .uk-stat {
    padding: 24px;
    background: var(--white);
    border: 1px solid var(--grey);
    border-top: 3px solid var(--yellow);
}

.tab-panel.uk-cbam .uk-stat h3 {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    color: var(--blue);
}

.uk-cbam .uk-stat p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

.uk-cbam .uk-stat p.uk-stat-value {
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.4;
}

/* "Indirect Emissions" is a Note: pale yellow, 4px yellow bar on the left */
.uk-cbam .uk-watch {
    padding: 16px 20px;
    background: var(--yellow-tint);
    border-left: 4px solid var(--yellow);
    color: var(--text);
}

.tab-panel.uk-cbam .uk-watch h3 {
    margin: 0 0 6px 0;
    color: var(--blue-deep);
}

.uk-cbam .uk-watch p {
    margin: 0;
}

/* ----- Who Does UK CBAM Affect? (2 cards) ----- */

.uk-cbam .uk-affect-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    align-items: stretch;
    gap: 16px;
}

.uk-cbam .uk-affect-card {
    padding: 24px;
    background: var(--white);
    border: 1px solid var(--grey);
    border-top: 3px solid var(--yellow);
}

.tab-panel.uk-cbam .uk-affect-card h3 {
    color: var(--blue);
    font-size: 1.1rem;
}

.uk-cbam .uk-affect-card p {
    margin: 0;
}

/* ----- How UK CBAM Liability Is Built (vertical formula flow) ----- */
/* Single clean vertical layout: boxes joined by a plain arrow, with
   the operator (x or -) shown between paired boxes on wide screens
   and stacked with the operator on its own line on small screens.
   From 1000px the diagram sits on the left and the illustration on the right, with the
   sentence underneath both (see the end of this section). */

.uk-cbam .uk-formula {
    max-width: 600px;
    margin: 0 auto 28px auto;
}

.uk-cbam .uk-formula-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

/* Formula boxes are cards: yellow top line (they were blue before v36) */
.uk-cbam .uk-formula-box {
    flex: 1 1 auto;
    padding: 14px 18px;
    background: var(--white);
    border: 1px solid var(--grey);
    border-top: 3px solid var(--yellow);
    text-align: center;
    font-weight: bold;
    line-height: 1.3;
}

.uk-cbam .uk-formula-box.uk-formula-result {
    background: var(--blue);
    color: var(--white);
    border-top-color: var(--yellow);
    font-size: 1.1rem;
}

.uk-cbam .uk-formula-op {
    flex: 0 0 auto;
    color: var(--blue);
    font-size: 1.4rem;
    font-weight: bold;
}

/* Plain vertical arrow between each row */
.uk-cbam .uk-formula-arrow {
    position: relative;
    width: 2px;
    height: 28px;
    margin: 0 auto;
    background: var(--blue);
}

.uk-cbam .uk-formula-arrow::after {
    content: '';
    position: absolute;
    left: -5px;
    bottom: -1px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid var(--blue);
}

/* ----- Actual Emissions or Default Values? (Panel with two cards) ----- */

.uk-cbam .uk-data-route {
    padding: 28px;
    background: var(--light);
    border-left: 4px solid var(--blue);
}

.uk-cbam .uk-data-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: stretch;
    gap: 20px;
    margin: 0 0 20px 0;
}

.uk-cbam .uk-data-col {
    padding: 24px;
    background: var(--white);
    border: 1px solid var(--grey);
    border-top: 3px solid var(--yellow);
}

.tab-panel.uk-cbam .uk-data-col h3 {
    color: var(--blue);
    font-size: 1.1rem;
}

.uk-cbam .uk-data-col p:last-child {
    margin-bottom: 0;
}

.uk-cbam .uk-statement {
    margin: 0;
    padding: 4px 0 4px 24px;
    border-left: 4px solid var(--yellow);
    color: #255D9D;
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.45;
}

/* ----- Plain list used inside the overseas-producer split ----- */

.uk-cbam .uk-plain-list {
    margin: 0 0 20px 0;
    padding: 0 0 0 20px;
    line-height: 1.6;
}

/* Short note under a list, e.g. "The UK has already published..." (Note: pale yellow, yellow bar) */
.uk-cbam .uk-note {
    max-width: none;
    margin: 0;
    padding: 16px 20px;
    background: var(--yellow-tint);
    border-left: 4px solid var(--yellow);
    color: var(--text);
}

/* ----- Tag chips (Carbon Price Relief list, contact list; same chip as the EU page) ----- */

.uk-cbam .uk-tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px 0;
    padding: 0;
}

.uk-cbam .uk-tags li {
    margin: 0;
    padding: 6px 12px;
    background: var(--white);
    border: 1px solid var(--grey);
    color: var(--text);
    font-size: 14px;
    line-height: 1.4;
}

/* ----- What CBAM Advisory Can Support (plain list; two columns from 900px) ----- */

.uk-cbam .uk-support-list {
    max-width: 760px;
    margin: 0;
    padding: 0 0 0 20px;
    line-height: 1.7;
}

/* ----- Short Compliance Timeline (vertical list; four cards in a row from 900px) ----- */

.uk-cbam .uk-timeline {
    max-width: 760px;
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--grey);
}

.uk-cbam .uk-timeline li {
    padding: 14px 0;
    border-bottom: 1px solid var(--grey);
    line-height: 1.5;
}

.uk-cbam .uk-timeline-date {
    color: var(--blue);
    font-weight: bold;
}

/* ----- Contact block at the end (closing call-to-action Panel: grey, yellow top line, blue bar) ----- */

.uk-cbam .uk-contact {
    padding: 28px;
    background: var(--light);
    border-top: 4px solid var(--yellow);
    border-left: 4px solid var(--blue);
    scroll-margin-top: 16px;
}

.tab-panel.uk-cbam .uk-contact h2 {
    margin-bottom: 14px;
    font-size: 1.5rem;
    color: #255D9D;
}

.uk-cbam .uk-contact .uk-tags li {
    background: var(--white);
}

.uk-cbam .uk-contact .uk-buttons {
    margin: 8px 0 12px 0;
}

.uk-cbam .uk-contact-email {
    margin: 0;
    font-weight: bold;
}

/* ----- UK CBAM tab: wide screens ----- */

/* v39: the diagram and the illustration are stacked again (diagram, sentence, illustration), as before v36. */

@media (min-width: 900px) {

    .uk-cbam .uk-support-list {
        max-width: none;
        column-count: 2;
        column-gap: 48px;
    }

    .uk-cbam .uk-support-list li {
        break-inside: avoid;
    }

    /* Timeline: four equal cards, date in bold blue on top, text below. No arrows between them. */
    .uk-cbam .uk-timeline {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: stretch;
        gap: 20px;
        max-width: none;
        border-top: 0;
    }

    .uk-cbam .uk-timeline li {
        margin: 0;
        padding: 24px;
        background: var(--white);
        border: 1px solid var(--grey);
        border-top: 3px solid var(--yellow);
    }

    .uk-cbam .uk-timeline-date {
        display: block;
        margin: 0 0 8px 0;
    }
}

/* ----- UK CBAM tab: tablets and small screens ----- */

/* Current position: two cards per row */
@media (max-width: 1099px) {

    .uk-cbam .uk-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {

    .uk-cbam .uk-split-media {
        flex-basis: 100%;
        max-width: 420px;
    }

    .uk-cbam .uk-hero-image img {
        aspect-ratio: 3 / 2;
    }

    .uk-cbam .uk-position,
    .uk-cbam .uk-data-route,
    .uk-cbam .uk-contact {
        padding: 20px;
    }

    /* Paired formula boxes stack with the operator on its own line */
    .uk-cbam .uk-formula-row-pair {
        flex-direction: column;
    }

    .uk-cbam .uk-formula-row-pair .uk-formula-box {
        width: 100%;
    }
}

@media (max-width: 700px) {

    .uk-cbam .uk-block + .uk-block {
        margin-top: 40px;
    }
}

@media (max-width: 560px) {

    /* Current position: one card per row */
    .uk-cbam .uk-stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .uk-cbam .uk-buttons .uk-btn {
        width: 100%;
        text-align: center;
    }
}

/* ---------- About us page (about-us.php) ---------- */
/*
 * Only used on about-us.php (<div class="about-page">).
 * Same look as the UK CBAM tab: flat colours, thin grey borders, yellow
 * accent bars, blue headings and buttons. No animations.
 * Every rule starts with ".about-page" so nothing here can change any
 * other page.
 *
 * TEAM PHOTOS: three identical circles (aspect-ratio 1 / 1, border-radius 50%,
 * object-fit: cover), so a photo can never become an oval or be stretched.
 * Each circle is 180px with a 3px white gap and a 3px EC Blue ring (v37: the small
 * yellow dot on the ring was removed). The framing of each face is done here with
 * object-position and scale; the photo files themselves are not cropped.
 */

/* Space between the big blocks (same as the UK CBAM tab) */
.about-page .about-block + .about-block {
    margin-top: 64px;
}

/* Section titles - same size, weight and colour everywhere
   ("Our Story", "Meet the Team", "Part of Decarbonise Fuel Limited") */
.about-page h2 {
    margin: 0 0 6px 0;
    font-size: 1.65rem;
    font-weight: bold;
    line-height: 1.25;
    color: var(--text);
}

/* Blue lead line under a title */
.about-page .about-lead {
    margin: 0 0 24px 0;
    color: var(--blue);
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.4;
}

/* Comfortable line length for plain text (up to 760px) */
.about-page .about-intro > p {
    max-width: 760px;
}

.about-page .about-parent > p {
    max-width: 760px;
}

/* ----- Buttons (same as the UK CBAM tab) ----- */

.about-page .about-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 24px 0 0 0;
}

.about-page .about-btn {
    display: inline-block;
    padding: 12px 24px;
    min-height: 46px;
    border: 2px solid var(--blue);
    font-weight: bold;
    line-height: 1.3;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.about-page .about-btn-primary {
    background: var(--blue);
    color: var(--white);
}

.about-page .about-btn-primary:hover,
.about-page .about-btn-primary:focus {
    background: #255D9D;
    border-color: #255D9D;
    color: var(--white);
    text-decoration: none;
}

.about-page .about-btn:focus-visible {
    outline: 3px solid var(--yellow);
    outline-offset: 0;
    box-shadow: 0 0 0 5px var(--text);
}

/* Intro: comfortable space under the last paragraph and below the button */
.about-page .about-intro .about-buttons {
    margin: 28px 0 0 0;
}

/* ----- Contact buttons (email = outlined, LinkedIn = solid) ----- */

.about-page .about-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 12px 24px;
    border: 2px solid var(--blue);
    border-radius: 0;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.3;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.about-page .about-contact-btn span {
    min-width: 0;
    overflow-wrap: break-word;
}

.about-page .about-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

/* Email: white with EC Blue border and text */
.about-page .about-contact-btn-email {
    background: var(--white);
    color: #255D9D;
}

.about-page .about-contact-btn-email:hover {
    background: #E8EEF6;
    border-color: #255D9D;
    color: #255D9D;
    text-decoration: none;
}

/* LinkedIn: solid filled */
.about-page .about-contact-btn-linkedin {
    background: #0A66C2;
    border-color: #0A66C2;
    color: var(--white);
}

.about-page .about-contact-btn-linkedin:hover {
    background: #084E96;
    border-color: #084E96;
    color: var(--white);
    text-decoration: none;
}

.about-page .about-contact-btn:focus-visible {
    outline: 3px solid var(--yellow);
    outline-offset: 0;
    box-shadow: 0 0 0 5px var(--text);
}

/* ----- Our Story: ONE grey Panel (4px blue left bar, 28px padding) with two columns inside.
   v37: the extra white box and its border / yellow top line were removed. One column below 900px
   (text, then the facts card); text left and facts card right from 900px (see further down). ----- */

.about-page .about-story {
    padding: 28px;
    background: var(--light);
    border-left: 4px solid var(--blue);
}

.about-page .about-story-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 28px;
}

.about-page .about-story-text {
    min-width: 0;
}

.about-page .about-story-text > p {
    max-width: 75ch;
}

.about-page .about-story-text > p:last-child {
    margin-bottom: 0;
}

/* The lead line sits on the grey Panel, so it uses the dark blue (contrast) */
.about-page .about-story .about-lead {
    color: #255D9D;
}

/* Quick-facts Card: white, 1px grey border, 3px yellow top line, 24px padding */
.about-page .about-facts {
    display: flex;
    min-width: 0;
    padding: 24px;
    background: var(--white);
    border: 1px solid var(--grey);
    border-top: 3px solid var(--yellow);
}

/* Three facts spaced evenly over the full height of the box */
.about-page .about-facts dl {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
}

.about-page .about-fact {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-page .about-fact + .about-fact {
    border-top: 1px solid var(--grey);
}

.about-page .about-facts dt {
    margin: 0 0 2px 0;
    color: var(--blue);
    font-size: 0.85rem;
    font-weight: bold;
    line-height: 1.4;
}

.about-page .about-facts dd {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.4;
}

/* ----- Meet the Team ----- */

.about-page .about-team h2 {
    margin-bottom: 20px;
}

.about-page .about-team-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* One Card per person: white, 1px grey border, 3px yellow top line, 24px padding
   (v37: the 4px blue left border was removed). All three cards use the same padding. */
.about-page .about-member {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 24px;
    background: var(--white);
    border: 1px solid var(--grey);
    border-top: 3px solid var(--yellow);
}

/* Photo column: same width for all three, so the text starts at the same
   left position in every card. The circle (size set by --photo-size) sits
   inside it. */
.about-page .about-member-photo {
    --photo-size: 240px;
    position: relative;
    flex: 0 0 auto;
    width: var(--photo-size);
    display: flex;
    justify-content: center;
}

/* The circle: 180px, a 3px white gap, then a 3px EC Blue ring (set by --ring-w).
   v37: the small yellow dot on the ring was removed.
   Box-sizing keeps the total size exact. */
.about-page .about-photo-circle {
    --ring-w: 3px;
    position: relative;
    display: block;
    width: var(--photo-size);
    max-width: 100%;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    border: var(--ring-w) solid var(--blue);
    border-radius: 50%;
    padding: var(--ring-w);
    background: var(--white);
}

/* The picture fills the circle. The clip shell cuts it to a perfect circle,
   so even a scaled picture (James) can never spill outside. Nothing is
   stretched (object-fit: cover). */
.about-page .about-photo-clip {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}

.about-page .about-photo-clip img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

/* Face framing for each person (the photo files are not cropped).
   William: square portrait, face centred - just a small offset so there is a
   little room above his head.
   Sajawal: head and top of shoulders.
   James: he is small in the lower-left of his photo, so the picture is scaled
   up inside the circle and positioned on his face and upper body. The scale is
   kept moderate so the picture stays sharp at this size. */
.about-page .about-photo-william .about-photo-clip img {
    object-position: 50% 35%;
}

.about-page .about-photo-sajawal .about-photo-clip img {
    object-position: 50% 15%;
}

.about-page .about-photo-james .about-photo-clip img {
    object-position: 0% 100%;
    transform: scale(1.8);
    transform-origin: 27.8% 64.4%;
}

/* Text column */
.about-page .about-member-body {
    flex: 1 1 auto;
    min-width: 0;
}

.about-page .about-member-body h3 {
    margin: 0 0 4px 0;
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.3;
}

.about-page .about-role {
    margin: 0 0 16px 0;
    color: var(--blue);
    font-weight: 600;
    line-height: 1.4;
}

.about-page .about-member-body > p {
    max-width: 75ch;
    margin: 0 0 16px 0;
}

/* Contact row: thin grey line above, then email, phone and LinkedIn in one row that wraps cleanly
   (equal height 46px, 12px gap) */
.about-page .about-member-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--grey);
}

/* ----- Part of Decarbonise Fuel Limited ----- */

/* Company details box: full content width, same edges as the contact block */
.about-page .about-note {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px 96px;
    max-width: none;
    margin: 24px 0 0 0;
    padding: 28px;
    background: var(--light);
    border-left: 4px solid var(--blue);
}

.about-page .about-note p {
    margin: 0 0 6px 0;
}

.about-page .about-note p:last-child {
    margin-bottom: 0;
}

.about-page .about-note-main,
.about-page .about-note-address {
    min-width: 0;
}

.about-page .about-note-address {
    text-align: left;
}

/* ----- Contact block at the end (same as the EU / UK CBAM tabs) ----- */

.about-page .about-contact {
    padding: 28px;
    background: var(--light);
    border-top: 4px solid var(--yellow);
    border-left: 4px solid var(--blue);
    scroll-margin-top: 16px;
}

.about-page .about-contact h2 {
    margin-bottom: 14px;
    font-size: 1.5rem;
    color: #255D9D;
}

.about-page .about-contact .about-buttons {
    margin: 8px 0 16px 0;
}

.about-page .about-contact-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ----- About us page: tablet ----- */

/* Below 900px the quick-facts Card sits under the story text, full width */
@media (max-width: 899px) {

    .about-page .about-fact {
        flex: 0 0 auto;
        padding: 14px 0;
    }

    .about-page .about-fact:first-child {
        padding-top: 0;
    }

    .about-page .about-fact:last-child {
        padding-bottom: 0;
    }

}

/* From 900px: text on the left, quick-facts Card on the right, inside the one Panel */
@media (min-width: 900px) {

    .about-page .about-story-inner {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 40px;
    }

}

/* ----- About us page: tablet (circle stays 180px, still beside the text) ----- */

@media (max-width: 1000px) {

    .about-page .about-member {
        gap: 24px;
    }
}

/* ----- About us page: small screens ----- */

@media (max-width: 800px) {

    .about-page .about-block + .about-block {
        margin-top: 44px;
    }

    .about-page h2 {
        font-size: 1.3rem;
    }

    .about-page .about-story,
    .about-page .about-contact {
        padding: 20px;
    }
}

@media (max-width: 699px) {

    /* Team card: one column, circle centred at the top, then the text */
    .about-page .about-member {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding: 24px 16px;
    }

    /* Circle 180px, centred, same for all three cards */
    .about-page .about-member-photo {
        width: 100%;
        justify-content: center;
    }

    .about-page .about-member-body {
        width: 100%;
    }

    /* Buttons stack full width with a comfortable tap height */
    .about-page .about-member-contact,
    .about-page .about-contact-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .about-page .about-contact-btn {
        width: 100%;
        min-height: 46px;
        gap: 8px;
        padding: 12px 12px;
    }

    /* Company box: one column */
    .about-page .about-note {
        flex-direction: column;
        gap: 12px;
        padding: 20px;
    }
}

@media (max-width: 560px) {

    .about-page .about-buttons .about-btn {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 390px) {

    .about-page .about-member {
        padding: 20px 12px;
    }

    .about-page .about-contact-btn {
        gap: 6px;
        padding: 12px 8px;
    }

    .about-page .about-icon {
        width: 16px;
        height: 16px;
    }
}

/* ---------- Filing obligations page (filing-obligations.php) ---------- */
/*
 * Only used on filing-obligations.php (<div class="filing-page">).
 * Same look as the UK CBAM tab and the About us page: flat colours, thin grey
 * borders, yellow accent bars, blue headings and buttons. No animations.
 * Every rule starts with ".filing-page" so nothing here can change any other page.
 *
 * Contents: layout and titles / buttons / hero photo / selector / lists /
 *           key dates / numbered cards / process line / supplier split /
 *           working steps / intake form / tablet / small screens
 * v36 (chat 12f): the intro sits beside its photo from 1000px (rule shared with the other three
 * pages, see design-system.css); cards, panels, notes and image frames follow the design-system
 * rules; the "Support at any stage" chips are a grid; the lists run in two columns from 900px.
 */

/* The "hidden" attribute must always win inside this page (used by the selector and the form) */
.filing-page [hidden] {
    display: none !important;
}

/* Space between the big blocks */
.filing-page .fp-block + .fp-block {
    margin-top: 64px;
}

/* Section titles */
.filing-page h2 {
    margin: 0 0 6px 0;
    font-size: 1.65rem;
    font-weight: bold;
    line-height: 1.25;
    color: var(--text);
    scroll-margin-top: 16px;
}

/* Blue lead line under a title */
.filing-page .fp-lead {
    margin: 0 0 24px 0;
    color: var(--blue);
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.4;
}

/* Comfortable line length for plain text */
.filing-page .fp-text-width {
    max-width: 760px;
}

/* ----- Buttons (same as the UK CBAM tab and About us) ----- */

.filing-page .fp-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 24px 0 0 0;
}

.filing-page .fp-btn {
    display: inline-block;
    max-width: 100%;
    min-height: 46px;
    padding: 12px 24px;
    border: 2px solid var(--blue);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.filing-page .fp-btn-primary {
    background: var(--blue);
    color: var(--white);
}

.filing-page .fp-btn-primary:hover,
.filing-page .fp-btn-primary:focus {
    background: #255D9D;
    border-color: #255D9D;
    color: var(--white);
    text-decoration: none;
}

/* Second button next to the first: white with blue border and text */
.filing-page .fp-btn-outline {
    background: var(--white);
    color: #255D9D;
}

.filing-page .fp-btn-outline:hover,
.filing-page .fp-btn-outline:focus {
    background: #E8EEF6;
    border-color: #255D9D;
    color: #255D9D;
    text-decoration: none;
}

.filing-page .fp-btn:focus-visible {
    outline: 3px solid var(--yellow);
    outline-offset: 0;
    box-shadow: 0 0 0 5px var(--text);
}

/* ----- Hero photo (image frame: 1px grey line, 8px white padding, no yellow line).
         Under the buttons on small screens (shown whole, never stretched); beside the intro text
         from 1000px (design-system.css). ----- */

.filing-page .fp-hero {
    margin: 32px 0 0 0;
    padding: 8px;
    border: 1px solid var(--grey);
    background: var(--white);
}

.filing-page .fp-hero img {
    width: 100%;
    height: auto;
}

/* ----- 2. Selector: market and role ----- */

.filing-page .fp-step-box {
    margin: 0 0 20px 0;
}

.filing-page .fp-step-label {
    margin: 0 0 10px 0;
    font-weight: bold;
}

.filing-page .fp-step-label span {
    display: inline-block;
    margin-right: 6px;
    padding: 2px 8px;
    background: var(--blue);
    color: var(--white);
    font-size: 0.85rem;
    border-bottom: 2px solid var(--yellow);
}

.filing-page .fp-choices {
    display: grid;
    gap: 12px;
}

.filing-page .fp-choices-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.filing-page .fp-choices-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.filing-page .fp-choice {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 16px 24px 16px 52px;
    background: var(--white);
    border: 1px solid var(--grey);
    border-top: 3px solid var(--yellow);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.3;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Small round marker on the left: empty when not chosen, filled when chosen */
.filing-page .fp-choice::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    border: 2px solid var(--blue);
    border-radius: 50%;
    background: var(--white);
}

.filing-page .fp-choice:hover {
    background: var(--light);
}

.filing-page .fp-choice[aria-pressed="true"] {
    background: var(--blue);
    border-color: var(--blue);
    border-top-color: var(--yellow);
    color: var(--white);
}

.filing-page .fp-choice[aria-pressed="true"]::before {
    border-color: var(--white);
    background: var(--yellow);
}

.filing-page .fp-choice:focus-visible {
    outline: 3px solid var(--yellow);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--text);
}

/* Result box is a Note: pale yellow background, 4px yellow bar on the left */
.filing-page .fp-result {
    max-width: 760px;
    margin: 4px 0 0 0;
    padding: 16px 20px;
    background: var(--yellow-tint);
    border-left: 4px solid var(--yellow);
    color: var(--text);
}

.filing-page .fp-result p {
    margin: 0 0 12px 0;
}

.filing-page .fp-result .fp-result-uknote {
    color: #255D9D;
    font-weight: bold;
}

.filing-page .fp-result .fp-buttons {
    margin-top: 16px;
}

/* ----- 3. Plain bullet list ----- */

.filing-page .fp-list {
    max-width: 760px;
    margin: 14px 0 0 0;
    padding: 0 0 0 20px;
    line-height: 1.7;
}

.filing-page .fp-list li {
    overflow-wrap: anywhere;
}

/* Wide screens: the long list runs in two columns */
@media (min-width: 900px) {

    .filing-page .fp-list {
        max-width: none;
        column-count: 2;
        column-gap: 48px;
    }

    .filing-page .fp-list li {
        break-inside: avoid;
    }
}

/* ----- 4 and 5. Support sections ----- */

.filing-page .fp-support > p {
    margin: 0 0 24px 0;
}

/* Key dates strip: a Panel with three cards (same sizes and spacing as "Current Position" on the EU and UK pages) */
.filing-page .fp-position {
    margin: 0 0 28px 0;
    padding: 28px;
    background: var(--light);
    border-left: 4px solid var(--blue);
}

.filing-page .fp-position-title {
    margin: 0 0 20px 0;
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.35;
    color: #255D9D;
}

.filing-page .fp-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px;
    margin: 0;
}

.filing-page .fp-stat {
    padding: 24px;
    background: var(--white);
    border: 1px solid var(--grey);
    border-top: 3px solid var(--yellow);
}

.filing-page .fp-stat p {
    margin: 0;
}

.filing-page .fp-stat .fp-stat-label {
    margin: 0 0 8px 0;
    color: var(--blue);
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.35;
}

.filing-page .fp-stat .fp-stat-value {
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.4;
}

/* Numbered cards: one under the other, same as the numbered cards on the EU CBAM tab */
.filing-page .fp-card-wrap {
    margin: 0 0 24px 0;
}

.filing-page .fp-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--grey);
    border-top: 3px solid var(--yellow);
}

.filing-page .fp-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 24px 24px 16px 24px;
    border-bottom: 1px solid var(--grey);
}

.filing-page .fp-card-number {
    flex: 0 0 auto;
    margin: 0;
    color: var(--blue);
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
}

.filing-page .fp-card h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.35;
    color: var(--blue);
    overflow-wrap: break-word;
    min-width: 0;
}

.filing-page .fp-card-body {
    padding: 20px 24px 8px 24px;
}

.filing-page .fp-card-lead {
    margin: 0 0 14px 0;
    font-weight: bold;
}

.filing-page .fp-card-label {
    margin: 0 0 8px 0;
    color: var(--blue);
    font-weight: bold;
}

/* Long lists run in two columns on wide screens so the card has no empty space */
.filing-page .fp-card ul {
    margin: 0 0 14px 0;
    padding: 0 0 0 20px;
    columns: 2;
    column-gap: 36px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.filing-page .fp-card li {
    margin: 0 0 6px 0;
    break-inside: avoid;
    overflow-wrap: anywhere;
}

/* "You receive:" sits on a light band at the bottom of the card */
.filing-page .fp-card-receive {
    margin: 0;
    padding: 16px 24px;
    background: var(--light);
    border-top: 1px solid var(--grey);
    line-height: 1.5;
}

/* Technical note: smaller, distinct, like a footnote */
.filing-page .fp-tech-note {
    margin: 0;
    padding: 16px 24px;
    border-top: 1px dashed var(--grey);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-note);
}

/* Small note directly under a card */
.filing-page .fp-card-note {
    max-width: 760px;
    margin: 10px 0 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-note);
}

/* Support at any stage: chips in a grid, 4 per row (2 per row on tablets, 1 per row on phones).
   The arrow after a chip sits in the gap beside it and is only shown between neighbours of the same row. */
.filing-page .fp-stage-title {
    margin: 36px 0 14px 0;
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1.3;
}

.filing-page .fp-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 12px 32px;
    margin: 0 0 20px 0;
    padding: 0;
    list-style: none;
}

.filing-page .fp-flow li {
    position: relative;
    display: flex;
    min-width: 0;
    margin: 0;
}

.filing-page .fp-flow-step {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 12px 16px;
    background: var(--white);
    border: 1px solid var(--grey);
    border-bottom: 3px solid var(--yellow);
    font-size: 0.95rem;
    font-weight: bold;
    line-height: 1.35;
    overflow-wrap: break-word;
}

/* The arrow (a decorative character in the page, hidden from screen readers) sits in the 32px gap */
.filing-page .fp-flow-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue);
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1;
}

/* 4 per row: no arrow after the 4th and 8th chip */
.filing-page .fp-flow li:nth-child(4n) .fp-flow-arrow {
    display: none;
}

/* ----- 6. Supplying goods (photo left, text right) ----- */

.filing-page .fp-split {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 32px;
    align-items: stretch;
}

/* The photo box (image frame) is as tall as the text card beside it, so there is no empty gap under or over it */
.filing-page .fp-split-media {
    display: flex;
    flex-direction: column;
    padding: 8px;
    border: 1px solid var(--grey);
    background: var(--white);
}

.filing-page .fp-split-media img {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    object-fit: cover;
}

/* The text side is a Card: white, 1px grey line, 3px yellow top line, 24px padding */
.filing-page .fp-split-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 24px;
    background: var(--white);
    border: 1px solid var(--grey);
    border-top: 3px solid var(--yellow);
}

.filing-page .fp-split-body p {
    margin: 0;
    max-width: 62ch;
}

.filing-page .fp-split-body .fp-buttons {
    margin-top: 20px;
}

/* ----- 7. What working with us looks like (same step pattern and sizes as the EU CBAM tab) ----- */

.filing-page .fp-steps {
    list-style: none;
    margin: 18px 0 0 0;
    padding: 0;
}

.filing-page .fp-step {
    position: relative;
    display: flex;
    gap: 16px;
    margin: 0;
    padding: 0 0 24px 0;
}

.filing-page .fp-step:last-child {
    padding-bottom: 0;
}

/* Plain blue line joining each number box to the next one */
.filing-page .fp-step:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 48px;
    bottom: 0;
    left: 23px;
    width: 2px;
    background: var(--blue);
}

.filing-page .fp-step-number {
    flex: 0 0 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue);
    color: var(--white);
    font-weight: bold;
    border-bottom: 3px solid var(--yellow);
}

.filing-page .fp-step-text {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 760px;
    padding-top: 10px;
}

.filing-page .fp-step h3 {
    margin: 0 0 4px 0;
    color: var(--blue);
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.35;
}

.filing-page .fp-step p {
    margin: 0;
}

/* ----- 8. Intake form (same field look as the EU CBAM checker) ----- */

/* Panel look of the Contact form box: grey, 4px yellow top line, 4px blue bar on the left, 28px padding */
.filing-page .fp-form-block {
    padding: 28px;
    background: var(--light);
    border-top: 4px solid var(--yellow);
    border-left: 4px solid var(--blue);
    scroll-margin-top: 16px;
}

.filing-page .fp-form-block h2 {
    margin-bottom: 14px;
    font-size: 1.5rem;
    color: #255D9D;
}

.filing-page .fp-form {
    margin: 24px 0 0 0;
}

.filing-page .fp-form-hint {
    margin: 0 0 20px 0;
    font-size: 0.9rem;
    color: #444444;
}

.filing-page .fp-form-ask {
    margin: 0 0 20px 0;
}

.filing-page .fp-field {
    margin: 0 0 18px 0;
    min-width: 0;
}

.filing-page .fp-field > label,
.filing-page .fp-fieldset legend {
    display: block;
    margin: 0 0 6px 0;
    font-weight: bold;
    line-height: 1.35;
}

.filing-page .fp-fieldset {
    margin: 0 0 18px 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.filing-page .fp-fieldset legend {
    padding: 0;
}

.filing-page .fp-note {
    font-weight: normal;
    color: #444444;
}

.filing-page .fp-form input[type="text"],
.filing-page .fp-form input[type="email"] {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 46px;
    padding: 8px 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    color: var(--text);
    background: var(--white);
    border: 1px solid #595959;
    border-radius: 0;
}

.filing-page .fp-form input[type="text"]::placeholder,
.filing-page .fp-form input[type="email"]::placeholder {
    color: #595959;
    opacity: 1;
}

.filing-page .fp-form input[type="text"]:focus,
.filing-page .fp-form input[type="email"]:focus {
    outline: 3px solid var(--yellow);
    outline-offset: 0;
    border-color: var(--text);
}

.filing-page .fp-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
}

/* Tick boxes and round buttons: big enough to tap (at least 44px tall) */
.filing-page .fp-checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
}

.filing-page .fp-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 0 28px;
}

.filing-page .fp-check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
}

.filing-page .fp-check input {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--blue);
}

.filing-page .fp-check input:focus-visible {
    outline: 3px solid var(--yellow);
    outline-offset: 2px;
}

.filing-page .fp-check label {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 0;
    line-height: 1.4;
    overflow-wrap: anywhere;
    cursor: pointer;
}

/* Problems: a dark line and a plain message (not colour alone) */
.filing-page .fp-error {
    margin: 6px 0 0 0;
    font-size: 0.9rem;
    font-weight: bold;
    line-height: 1.4;
    color: #B00020;
}

.filing-page .fp-invalid input[type="text"],
.filing-page .fp-invalid input[type="email"] {
    border: 2px solid #B00020;
}

.filing-page .fp-error-summary {
    margin: 0 0 20px 0;
    padding: 14px 18px;
    background: var(--white);
    border: 1px solid var(--grey);
    border-left: 4px solid #B00020;
}

.filing-page .fp-error-summary p {
    margin: 0 0 6px 0;
}

.filing-page .fp-error-summary ul {
    margin: 0;
    padding: 0 0 0 20px;
}

.filing-page .fp-error-summary a {
    color: #B00020;
    overflow-wrap: anywhere;
}

.filing-page .fp-error-summary:focus {
    outline: 3px solid var(--yellow);
}

.filing-page .fp-form-buttons {
    margin-top: 8px;
}

/* Thank-you message shown instead of the form */
.filing-page .fp-thanks {
    margin: 24px 0 0 0;
    padding: 20px 22px;
    background: var(--white);
    border: 1px solid var(--grey);
    border-left: 4px solid var(--blue);
}

.filing-page .fp-thanks h3 {
    margin: 0 0 6px 0;
    color: var(--blue);
    font-size: 1.2rem;
}

.filing-page .fp-thanks p {
    margin: 0;
    overflow-wrap: anywhere;
}

.filing-page .fp-thanks:focus {
    outline: 3px solid var(--yellow);
}

/* ----- Filing obligations page: tablet ----- */

@media (max-width: 900px) {

    .filing-page .fp-choices-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filing-page .fp-split {
        gap: 24px;
    }
}

/* "Support at any stage" chips: 2 per row below 900px (arrow only after the 1st chip of each pair) */
@media (max-width: 899px) {

    .filing-page .fp-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filing-page .fp-flow li:nth-child(4n) .fp-flow-arrow {
        display: flex;
    }

    .filing-page .fp-flow li:nth-child(2n) .fp-flow-arrow {
        display: none;
    }
}

/* Phones: chips one per row, no arrows (there are no neighbours in the same row) */
@media (max-width: 639px) {

    .filing-page .fp-flow {
        grid-template-columns: minmax(0, 1fr);
    }

    .filing-page .fp-flow li .fp-flow-arrow,
    .filing-page .fp-flow li:nth-child(4n) .fp-flow-arrow,
    .filing-page .fp-flow li:nth-child(2n) .fp-flow-arrow {
        display: none;
    }
}

/* Key dates: three cards in a row from 760px, one per row below */
@media (max-width: 759px) {

    .filing-page .fp-stats {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ----- Filing obligations page: small screens ----- */

@media (max-width: 700px) {

    .filing-page .fp-block + .fp-block {
        margin-top: 40px;
    }

    /* Selector and lists: one column, tall tap targets */
    .filing-page .fp-choices-2,
    .filing-page .fp-choices-3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .filing-page .fp-card ul {
        columns: 1;
    }

    /* Photo above the text, shown whole at its natural shape */
    .filing-page .fp-split {
        grid-template-columns: minmax(0, 1fr);
    }

    .filing-page .fp-split-media img {
        flex: 0 0 auto;
        height: auto;
    }

    .filing-page .fp-position {
        padding: 20px 16px;
    }

    .filing-page .fp-form-block {
        padding: 20px 16px;
    }

    .filing-page .fp-row,
    .filing-page .fp-checks {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Buttons stack full width with a comfortable tap height */
    .filing-page .fp-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .filing-page .fp-btn {
        width: 100%;
    }

    .filing-page .fp-card-head,
    .filing-page .fp-card-body,
    .filing-page .fp-card-receive,
    .filing-page .fp-tech-note {
        padding-left: 14px;
        padding-right: 14px;
    }

}

/* Very small screens (down to 320px) */
@media (max-width: 380px) {

    .filing-page .fp-card-number {
        font-size: 1.6rem;
    }

    .filing-page .fp-flow-step {
        padding: 7px 9px;
        font-size: 0.9rem;
    }
}