/* =============================================================
   LOODON v2 — Global Styles
   Converted from html/styles.css + html/pages.css
   ============================================================= */

/* --------------------------------------------------
   Reset additions (WP block styles handles the base)
-------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    /* In-page anchors (e.g. /services/#branding) land below the sticky
       header instead of under it. */
    scroll-padding-top: calc(var(--loodon-header-h) + var(--wp-admin--admin-bar--height, 0px));
}

/* Page gutter — one token for "where the content column starts".
   The header's inner box is `max-width: 1280px; margin: 0 auto; padding: 0 88px`,
   so the logo sits (100% − 1280px) / 2 + 88px from the viewport edge on wide
   screens; the homepage sections are the same centred 1280px boxes, so they
   always lined up. Inner-page sections padded with a flat 88px instead, which
   is why the logo drifted off the body copy on anything wider than 1280px.
   Every inner-page section now pads with this token. The percentage resolves
   against the section's containing block (full page width for all of them),
   so it is scrollbar-safe, unlike 100vw. Below 1280px it collapses to the
   plain pad-x, and the tablet/mobile rules further down still override it
   with their own literal values. */
:root {
    /* Sticky header height — 122px desktop, 80px tablet, 70px mobile
       (overridden in the breakpoint blocks below). */
    --loodon-header-h: 122px;
    --loodon-gutter: max(
        var(--wp--custom--section-pad-x, 88px),
        calc((100% - 1280px) / 2 + var(--wp--custom--section-pad-x, 88px))
    );
}

body {
    font-family: var(--wp--preset--font-family--jost, 'Jost', sans-serif);
    font-size: var(--wp--preset--font-size--body, 18px);
    font-weight: 400;
    color: #000000;
    background: #ffffff;
    line-height: 1.5;
    overflow-x: hidden;
    margin: 0;
}

body.nav-is-open { overflow: hidden; }

img { display: block; max-width: 100%; height: auto; }
ul  { list-style: none; margin: 0; padding: 0; }
a   { color: inherit; text-decoration: none; }

/* --------------------------------------------------
   Site Header
-------------------------------------------------- */
/* Sticky header. The template part renders as
   <header class="wp-block-template-part"><header class="site-header">, and
   a sticky element only sticks within its parent — the wrapper is exactly as
   tall as .site-header, so `sticky` on .site-header itself never engaged.
   The wrapper is the element that has to stick. It stays in normal flow, so
   nothing jumps when it engages and no content slides underneath it. */
.wp-block-template-part:has(> .site-header) {
    position: sticky;
    top: var(--wp-admin--admin-bar--height, 0px); /* sits under the admin bar when logged in */
    z-index: 100;
}

/* ≤600px the admin bar scrolls away with the page (core makes it
   position: absolute), so the header pins to the very top. */
@media (max-width: 600px) {
    .wp-block-template-part:has(> .site-header) { top: 0; }
}

.site-header {
    position: relative;
    z-index: 100;
    background: #ffffff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 88px;
    height: var(--loodon-header-h);
}

/* Logo — Figma shows the wordmark at its natural ~365px width in the header */
.wp-block-site-logo { flex-shrink: 0; }
.wp-block-site-logo img { width: 365px; height: auto; }

/* Header: desktop nav links */
.site-header .wp-block-navigation__container {
    display: flex;
    align-items: center;
    gap: 48px; /* Figma: wider spacing between nav items */
}

.site-header .wp-block-navigation-item__content,
.site-header .wp-block-navigation-item a {
    font-family: var(--wp--preset--font-family--jost, 'Jost', sans-serif);
    font-weight: 600;
    font-size: var(--wp--preset--font-size--nav, 22px);
    color: var(--wp--preset--color--orange, #f47920);
    white-space: nowrap;
    transition: opacity 0.25s ease;
}

.site-header .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation-item a:hover {
    opacity: 0.85;
    text-decoration: underline;
    text-underline-offset: 6px;
}

/* Current page indicator — Figma marks active links with an underline */
.site-header .wp-block-navigation-item.current-menu-item > a,
.site-header .wp-block-navigation-item[aria-current="page"] > a {
    text-decoration: underline;
    text-underline-offset: 6px;
}

/* Header: Services dropdown (core navigation-submenu — core supplies the
   hover/focus/click opening, the toggle button's aria-expanded and Escape
   handling; this only skins it). Desktop/tablet only: inside the mobile
   overlay core lists the sub-pages expanded under "Services". */
.site-header .wp-block-navigation__submenu-icon {
    width: 14px;
    height: 14px;
    margin-left: 6px;
    padding: 0;
    color: var(--wp--preset--color--orange, #f47920);
}

.site-header .wp-block-navigation__submenu-icon svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2px;
    transition: transform 0.25s ease;
}

.site-header .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.site-header .wp-block-navigation__submenu-icon:focus-visible {
    outline: 2px solid var(--wp--preset--color--orange, #f47920);
    outline-offset: 3px;
    border-radius: 2px;
}

.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
    top: calc(100% + 12px);
    left: -20px;
    min-width: 210px;
    padding: 10px 0;
    background: #ffffff;
    border: 1px solid rgba(244, 121, 32, 0.25);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
    z-index: 110;
}

/* Hover bridge across the 12px gap, so the menu doesn't close on the way down. */
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 14px;
}

.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item a {
    display: block;
    padding: 8px 20px;
    font-size: 18px;
    font-weight: 500;
}

/* Mobile overlay: sub-pages indented under "Services". */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    padding: 0 0 0 20px;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item a {
    font-size: 18px;
    font-weight: 500;
}

/* Header: mobile overlay.
   IMPORTANT: scope to .is-menu-open — the responsive container element also
   wraps the DESKTOP menu, so unscoped rules leak border-bottoms/font sizes
   into the desktop nav. (Open-state styles live in blocks.css.) */
.site-header .wp-block-navigation__responsive-container-open svg { fill: var(--wp--preset--color--orange, #f47920); }
.site-header .wp-block-navigation__responsive-container.is-menu-open {
    background: #ffffff;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
    font-size: 20px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(244, 121, 32, 0.15);
    display: block;
}

/* Footer: nav links — must override any inherited nav colour from the block wrapper */
.site-footer .wp-block-navigation-item__content,
.site-footer .wp-block-navigation-item a {
    font-family: var(--wp--preset--font-family--jost, 'Jost', sans-serif);
    font-weight: 400;
    font-size: var(--wp--preset--font-size--body, 18px);
    color: #ffffff;
    line-height: 1.6;
    white-space: nowrap; /* keep "Web Design" / "Contact Us" on one line */
    transition: opacity 0.25s ease;
}

.site-footer .wp-block-navigation-item__content:hover,
.site-footer .wp-block-navigation-item a:hover {
    opacity: 0.7;
}

/* --------------------------------------------------
   Intro section (homepage)
-------------------------------------------------- */
.intro {
    position: relative;
    background: transparent; /* the page-wide puppeteer artwork shows through */
    overflow: hidden;
}

/* Retired markup slot — hidden so legacy content doesn't double-render the
   background on top of the CSS version. */
.intro__bg-illustration { display: none; }

/* 2026-09 design revision: on the HOME page the puppeteer artwork is split
   into three independently anchored layers (previously one repeat-y PNG
   that could not follow the sections it belonged to):

     hand    → .intro::before           pinned top-right, just under the hero
     people  → .testimonials::before    pinned to the testimonials' top edge,
                                        rising into the gap after the prism and
                                        sitting partly under the testimonials
     strings → .entry-content::before   runs from the hand's fingertips to the
                                        people; its top/height are written as
                                        custom properties by
                                        assets/js/home-artwork.js so the span
                                        stretches with whatever gap the content
                                        leaves between the two anchors.

   All tuning lives in the custom properties below. Other pages are
   unaffected. */
body.home .entry-content,
.entry-content:has(.connector-area) {
    position: relative;
    --home-art-opacity: 0.2;
    --home-art-hand-width: 40.6%;    /* 560px of the 1380px canvas */
    --home-art-people-shift: 55%;    /* share of the people's height ABOVE the testimonials' top edge */
    --home-art-strings-start: 0.67;  /* strings leave the hand this far down it (fingertips) */
    --home-art-strings-end: 0.56;    /* ...and end this far down the people */
}

body.home .intro::before,
.entry-content:has(.connector-area) .intro::before,
body.home .testimonials::before,
.entry-content:has(.connector-area) .testimonials::before,
body.home .entry-content::before,
.entry-content:has(.connector-area)::before {
    content: '';
    position: absolute;
    z-index: -1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    opacity: var(--home-art-opacity);
    pointer-events: none;
}

/* Hand — .intro is already position: relative; overflow: hidden. */
body.home .intro::before,
.entry-content:has(.connector-area) .intro::before {
    top: 0;
    right: 0;
    width: var(--home-art-hand-width);
    aspect-ratio: 560 / 332;
    background-image: url(../img/home-art-hand.png);
}

/* People — anchored to the testimonials block and shifted up by a share
   of their own height (transform %, unlike top %, resolves against the
   pseudo-element itself). The white testimonial cards paint over them. */
body.home .testimonials,
.entry-content:has(.connector-area) .testimonials {
    position: relative;
}

body.home .testimonials::before,
.entry-content:has(.connector-area) .testimonials::before {
    top: 0;
    right: 0;
    left: 0;
    aspect-ratio: 1380 / 536;
    transform: translateY(calc(-1 * var(--home-art-people-shift)));
    background-image: url(../img/home-art-people.png);
}

/* Strings — non-uniformly scaled to fill the hand→people span. The
   fallbacks only apply until home-artwork.js has measured the page. */
body.home .entry-content::before,
.entry-content:has(.connector-area)::before {
    top: var(--home-art-strings-top, 620px);
    right: 0;
    left: 0;
    height: var(--home-art-strings-height, 1800px);
    background-image: url(../img/home-art-strings.png);
}

.intro__content {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    /* No bottom padding on desktop — Figma runs the connector-area lines
       straight out of the service cards, so the sections must butt together.
       (Tablet/mobile overrides restore padding; the connector area is hidden
       there anyway.) */
    padding: 60px 88px 0;
}

.intro__tagline {
    font-family: var(--wp--preset--font-family--libre-baskerville, 'Libre Baskerville', serif);
    font-size: var(--wp--preset--font-size--tagline, 24px);
    font-weight: 400;
    line-height: 1.3; /* Figma: looser leading than the legacy 1.1 */
    max-width: 1044px;
    margin-bottom: 64px;
}

/* --------------------------------------------------
   Service cards grid (homepage intro)
-------------------------------------------------- */
.service-cards__heading {
    font-family: var(--wp--preset--font-family--jost, 'Jost', sans-serif);
    font-weight: 400;
    font-size: 30px; /* Loodon H2 (Figma 2026-09; was the 48px token) */
    text-transform: uppercase;
    margin-bottom: 40px;
    line-height: 1;
}

/* Doubled class bumps specificity above WP's generated layout-grid rule
   (repeat(3, minmax(0,1fr))), which otherwise stretches the cards — Figma
   specifies fixed 308px cards with 73px gaps. */
.service-cards__grid.service-cards__grid {
    display: grid;
    grid-template-columns: repeat(3, 308px);
    gap: 73px;
}

/* Keep the Figma rhythm (tagline → 64 → heading → 40 → cards) even where
   WP's blockGap rules zero child margins inside layout containers. */
.intro__content .intro__tagline { margin-bottom: 64px; }
.intro__content .service-cards__heading { margin-top: 0; margin-bottom: 40px; }

.service-cards__mobile-list { display: none; }

.service-cards__mobile-link {
    display: block;
    font-weight: 400;
    font-size: 22px;
    color: #000000;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    transition: color 0.25s ease;
}

.service-cards__mobile-link:hover { color: #f47920; }

/* --------------------------------------------------
   Connector area (decorative, desktop only)
-------------------------------------------------- */
.connector-area {
    position: relative;
    height: var(--ca-height, 1200px); /* block "Section height" control */
    background: transparent; /* the page-wide puppeteer artwork shows through */
    overflow: hidden;
}

/* Figma: each line carries its service colour at full opacity — not faint
   black hairlines. 2026-09 revision: the big mid-way dots are gone; the only
   dot is the small one each service band carries on its line just above
   itself (see the loodon/service-detail block). The block's legacy "Dot
   position" attribute is therefore no longer read by any rule. */
.connector-area__line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #f47920;
}

.connector-area__line--branding  { left: max(19.5%, calc(50% - 364px)); background: #f47920; }
.connector-area__line--marketing { left: max(49.3%, calc(50%)); background: #f42087; }
.connector-area__line--website   { left: min(79.1%, calc(50% + 364px)); background: #6dc067; }

.connector-area__watermark {
    position: absolute;
    top: var(--ca-watermark-top, 70%); /* block "Watermark position" control */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 116%;
    max-width: none;
    pointer-events: none;
}

.connector-area__watermark-img { width: 100%; height: auto; }

/* --------------------------------------------------
   Brand Prism CTA (homepage)
-------------------------------------------------- */
.brand-prism {
    position: relative; /* Figma: the CTA text sits centred INSIDE the prism graphic */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 88px;
    /* Transparent: the page artwork (home) / grey panel (Our Work)
       shows through, per the revised design. */
    background: transparent;
}

/* The bundled assets/img/brand-prism.svg is 600x520 and includes the
   radiating spokes; the hexagon itself is the central 300x252 (per Figma). */
.brand-prism__polygon {
    width: 600px;
    max-width: 100%;
    height: auto;
    margin: 0;
}

.brand-prism__polygon img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.brand-prism__text {
    /* Figma 2026-09: Loodon H3 — Jost 24px, uppercase, black (was Baskerville 36px) */
    font-family: var(--wp--preset--font-family--jost, 'Jost', sans-serif);
    font-size: 24px;
    font-weight: 400;
    text-transform: uppercase;
    color: #000000;
    text-align: center;
    max-width: 170px; /* breaks as Figma: CONTACT US / TO DEVELOP / YOUR BRAND */
    line-height: 1.25;
    /* Centred over the polygon graphic, per Figma */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    z-index: 1;
}

/* --------------------------------------------------
   Site Footer
-------------------------------------------------- */
.site-footer {
    position: relative;
    background-color: #101010;
    overflow: hidden;
}

.site-footer__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.site-footer__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
}

.site-footer__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start; /* Figma: nav columns sit next to the logo, not right-aligned */
    max-width: 1280px;
    margin: 0 auto;
    padding: 48px 88px 160px; /* Figma: generous empty band above the copyright divider */
    gap: 60px;
}

.site-footer__logo img { width: 297px; height: auto; } /* Figma: natural wordmark size */

.site-footer__nav {
    display: flex;
    flex-wrap: wrap; /* the Latest News column (17.5) drops to a new row when the width runs out */
    gap: 40px 100px; /* Figma: ~100px between the Services and Company columns */
    align-items: flex-start; /* Gutenberg flex groups default to center — columns must top-align */
}

.site-footer__col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 120px;
}

/* Narrow desktops (1200–1365px): logo + three columns at the 100px Figma
   gap overflow the row by a few px and the whole nav dropped under the
   logo. A tighter gap keeps logo, Services, Company and Latest News on one
   row; 1366px+ keeps the 100px gap. */
@media (min-width: 1200px) and (max-width: 1365px) {
    .site-footer__nav { column-gap: 40px; }
}

/* Columns space their children with `gap` only. Services/Company are core
   flex groups (core zeroes their children's margins), but the Latest News
   column is the loodon/footer-latest-post block, whose heading <p> kept the
   default paragraph top margin and so sat ~18px below the other headings.
   Resetting it here keeps every column on one top line, whatever renders it. */
.site-footer__col > * {
    margin-top: 0;
}

.site-footer__col-heading {
    font-weight: 400;
    font-size: 18px;
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: 4px;
    letter-spacing: 0.04em;
}

.site-footer__col ul {
    display: flex;
    flex-direction: column;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-footer__link {
    font-weight: 400;
    font-size: 18px;
    color: #ffffff;
    line-height: 1.6;
    transition: opacity 0.25s ease;
}

.site-footer__link:hover,
.site-footer__link:focus-visible { opacity: 0.7; }

.site-footer__copyright {
    position: relative;
    z-index: 1;
    font-weight: 400;
    font-size: 18px;
    color: #ffffff;
    text-align: center;
    padding: 20px 88px 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 1280px;
    margin: 0 auto;
}

/* --------------------------------------------------
   Inner pages — page hero, title, sections
-------------------------------------------------- */
:root { --fs-h1: 84px; }

.page-title {
    font-family: var(--wp--preset--font-family--libre-baskerville, 'Libre Baskerville', serif);
    font-size: var(--fs-h1, 84px);
    font-weight: 400;
    line-height: 1;
    color: #000000;
    padding: 60px var(--loodon-gutter) 0;
}

/* --------------------------------------------------
   About page
-------------------------------------------------- */
.about-approach { padding: 60px var(--loodon-gutter); }

.about-h2 {
    font-size: 30px; /* Loodon H2 (Figma 2026-09; was the 48px token) */
    font-weight: 400;
    text-transform: uppercase;
    color: #000000;
    line-height: 1;
    margin: 0 0 24px;
}

/* Figma: ~48px of air between a section's last paragraph and the next H2 */
.about-body + .about-h2,
.about-body--small + .about-h2 { margin-top: 48px; }

/* "How we can help you" follows the team grid */
.about-help { padding-top: 0; }

.about-body {
    font-family: var(--wp--preset--font-family--libre-baskerville, 'Libre Baskerville', serif);
    font-size: var(--wp--preset--font-size--tagline, 24px);
    font-weight: 400;
    line-height: 1.4;
    max-width: 1090px;
    margin-bottom: 32px;
}

.about-body--small {
    font-size: var(--wp--preset--font-size--body, 18px);
    line-height: 1.6;
    max-width: 1090px;
    margin-bottom: 24px;
}

.about-body--small:last-child { margin-bottom: 0; }

.team-section {
    padding: 60px var(--loodon-gutter);
    /* Figma: no divider between the approach copy and the team grid */
}

.team-grid {
    display: grid;
    /* Fluid columns — matches the grid WP's layout engine generates, so the
       theme and container rules agree instead of fighting (308px each at the
       1280px content width). */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 73px;
    margin-top: 60px;
}

/* Figma: the grid sits straight under the "Who we are" heading */
.team-section .about-h2 + .team-grid { margin-top: 24px; }

/* Every team photo renders in an identical 308:320 frame regardless of the
   uploaded image's intrinsic size, and regardless of whether the optional
   .team-card__photo-wrap group is present in the saved content. */
.team-card__photo-wrap,
.team-card figure.team-card__photo {
    width: 100%;
    max-width: 308px;
    aspect-ratio: 308 / 320;
    border-radius: 25px;
    overflow: hidden;
    position: relative;
    margin: 0 0 24px;
}

/* When the wrap group IS present, the inner figure just fills it. */
.team-card__photo-wrap figure.team-card__photo {
    max-width: none;
    aspect-ratio: auto;
    height: 100%;
    border-radius: 0;
    margin: 0;
}

.team-card .team-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.team-card__overlay {
    position: absolute;
    inset: 0;
    border-radius: 25px;
}

/* Fallback tint — when a team card has no .team-card__overlay group in its
   saved content, the theme supplies the role-coloured tint itself (50%
   alpha, matching the saved overlays' 8-digit hex values). 2026-10: the Web
   Design photo (Stofer) gets the brand green, at the client's request — it
   had no tint in the Figma revise file. The tint covers the photo-wrap, so
   it follows the 308:320 crop at every breakpoint. */
.team-card--branding .team-card__photo-wrap:not(:has(.team-card__overlay))::after,
.team-card--marketing .team-card__photo-wrap:not(:has(.team-card__overlay))::after,
.team-card--web .team-card__photo-wrap:not(:has(.team-card__overlay))::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.team-card--branding .team-card__photo-wrap:not(:has(.team-card__overlay))::after  { background: #f4792080; }
.team-card--marketing .team-card__photo-wrap:not(:has(.team-card__overlay))::after { background: #f4208780; }
.team-card--web .team-card__photo-wrap:not(:has(.team-card__overlay))::after       { background: #6dc06780; }

/* Team photo hover — the colour tint lifts to reveal the natural photo
   while it gently zooms (photo-wrap's overflow:hidden clips the scale).
   Hover-capable pointers only; reduced motion drops the zoom. */
@media (hover: hover) {
    .team-card .team-card__photo img,
    .team-card__overlay,
    .team-card .team-card__photo-wrap::after {
        transition:
            transform 0.6s cubic-bezier(0.22, 0.61, 0.2, 1),
            opacity 0.45s ease;
    }

    .team-card:hover .team-card__photo img { transform: scale(1.06); }
    .team-card:hover .team-card__overlay,
    .team-card:hover .team-card__photo-wrap::after { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .team-card .team-card__photo img { transition: transform 0s; }
    .team-card:hover .team-card__photo img { transform: none; }
}

.team-card__name {
    font-family: var(--wp--preset--font-family--libre-baskerville, 'Libre Baskerville', serif);
    font-size: var(--wp--preset--font-size--h-3, 36px);
    font-weight: 400;
    color: #000000;
    line-height: 1.2;
    margin-bottom: 8px;
}

.team-card__role {
    font-size: 24px; /* Loodon H4 (Figma 2026-09) */
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.team-card__bio {
    font-size: var(--wp--preset--font-size--body, 18px);
    color: #000000;
    line-height: 1.6;
}

.team-card--web .team-card__role      { color: #6dc067; }
.team-card--branding .team-card__role { color: #f47920; }
.team-card--marketing .team-card__role { color: #f42087; }

/* --------------------------------------------------
   Philosophy section (Our Approach page)
-------------------------------------------------- */
.philosophy_section {
    padding: 60px var(--loodon-gutter);
}

.philosophy_section h2 {
    font-size: var(--wp--preset--font-size--h-2, 30px);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1;
    margin: 0 0 32px;
}

.philosophy_section p {
    font-family: var(--wp--preset--font-family--libre-baskerville, 'Libre Baskerville', serif);
    font-size: var(--wp--preset--font-size--h-3, 36px);
    font-weight: 400;
    line-height: 1.4;
    max-width: 1090px;
}

/* --------------------------------------------------
   Marketers Row — image + orange text panel, side by side
-------------------------------------------------- */
.approach_marketers_main { overflow: hidden; }

.marketers_row.wp-block-columns {
    gap: 0;
    flex-wrap: nowrap;
    align-items: stretch;
    margin-bottom: 0;
}

.marketers_row .wp-block-column.image {
    flex: 0 0 55%;
    max-width: 55%;
}

.marketers_row .wp-block-column.image figure { margin-bottom: 0; height: 100%; }

.marketers_row .wp-block-column.image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.marketers_row .wp-block-column.content {
    flex: 0 0 45%;
    max-width: 45%;
    display: flex;
    align-items: center;
}

.right_info {
    width: 100%;
    padding: 60px 48px;
    background-color: var(--wp--preset--color--orange, #f47920);
    color: #ffffff;
}

.right_info h2 {
    font-size: var(--wp--preset--font-size--h-2, 30px);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1;
    color: #ffffff;
    margin: 0 0 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.right_info h5 {
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.2;
    color: #ffffff;
    margin: 0 0 20px;
}

.right_info p {
    font-size: var(--wp--preset--font-size--body, 18px);
    line-height: 1.7;
    color: #ffffff;
    margin: 0;
}

/* --------------------------------------------------
   Logo/Approach section — second two-column layout
-------------------------------------------------- */
.approach_inner_row.wp-block-columns {
    gap: 0;
    flex-wrap: nowrap;
}

.approach_inner_row .wp-block-column.logo {
    flex: 0 0 40%;
    max-width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 0;
}

.approach_inner_row .wp-block-column.logo figure { margin-bottom: 0; }

.approach_inner_row .wp-block-column.info {
    flex: 0 0 60%;
    max-width: 60%;
    display: flex;
    align-items: center;
    background-color: #eef1f4;
}

.info_wrap {
    padding: 60px 48px;
    color: #0a2343;
}

.info_wrap h3 {
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #0a2343;
    margin: 0 0 20px;
}

.info_wrap p {
    font-size: var(--wp--preset--font-size--body, 18px);
    line-height: 1.6;
    color: #0a2343;
    margin: 0 0 16px;
}

.info_wrap p:last-child { margin-bottom: 0; }

/* --------------------------------------------------
   Services page
-------------------------------------------------- */
.svc-page-tagline {
    font-family: var(--wp--preset--font-family--libre-baskerville, 'Libre Baskerville', serif);
    font-size: var(--wp--preset--font-size--tagline, 24px);
    font-weight: 400;
    line-height: 1.4;
    color: #000000;
    padding: 40px var(--loodon-gutter) 0;
    max-width: calc(1002px + var(--loodon-gutter) * 2); /* same 1002px measure as before */
}

/* Figma: the connector line runs flush from the viewport's left edge to the
   card, vertically centred on the card, ending in a WHITE dot that sits on
   the card's left edge. The description sits below the line. */
.svc-block {
    display: grid;
    grid-template-columns: 1fr 308px;
    align-items: start;
    column-gap: 80px;
    padding: 40px var(--loodon-gutter);
    position: relative;
}

.svc-block__left { display: flex; flex-direction: column; padding-top: 92px; }

/* 2026-08 design revision: the service name is an H2 OUTSIDE the card,
   in the service colour, sitting above the connector line. */
.svc-block__title {
    font-family: var(--wp--preset--font-family--jost, 'Jost', sans-serif);
    font-size: 30px; /* Loodon H2 */
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1;
    margin: 0 0 76px;
    color: #f47920;
}

.svc-block--marketing .svc-block__title { color: #f42087; }
.svc-block--website .svc-block__title   { color: #6dc067; }

.svc-block__connector {
    position: absolute;
    left: 0;
    top: calc(40px + 160px - 36px); /* block padding + half card height − half dot */
    width: calc(100% - var(--loodon-gutter) - 308px + 36px); /* to the card's left edge + half dot */
    display: flex;
    align-items: center;
    margin: 0;
}

.svc-block__line {
    flex: 1;
    height: 2px;
    background-color: #f47920;
}

.svc-block__dot {
    /* 2026-08 design revision: no visible white dot; the element is kept as
       the anchor the scroll animation turns into a small coloured bead. */
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: transparent;
    flex-shrink: 0;
    z-index: 1;
}

.svc-block--marketing .svc-block__line { background-color: #f42087; }

.svc-block--website .svc-block__line   { background-color: #6dc067; }

/* 2026-09 revision: the copy under each service title is a full paragraph of
   body text (Paragraph Subhead Style, as before), no longer a one-line link.
   The optional "Learn more about…" link is its own paragraph below it. */
.svc-block__desc {
    font-family: var(--wp--preset--font-family--libre-baskerville, 'Libre Baskerville', serif);
    font-size: 24px; /* Paragraph Subhead Style */
    font-weight: 400;
    line-height: 1.4;
    max-width: 567px;
    margin: 0;
}

.svc-block__desc a { text-decoration: underline; text-underline-offset: 4px; }

.svc-block__link {
    font-family: var(--wp--preset--font-family--jost, 'Jost', sans-serif);
    font-size: var(--wp--preset--font-size--body, 18px);
    font-weight: 600;
    line-height: 1.4;
    margin: 24px 0 0;
    max-width: 567px;
    color: #f47920;
}

.svc-block--marketing .svc-block__link { color: #f42087; }
.svc-block--website   .svc-block__link { color: #6dc067; }

.svc-block__link a { text-decoration: underline; text-underline-offset: 5px; transition: opacity 0.25s ease; }
.svc-block__link a:hover,
.svc-block__link a:focus-visible { opacity: 0.8; }

/* Safety net for the line-crosses-the-text failure mode: .svc-block__connector
   is absolutely positioned 164px from the row's top, which is exactly the gap
   the H2 title opens up (92px column padding + 30px title + 76px title
   margin). If a row's title is missing from the saved content the description
   collapses up to 92px and the fixed line runs straight through it. This keeps
   the clearance either way. Desktop only — below 1200px the connector is
   hidden and the row stacks into one column. */
@media (min-width: 1200px) {
    .svc-block__left:not(:has(.svc-block__title)) .svc-block__desc {
        margin-top: 106px; /* title (30px) + its bottom margin (76px) */
    }
}

/* Services page: the last row (Website) needs breathing room before the
   footer — the row's own 40–60px padding read as the footer butting into it.
   The space goes on the page's <main>, not on a `.svc-block:last-child`:
   on desktop scroll-animations.js pins each row inside its own GSAP
   pin-spacer, so every row is a :last-child there. 1.5 × the section-pad-y
   token (90 / 72 / 48px — rescaled in the breakpoint blocks below), on top
   of the row's own padding. */
.site-main:has(.svc-block) {
    padding-bottom: calc(var(--wp--custom--section-pad-y, 60px) * 1.5);
}

/* Legacy in-card labels are retired by the 2026-08 design revision. */
.svc-block__label { display: none; }

.svc-block__card {
    width: 308px;
    height: 320px;
    border-radius: 25px;
    overflow: hidden;
    position: relative;
    background-color: #f47920;
}

.svc-block--marketing .svc-block__card { background-color: #f42087; }
.svc-block--website   .svc-block__card { background-color: #6dc067; }

/* Figma: the card artwork is a full-opacity spot illustration anchored to the
   lower portion of the coloured card — not a tinted cover photo. */
.svc-block__card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    display: block;
}

.svc-block__card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
}

.svc-block__label {
    position: absolute;
    top: 20px;
    left: 24px;
    font-size: 36px; /* Figma: card label is smaller on the Services page */
    font-weight: 400;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1;
    z-index: 1;
    margin: 0;
}

/* --------------------------------------------------
   Testimonials (homepage, 2026-08 design revision)
-------------------------------------------------- */
.testimonials {
    position: relative; /* anchors the prev/next buttons */
    padding: 80px 88px;
    /* Transparent: the page artwork (home) / grey panel (Our Work)
       shows through, per the revised design. */
    background: transparent;
    text-align: center;
}

.testimonials__heading {
    font-family: var(--wp--preset--font-family--jost, 'Jost', sans-serif);
    font-size: 30px; /* Loodon H2 */
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1;
    margin: 0 0 12px;
}

.testimonials__sub {
    font-size: var(--wp--preset--font-size--body, 18px);
    margin: 0 0 44px;
}

/* Figma 2026-09 ("Testimonials Carousel"): 308×320 cards on a 362px pitch
   running past both page edges. Built as a full-bleed scroll-snap track —
   swipe/scroll natively, prev/next buttons added by
   assets/js/testimonials-carousel.js, no library. Without JS it is simply a
   horizontally scrollable strip. With JS it loops endlessly (cloned card
   sets either side), opens centred on the first card and autoplays. */
.testimonials__grid.testimonials__grid {
    display: flex;
    gap: 54px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* full-bleed: undo the section's side padding, then pad so the first and
       last card can sit centred like the middle ones */
    margin: 0 calc(-1 * var(--loodon-gutter));
    padding: 6px calc(50% - 154px + var(--loodon-gutter)) 16px;
    text-align: center;
    scrollbar-width: none;
}

.testimonials__grid.testimonials__grid::-webkit-scrollbar { display: none; }

.testimonial-card {
    flex: 0 0 308px;
    scroll-snap-align: center;
    background: #ffffff;
    border: 1px solid #f47920;
    border-radius: 25px;
    min-height: 320px;
    padding: 40px 24px 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Focus ring for the keyboard-scrollable strip (tabindex added by JS). */
.testimonials__grid.testimonials__grid:focus-visible {
    outline: 2px solid #f47920;
    outline-offset: -2px;
}

/* Controls row under the strip (injected by JS): pause/play in the middle;
   on desktop prev/next sit on the section's sides, below 1200px they join
   the row. */
.testimonials__controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
}

/* Prev / next (injected by JS) */
.testimonials__nav {
    position: absolute;
    top: 50%;
    width: 44px;
    height: 44px;
    margin-top: 12px; /* nudge below the heading block's centre */
    border: 1px solid #f47920;
    border-radius: 50%;
    background: #ffffff;
    color: #f47920;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 2;
    transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}

.testimonials__nav::before {
    content: '';
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg) translate(-1px, 0);
}

.testimonials__nav--prev { left: 24px; }
.testimonials__nav--prev::before { transform: rotate(135deg) translate(-1px, 0); }
.testimonials__nav--next { right: 24px; }

.testimonials__nav:hover,
.testimonials__nav:focus-visible { background: #f47920; color: #ffffff; }

.testimonials__nav[disabled] { opacity: 0.35; cursor: default; }

/* Pause / play — same circular outline button, smaller and quieter. */
.testimonials__toggle {
    position: relative;
    width: 36px;
    height: 36px;
    border: 1px solid #f47920;
    border-radius: 50%;
    background: #ffffff;
    color: #f47920;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.testimonials__toggle:hover,
.testimonials__toggle:focus-visible { background: #f47920; color: #ffffff; }

.testimonials__nav:focus-visible,
.testimonials__toggle:focus-visible {
    outline: 2px solid #f47920;
    outline-offset: 3px;
}

/* Pause icon: two bars */
.testimonials__toggle::before,
.testimonials__toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 3px;
    height: 12px;
    margin-top: -6px;
    background: currentColor;
}
.testimonials__toggle::before { left: calc(50% - 5px); }
.testimonials__toggle::after  { left: calc(50% + 2px); }

/* Play icon: triangle */
.testimonials__toggle.is-paused::before {
    left: calc(50% - 3px);
    width: 0;
    height: 0;
    margin-top: -7px;
    background: none;
    border-style: solid;
    border-width: 7px 0 7px 11px;
    border-color: transparent transparent transparent currentColor;
}
.testimonials__toggle.is-paused::after { display: none; }

/* Screen-reader-only live status ("Testimonial 2 of 4"). */
.testimonials__status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.testimonial-card__quote {
    font-size: var(--wp--preset--font-size--body, 18px);
    line-height: 1.5;
    margin: 0 0 24px;
}

.testimonial-card__meta {
    font-family: var(--wp--preset--font-family--libre-baskerville, 'Libre Baskerville', serif);
    font-size: 24px; /* Paragraph Subhead Style */
    line-height: 1.2;
    margin: 0;
}

/* --------------------------------------------------
   News band (homepage, 2026-08 design revision)
-------------------------------------------------- */
.home-news {
    background: #5cd6f7;
    padding: 48px 48px 56px;
}

.home-news__heading {
    font-family: var(--wp--preset--font-family--jost, 'Jost', sans-serif);
    font-size: 30px; /* Loodon H2 */
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
    color: #ffffff;
    line-height: 1.2;
    margin: 0 0 36px;
}

.home-news__grid .wp-block-post-template {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 67px;
    max-width: 1280px;
    margin: 0 auto;
}

.home-news__grid .wp-block-post {
    background: #ffffff;
    border-radius: 25px;
    padding: 26px 24px 26px 23px;
    display: grid;
    grid-template-columns: 171px 1fr;
    column-gap: 22px;
    min-height: 234px;
    align-items: start;
}

.home-news__grid .wp-block-post .wp-block-post-featured-image {
    grid-row: 1 / 3;
    width: 171px;
    height: 186px;
    border-radius: 25px;
    overflow: hidden;
    margin: 0;
}

.home-news__grid .wp-block-post .wp-block-post-featured-image a,
.home-news__grid .wp-block-post .wp-block-post-featured-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-news__grid .wp-block-post .wp-block-post-title {
    font-family: var(--wp--preset--font-family--jost, 'Jost', sans-serif);
    font-size: 20px; /* Blog Headline */
    font-weight: 500;
    font-style: italic;
    text-transform: capitalize;
    line-height: 1.35;
    margin: 4px 0 10px;
}

.home-news__grid .wp-block-post .wp-block-post-excerpt {
    font-size: var(--wp--preset--font-size--body, 18px);
    line-height: 1.45;
}

.home-news__grid .wp-block-post .wp-block-post-excerpt__more-link { display: none; }

/* --------------------------------------------------
   Our Work page
-------------------------------------------------- */
/* 2026-08 design revision (Figma "Rectangle 20"): the light-grey
   background starts at the hero's bottom edge and covers the WHOLE
   content area, full-bleed, all the way to the footer — the line-dot
   graphic, subhead, client list and CTA all sit on the grey. The white
   circular discs carry the uncropped logos, threaded on a 4px pink
   timeline; client names in Loodon H2. */
.site-main:has(.work-section),
.site-main--work {
    background-color: #f5f5f5;
}

.work-section {
    padding-bottom: 60px;
    position: relative;
}

/* The pink timeline and the disc centres track the gutter so the whole
   column keeps its Figma relationship to the body copy (line centre 294px
   right of the content edge; the hero connector's dot lands on the same x). */
.work-section::before {
    content: '';
    position: absolute;
    left: calc(var(--loodon-gutter) + 292px);
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: #f42087;
}

.work-item {
    display: flex;
    align-items: center;
    gap: 80px;
    padding: 60px var(--loodon-gutter) 60px calc(var(--loodon-gutter) + 137px); /* disc centre (137 + 158) sits on the timeline */
}

.work-item__thumb {
    width: 316px;
    height: 316px;
    background: #ffffff;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    display: block;
}

/* Text column beside the disc: client name (H2) with the item's body copy
   underneath (2026-09 revision). The column takes whatever width is left of
   the row, so each item can carry as much or as little copy as it needs. */
.work-item__text {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 640px;
}

.work-item__title {
    font-family: var(--wp--preset--font-family--jost, 'Jost', sans-serif);
    font-size: 30px; /* Loodon H2 */
    font-weight: 400;
    text-transform: uppercase;
    color: #000000;
    line-height: 1.2;
    text-decoration: none;
    margin: 0;
}

.work-item__body {
    font-family: var(--wp--preset--font-family--jost, 'Jost', sans-serif);
    font-size: var(--wp--preset--font-size--body, 18px);
    line-height: 1.6;
    color: #000000;
    margin-top: 16px;
}

.work-item__body p { margin: 0 0 12px; }
.work-item__body p:last-child { margin-bottom: 0; }
.work-item__body:empty { display: none; }

.work-item__title:hover { text-decoration: underline; }

/* Client-logo hover — the white disc lifts with a soft shadow and the
   logo zooms slightly (mirrors the team-photo hover treatment). */
@media (hover: hover) {
    .work-item__thumb {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .work-item__thumb img {
        transition: transform 0.3s ease;
    }

    .work-item__thumb:hover {
        transform: translateY(-4px) scale(1.04);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
    }

    .work-item__thumb:hover img {
        transform: scale(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .work-item__thumb,
    .work-item__thumb img {
        transition: none;
    }

    .work-item__thumb:hover,
    .work-item__thumb:hover img {
        transform: none;
        box-shadow: none;
    }
}

/* Standardized page subhead (2026-08 design revision) */
.page-subhead {
    font-family: var(--wp--preset--font-family--libre-baskerville, 'Libre Baskerville', serif);
    font-size: var(--wp--preset--font-size--tagline, 24px); /* matches intro__tagline / svc-page-tagline */
    font-weight: 400;
    line-height: 1.45;
    color: #000000;
    padding: 24px var(--loodon-gutter) 40px;
    max-width: calc(1090px + var(--loodon-gutter) * 2);
}

/* --------------------------------------------------
   News page
-------------------------------------------------- */
/* Figma 2026-09: the serif intro (.page-subhead) sits ABOVE this heading
   and the grid follows straight after it. */
.news-category-heading {
    font-size: 30px; /* Loodon H2 (Figma 2026-09; was the 48px token) */
    font-weight: 400;
    text-transform: uppercase;
    color: #000000;
    line-height: 1.2;
    padding: 60px var(--loodon-gutter) 36px;
}

.news-category-body {
    font-size: var(--wp--preset--font-size--body, 18px);
    color: #000000;
    line-height: 1.6;
    max-width: calc(1090px + var(--loodon-gutter) * 2);
    padding: 32px var(--loodon-gutter) 60px;
}

.news-grid {
    padding: 0 var(--loodon-gutter) 60px;
}

.news-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.news-card:hover .news-card__title { text-decoration: underline; }

.news-card__thumb {
    position: relative;
    height: 514px;
    border-radius: 25px; /* Figma 2026-09: rounded like every other card */
    overflow: hidden;
    margin-bottom: 24px;
    flex-shrink: 0;
}

.news-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.news-card__overlay { position: absolute; inset: 0; }

/* Typography for .news-card__title lives in theme.json
   (styles.blocks."core/post-title".css) — only layout spacing here. */
.news-card__title {
    margin-bottom: 16px;
}

.news-card__body {
    font-size: var(--wp--preset--font-size--body, 18px);
    color: #000000;
    line-height: 1.6;
}

/* --------------------------------------------------
   Specific service / specific work — inner pages
-------------------------------------------------- */
/* Figma: the title connector runs flush from the viewport's left edge and
   ends in a ~64px dot whose centre sits ≈382px from the left. It appears on
   every page, tinted to match the page hero colour (modifier classes). */
/* Vertical rhythm under the hero (2026-09 revision): the line/dot used to sit
   40px below the hero image (centred in an 80px band); the revised design
   asks for more air, so the band opens with a top pad and the line now sits
   --inner-connector-gap below the hero. Hidden on mobile, so no mobile cost. */
.inner-connector {
    --inner-connector-gap: 85px; /* Figma: line 85px under the hero on Services, About, News and the detail pages */
    display: flex;
    align-items: center;
    padding-left: 0;
    height: calc(var(--inner-connector-gap) + 40px);
    padding-top: calc(var(--inner-connector-gap) - 40px);
}

.inner-connector__line {
    width: calc(var(--loodon-gutter) + 262px); /* dot centre = gutter + 294px (was 382px at the flat 88px gutter) */
    height: 2px;
    background-color: #f47920;
}

.inner-connector__dot {
    width: 64px;
    height: 64px;
    background-color: #f47920;
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: -1px;
}

.inner-connector--pink .inner-connector__line,
.inner-connector--pink .inner-connector__dot     { background-color: #f42087; }
.inner-connector--green .inner-connector__line,
.inner-connector--green .inner-connector__dot    { background-color: #6dc067; }
.inner-connector--cyan .inner-connector__line,
.inner-connector--cyan .inner-connector__dot     { background-color: #5cd6f7; }
.inner-connector--yellow .inner-connector__line,
.inner-connector--yellow .inner-connector__dot   { background-color: #fff200; }
.inner-connector--black .inner-connector__line,
.inner-connector--black .inner-connector__dot    { background-color: #000000; }

/* Intro animation — the line draws in from the left and the dot pops, once
   per page load, on EVERY page that uses the block (About, News, Contact,
   Our Work, service/work detail, …). This used to live in
   assets/js/scroll-animations.js, which is only enqueued on the front page
   and Services, so inner pages never got it. As CSS it needs no JS and no
   GSAP payload, and it mirrors the timeline it replaces: line scaleX 0 → 1
   over 0.9s after a 0.25s beat, dot scale 0.2 → 1 with a back.out(2.2)
   overshoot from 0.8s. `backwards` fill holds the start state during the
   delay so nothing flashes in at full size first. */
@media (prefers-reduced-motion: no-preference) {
    .inner-connector__line {
        transform-origin: left center;
        animation: loodon-connector-line 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) 0.25s backwards;
    }

    .inner-connector__dot {
        animation: loodon-connector-dot 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.8s backwards;
    }
}

@keyframes loodon-connector-line {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@keyframes loodon-connector-dot {
    0%   { opacity: 0; transform: scale(0.2); }
    55%  { opacity: 1; transform: scale(1.18); }
    100% { opacity: 1; transform: scale(1); }
}

.inner-content {
    padding: 60px var(--loodon-gutter);
    max-width: calc(1090px + var(--loodon-gutter) * 2);
}

.inner-content .wp-block-list {
    list-style: disc;
    padding-left: 22px;
    margin: 0 0 24px;
    font-size: var(--wp--preset--font-size--body, 18px);
    line-height: 1.6;
}

.inner-content .wp-block-heading { margin: 0 0 20px; }
.inner-content p { margin: 0 0 20px; }

/* "Get in touch" button — Figma 2026-09: cyan 260×98 pill, Jost 24px uppercase */
.cta-row { padding: 20px var(--loodon-gutter) 40px; }

.cta-button .wp-block-button__link.wp-element-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 260px;
    min-height: 98px;
    padding: 0 32px;
    background-color: #5cd6f7;
    color: #000000;
    border-radius: 25px;
    font-family: var(--wp--preset--font-family--jost, 'Jost', sans-serif);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: uppercase;
    line-height: 1;
    transition: background-color 0.25s ease, opacity 0.25s ease;
}

.cta-button .wp-block-button__link.wp-element-button:hover,
.cta-button .wp-block-button__link.wp-element-button:focus-visible { opacity: 1; background-color: #3fcbf3; }

.inner-content__body {
    font-size: var(--wp--preset--font-size--body, 18px);
    color: #000000;
    line-height: 1.6;
    margin-bottom: 40px;
}

.inner-content__body--serif {
    font-family: var(--wp--preset--font-family--libre-baskerville, 'Libre Baskerville', serif);
    font-size: var(--wp--preset--font-size--h-3, 36px);
    font-weight: 400;
    line-height: 1.4;
}

.work-detail-hero {
    position: relative;
    height: 400px;
    overflow: hidden;
    background-color: #ffffff;
    display: flex;
    align-items: center;
}

.work-detail-hero__text {
    font-size: var(--wp--preset--font-size--hero, 64px);
    font-weight: 400;
    color: #000000;
    margin-left: var(--loodon-gutter);
    position: relative;
    z-index: 1;
    line-height: 1;
    /* Rendered as an h2 (post-title) — undo the global h2 uppercase from
       theme.json; the reference design shows "TheMith.com", not uppercase. */
    text-transform: none;
    margin-top: 0;
    margin-bottom: 0;
}

.work-detail-hero__img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* --------------------------------------------------
   Contact page
-------------------------------------------------- */
/* Figma: each icon badge sits beside its own info line (row layout) */
.contact-info-section {
    padding: 60px var(--loodon-gutter);
}

/* 17.6: the Contact page content is one centred 950px column. The info
   rows and the form share the measure, so their left edges line up while
   the column itself is centred in the page at every width; below 950px +
   padding the column simply fills the available width as before. */
.contact-info-section > *,
.contact-form-title,
.contact-form__status,
.contact-form {
    max-width: var(--contact-measure, 950px);
    margin-left: auto;
    margin-right: auto;
}

.contact-info__row {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 24px;
}

.contact-info__row:last-child { margin-bottom: 0; }

/* Typography for .contact-info__text lives in theme.json (styles.css) —
   the block renders its own markup, so it has no block wrapper class
   to hang styles.blocks off. */

/* Legacy column wrapper (kept for content saved with the old markup) */
.contact-icons { display: flex; flex-direction: column; gap: 16px; }

.contact-icon-badge {
    width: 110px;
    height: 84px;
    border-radius: 25px;
    overflow: hidden;
}

.contact-icon-badge img { width: 100%; height: 100%; object-fit: cover; }

.contact-details {
    font-family: var(--wp--preset--font-family--libre-baskerville, 'Libre Baskerville', serif);
    font-size: var(--wp--preset--font-size--h-3, 36px);
    font-weight: 400;
    line-height: 1.8;
    color: #000000;
    font-style: normal;
}

.contact-details a { color: #000000; text-decoration: underline; }

.contact-form-section {
    position: relative; /* containing block for the honeypot + parity with html/pages.css */
    background-color: rgba(244, 121, 32, 0.6); /* Figma: soft orange tint, not solid brand orange */
    padding: 60px var(--loodon-gutter);
    overflow: hidden;
}

/* Figma 2026-09: the form band carries the cat engraving at 20% in its
   lower-right corner (half the band wide). Bundled with the theme like the
   other spot art; the form sits above it. */
.contact-form-section::after {
    content: '';
    position: absolute;
    right: 2%;
    bottom: 0;
    /* Figma's band is 1440px tall with the cat in its lower 60%; the site's
       band hugs the form, so the cat is sized from the band's height instead
       and keeps the artwork's own proportions. */
    height: 62%;
    aspect-ratio: 1101 / 1920;
    background: url(../img/contact-art-cat.png) no-repeat right bottom / contain;
    opacity: 0.2;
    pointer-events: none;
    z-index: 0;
}

.contact-form-section > * { position: relative; z-index: 1; }

/* Typography for .contact-form-title and .contact-form__label lives in
   theme.json (styles.css) — this block renders its own markup too, so there
   is no block wrapper class for styles.blocks to target. */
.contact-form-title {
    margin-bottom: 48px;
}

.contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 40px;
}

.contact-form__group { display: flex; flex-direction: column; gap: 8px; }
.contact-form__group--full { grid-column: 1 / -1; }

.contact-form__label .req { color: #fc121a; }

.contact-form__input,
.contact-form__textarea {
    background: #ffffff;
    border: none;
    padding: 0 16px;
    height: 83px;
    font-family: var(--wp--preset--font-family--jost, 'Jost', sans-serif);
    font-size: var(--wp--preset--font-size--body, 18px);
    color: #000000;
    width: 100%;
    outline: none;
}

.contact-form__input:focus,
.contact-form__textarea:focus { box-shadow: 0 0 0 2px #000000; }

.contact-form__textarea { height: 313px; padding: 16px; resize: vertical; }

.contact-form__submit {
    background-color: #000000;
    color: #ffffff;
    font-family: var(--wp--preset--font-family--jost, 'Jost', sans-serif);
    font-size: var(--wp--preset--font-size--body, 18px);
    font-weight: 600;
    padding: 20px 60px;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.contact-form__submit:hover { background-color: #333333; }

/* =============================================================
   TABLET — 768px to 1199px
   ============================================================= */
@media (min-width: 768px) and (max-width: 1199px) {

    /* Rescale the design tokens exactly as html/styles.css does at :root,
       so every rule consuming a preset/custom var inherits the tablet scale
       (svc-block__desc, about-body, team-card__name, contact-details,
       work-item__title, news-card__title, work-detail-hero__text, …). */
    /* NB: WordPress kebab-cases preset slugs, so the h1/h2/h3 sizes are
       --wp--preset--font-size--h-1 / --h-2 / --h-3 on the page. */
    :root {
        --fs-h1: 60px;
        --wp--preset--font-size--nav:  17px;
        --wp--preset--font-size--hero: 40px;
        --wp--preset--font-size--h-2:   28px;
        --wp--preset--font-size--h-3:   28px;
        --wp--preset--font-size--h-1:   60px;
        --wp--custom--section-pad-x:   40px;
        --wp--custom--section-pad-y:   48px;
    }

    :root { --loodon-header-h: 80px; }
    .site-header__inner { padding: 0 40px; }
    .wp-block-site-logo img { width: 160px; }
    .site-header .wp-block-navigation__container { gap: 20px; }

    .intro__content { padding: 48px 40px 60px; }
    .intro__tagline,
    .intro__content .intro__tagline { font-size: var(--wp--preset--font-size--tagline, 24px); margin-bottom: 48px; }
    .service-cards__grid.service-cards__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
    .connector-area { display: none; }

    .page-title { font-size: 60px; padding: 48px 40px 0; }

    .svc-page-tagline { font-size: var(--wp--preset--font-size--tagline, 24px); padding: 40px 40px 0; }
    .svc-block { grid-template-columns: 1fr; gap: 32px; padding: 60px 40px; }
    .svc-block__card { width: 100%; max-width: 308px; }
    .svc-block__connector { display: none; }
    .svc-block__left { padding-top: 0; }
    .svc-block__title { margin-bottom: 20px; }
    .testimonials { padding: 48px 40px; }
    .testimonials__nav { position: static; margin-top: 0; }
    .home-news { padding: 40px; }
    .home-news__grid .wp-block-post-template { grid-template-columns: 1fr; gap: 24px; }

    .work-section::before { display: none; }
    .work-item { gap: 40px; padding: 60px 40px; }
    .work-item__thumb { width: 220px; height: 220px; }

    .about-approach { padding: 48px 40px; }
    .team-section { padding: 48px 40px; }
    .team-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }

    .news-category-heading { padding: 48px 40px 0; }
    .news-category-body { padding: 32px 40px 48px; }
    .news-grid { padding: 0 40px 48px; }
    .news-grid .wp-block-post-template { gap: 32px 24px; }
    .news-card__thumb { height: 320px; }
    .news-card .wp-block-post-featured-image { height: 320px; }

    .inner-connector { padding-left: 0; }
    .inner-content { padding: 48px 40px; }

    .contact-info-section { padding: 48px 40px; }
    .contact-form-section { padding: 48px 40px; }
    .contact-form { grid-template-columns: 1fr 1fr; }

    .site-footer__inner { padding: 40px 40px 32px; }
    .site-footer__copyright { padding: 16px 40px 24px; font-size: 15px; }

    .brand-prism { padding: 60px 40px; }

    .philosophy_section { padding: 48px 40px; }
    .philosophy_section p { font-size: 28px; }
    .right_info { padding: 40px 32px; }
    .right_info h2 { font-size: 36px; }
    .info_wrap { padding: 40px 32px; }
}

/* =============================================================
   MOBILE — ≤767px
   ============================================================= */
@media (max-width: 767px) {

    /* Mobile token scale — mirrors the :root overrides in html/styles.css. */
    :root {
        --fs-h1: 40px;
        --wp--preset--font-size--nav:  20px;
        --wp--preset--font-size--hero: 36px;
        --wp--preset--font-size--h-2:   26px;
        --wp--preset--font-size--h-3:   22px;
        --wp--preset--font-size--h-1:   40px;
        --wp--preset--font-size--body: 16px;
        --wp--custom--section-pad-x:   20px;
        --wp--custom--section-pad-y:   32px;
    }

    :root { --loodon-header-h: 70px; }
    .site-header__inner { padding: 0 20px; }
    .wp-block-site-logo img { width: 130px; }

    /* Move the core navigation collapse point from WP's default 600px up to
       the design's 767px mobile breakpoint: show the hamburger and hide the
       inline link row for the whole ≤767px range. (.site-header prefix keeps
       specificity above the core block styles.) */
    .site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex;
    }
    .site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none;
    }

    body.home .entry-content::before,
    .entry-content:has(.connector-area)::before { display: none; } /* design hides the illustration on mobile */
    .intro__content { padding: 32px 20px 40px; }
    .intro__tagline,
    .intro__content .intro__tagline { font-size: 22px; margin-bottom: 40px; line-height: 1.3; }
    .service-cards__heading,
    .intro__content .service-cards__heading { font-size: 28px; margin-bottom: 24px; }
    .service-cards__grid.service-cards__grid { display: none; }
    .service-cards__mobile-list { display: flex; flex-direction: column; gap: 0; }
    .connector-area { display: none; }

    .page-title { font-size: 40px; padding: 32px 20px 0; }

    .svc-page-tagline { font-size: 20px; padding: 24px 20px 0; }
    .svc-block { grid-template-columns: 1fr; padding: 40px 20px; gap: 24px; }
    .svc-block__connector { display: none; }
    .svc-block__left { padding-top: 0; }
    .svc-block__desc { font-size: 20px; }
    .svc-block__card { width: 100%; max-width: 308px; }
    .svc-block__title { margin-bottom: 16px; }
    .testimonials { padding: 40px 20px; }
    .testimonials__grid.testimonials__grid { gap: 20px; padding-left: calc(50% - 140px + 20px); padding-right: calc(50% - 140px + 20px); }
    .testimonial-card { flex-basis: 280px; }
    .testimonials__nav { position: static; margin-top: 0; }
    .home-news { padding: 32px 20px; }
    .home-news__grid .wp-block-post-template { grid-template-columns: 1fr; }
    .home-news__grid .wp-block-post { grid-template-columns: 1fr; }
    .home-news__grid .wp-block-post .wp-block-post-featured-image { grid-row: auto; width: 100%; height: 200px; }

    .work-section::before { display: none; }
    .work-item { flex-direction: column; padding: 40px 20px; gap: 24px; }
    .work-item__text { max-width: none; width: 100%; text-align: center; }
    .work-item__body { margin-top: 12px; }
    .work-item__thumb { width: 200px; height: 200px; }
    .work-item__title { font-size: 32px; }

    .about-approach { padding: 32px 20px; }
    .about-h2 { font-size: 28px; }
    .about-body { font-size: 20px; }
    .team-grid { grid-template-columns: 1fr; gap: 48px; }
    .team-section { padding: 32px 20px; }

    .news-category-heading { font-size: 28px; padding: 32px 20px 0; }
    .news-category-body { padding: 16px 20px 32px; }
    .news-grid { padding: 0 20px 40px; }
    .news-grid .wp-block-post-template { grid-template-columns: 1fr; gap: 48px; }
    .news-card__thumb { height: 260px; }
    .news-card .wp-block-post-featured-image { height: 260px; }
    /* matches theme.json's block-level specificity so it still wins */
    .wp-block-post-title.news-card__title { font-size: var(--wp--custom--news-card-title-size-mobile, 26px); }

    .inner-connector { display: none; }
    .inner-content { padding: 32px 20px; }
    .inner-content__body--serif { font-size: 20px; }

    .contact-info-section { padding: 32px 20px; }
    .contact-info__row { gap: 20px; margin-bottom: 20px; }
    .contact-icons { flex-direction: row; }
    .contact-details { font-size: 20px; }
    /* outranks theme.json's :root :where(body) .contact-info__text */
    .contact-details p.contact-info__text { font-size: var(--wp--custom--contact-info-text-size-mobile, 20px); }
    .contact-form-section { padding: 40px 20px; }
    .contact-form { grid-template-columns: 1fr; }
    .contact-form__group--full { grid-column: 1; }
    .contact-form-section h2.contact-form-title { font-size: var(--wp--custom--contact-form-title-size-mobile, 28px); }

    .site-footer__inner { flex-direction: column; align-items: flex-start; padding: 36px 20px 28px; gap: 32px; }
    .site-footer__logo img { width: 140px; }
    .site-footer__nav { gap: 32px; }
    .site-footer__copyright { padding: 16px 20px 24px; font-size: 13px; text-align: left; }

    .brand-prism { padding: 48px 20px; }
    .brand-prism__graphic,
    .brand-prism__polygon { width: 380px; height: auto; }
    .brand-prism__text { font-size: 20px; max-width: 150px; }

    .philosophy_section { padding: 32px 20px; }
    .philosophy_section p { font-size: 20px; }

    .marketers_row.wp-block-columns { flex-wrap: wrap; }
    .marketers_row .wp-block-column.image,
    .marketers_row .wp-block-column.content { flex: 0 0 100%; max-width: 100%; }
    .right_info { padding: 32px 20px; }
    .right_info h2 { font-size: 28px; margin-bottom: 16px; padding-bottom: 16px; }
    .right_info h5 { font-size: 17px; margin-bottom: 16px; }

    .approach_inner_row.wp-block-columns { flex-wrap: wrap; }
    .approach_inner_row .wp-block-column.logo,
    .approach_inner_row .wp-block-column.info { flex: 0 0 100%; max-width: 100%; }
    .approach_inner_row .wp-block-column.logo { padding: 32px 20px; }
    .info_wrap { padding: 32px 20px; }
}

/* --------------------------------------------------
   Contact form — submission status & validation
   (additive; used by the loodon/contact-form block)
-------------------------------------------------- */
.contact-form__status {
    grid-column: 1 / -1;
    margin-top: 0;
    margin-bottom: 24px;
    padding: 16px 20px;
    font-weight: 600;
}

.contact-form__status--success {
    background-color: #6dc067;
    color: #000000;
}

.contact-form__status--error {
    background-color: #fc121a;
    color: #ffffff;
}

.contact-form__error {
    margin: 4px 0 0;
    font-size: 14px;
    color: #fc121a;
}

.contact-form__hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --------------------------------------------------
   Connector area — optional background image
   (matches html/styles.css reference; additive)
-------------------------------------------------- */
.connector-area__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.connector-area__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.2;
}

/* --------------------------------------------------
   Contact icon badges — built-in default icons
   (orange badge + white glyph, per Figma; a custom
   Media Library image replaces this entirely)
-------------------------------------------------- */
.contact-icon-badge--default {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f47920;
    color: #ffffff;
}

.contact-icon-badge__svg {
    width: 52%;
    height: 52%;
}

/* --------------------------------------------------
   Contact form — AJAX submitting state (additive)
-------------------------------------------------- */
.contact-form__submit[disabled] {
    opacity: 0.6;
    cursor: default;
}

.contact-form.is-submitting {
    opacity: 0.8;
}