:root {
    color-scheme: light;
    --ink: #020617;
    --slate-950: #0f172a;
    --slate-800: #1e293b;
    --slate-600: #475569;
    --slate-400: #94a3b8;
    --slate-200: #e2e8f0;
    --paper: #ffffff;
    --mist: #f8fafc;
    --teal: #0d9488;
    --teal-dark: #0f766e;
    --teal-light: #5eead4;
    --serif: "Source Serif 4", Georgia, serif;
    --sans: Figtree, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, monospace;
    --content: 1200px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--slate-950);
    font-family: var(--sans);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body,
button,
input,
select,
textarea {
    font-family: var(--sans);
}

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

a {
    color: var(--teal-dark);
    text-decoration: none;
}

a:hover {
    color: var(--teal);
}

h1,
h2,
h3,
p {
    margin: 0;
    text-wrap: pretty;
}

h1,
h2 {
    text-wrap: balance;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 3px solid var(--teal-light);
    outline-offset: 3px;
}

::selection {
    background: rgb(20 184 166 / 25%);
}

html[data-lang-mode="en"] [data-lang="cy"],
html[data-lang-mode="cy"] [data-lang="en"] {
    display: none !important;
}

.site-header {
    position: sticky;
    z-index: 50;
    top: 0;
    border-bottom: 1px solid var(--slate-800);
    background: rgb(2 6 23 / 95%);
    color: white;
    backdrop-filter: blur(14px);
}

.site-header__inner {
    display: grid;
    grid-template-columns: minmax(210px, 1fr) auto minmax(235px, 1fr);
    gap: 24px;
    align-items: center;
    width: min(calc(100% - 48px), var(--content));
    min-height: 96px;
    margin: 0 auto;
}

.brand {
    display: inline-grid;
    width: fit-content;
    color: white;
    font-size: 13px;
    letter-spacing: .13em;
    line-height: 1.2;
    text-transform: uppercase;
}

.brand:hover {
    color: white;
}

.brand__en {
    padding-left: 1.4rem;
}

.brand__cy {
    margin-top: 3px;
}

.brand strong {
    color: var(--teal-light);
    font-weight: 600;
}

.mobile-menu-panel {
    display: contents;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 2px;
}

.site-nav a {
    border-radius: 8px;
    padding: 9px 13px;
    color: #cbd5e1;
    font-size: 14.5px;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
    background: var(--slate-950);
    color: white;
}

.site-nav a[aria-current="page"] {
    font-weight: 600;
}

.header-actions {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: flex-end;
}

.language-switch {
    display: flex;
    align-items: center;
    padding: 3px;
    border: 1px solid #334155;
    border-radius: 999px;
    background: var(--slate-950);
}

.language-switch a {
    border-radius: 999px;
    padding: 6px 13px;
    color: var(--slate-400);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
}

.language-switch a[aria-current="true"] {
    background: var(--teal);
    color: white;
}

.menu-toggle {
    display: none;
    border: 1px solid #334155;
    border-radius: 9px;
    background: var(--slate-950);
    color: white;
    padding: 9px 12px;
    font-size: 14px;
    font-weight: 600;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    padding: 13px 22px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.button:hover {
    transform: translateY(-1px);
}

.button-primary {
    border: 1px solid var(--teal);
    background: var(--teal);
    color: white;
}

.button-primary:hover {
    border-color: var(--teal-dark);
    background: var(--teal-dark);
    color: white;
}

.button-outline {
    border: 1px solid var(--teal);
    color: var(--teal-dark);
}

.button-outline:hover {
    background: #ccfbf1;
    color: var(--teal-dark);
}

.header-quote {
    padding: 10px 18px;
    font-size: 14px;
}

.media-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-image--contained {
    background: #111827;
    object-fit: contain;
}

/* Home hero: three Cardiff views on a slow cross-dissolve. They are stacked
   with the bottom one permanently opaque, so a dissolve always blends one
   photograph into another and never lets the panel show through. Pure CSS,
   so it runs whether or not site.js does. */
.hero-media {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-media img {
    position: absolute;
    inset: 0;
}

.hero-media img:nth-child(1) {
    z-index: 3;
    animation: heroDissolveFirst 21s linear infinite;
}

.hero-media img:nth-child(2) {
    z-index: 2;
    animation: heroDissolveSecond 21s linear infinite;
}

.hero-media img:nth-child(3) {
    z-index: 1;
}

/* The second image snaps back to opaque at the loop boundary, which happens
   underneath a fully opaque first image and so is never seen. */
@keyframes heroDissolveFirst {
    0%, 28% { opacity: 1; }
    33%, 95% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes heroDissolveSecond {
    0%, 61% { opacity: 1; }
    66%, 100% { opacity: 0; }
}

.drych-mark {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: #14b8a6;
}

.drych-mark i {
    position: absolute;
    left: 9px;
    width: 16px;
    height: 8px;
    border: 2px solid white;
    border-radius: 50%;
}

.drych-mark i::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: white;
    content: "";
    transform: translate(-50%, -50%);
}

.drych-mark i:first-child {
    top: 7px;
}

.drych-mark i:last-child {
    bottom: 7px;
}

main > section {
    scroll-margin-top: 96px;
}

.content {
    width: min(calc(100% - 48px), var(--content));
    margin: 0 auto;
}

.page-hero {
    padding: 78px 0 84px;
    background:
        radial-gradient(760px 400px at 85% 0, rgb(13 148 136 / 24%), transparent 70%),
        var(--ink);
    color: white;
}

.page-hero h1,
.error-page h1 {
    max-width: 820px;
    margin-top: 18px;
    font-family: var(--serif);
    font-size: clamp(2.7rem, 5.2vw, 4rem);
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.06;
}

.page-hero .content > p:last-child {
    max-width: 720px;
    margin-top: 22px;
    color: #cbd5e1;
    font-size: 18px;
    line-height: 1.7;
}

.eyebrow {
    color: var(--teal-dark);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.page-hero .eyebrow,
.section--dark .eyebrow {
    color: var(--teal-light);
}

.section {
    padding: 100px 0;
}

.section h2,
.closing-cta h2 {
    margin-top: 18px;
    color: var(--ink);
    font-family: var(--serif);
    font-size: clamp(2rem, 4vw, 2.7rem);
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.12;
}

.section p:not(.eyebrow) {
    margin-top: 18px;
    color: var(--slate-600);
    font-size: 17px;
    line-height: 1.7;
}

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

.section--dark h2 {
    color: white;
}

.section--dark p:not(.eyebrow) {
    color: #cbd5e1;
}

.split-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 72px;
    align-items: center;
    width: min(calc(100% - 48px), var(--content));
    margin: 0 auto;
}

.about-visual {
    height: 500px;
    overflow: hidden;
    border: 1px solid var(--slate-200);
    border-radius: 20px;
    background: var(--mist);
}

.badge-row,
.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.badge-row > span {
    padding: 8px 14px;
    border: 1px solid #ccfbf1;
    border-radius: 999px;
    background: #f0fdfa;
    color: var(--teal-dark);
    font-size: 13px;
    font-weight: 600;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-top: 44px;
    overflow: hidden;
    border: 1px solid var(--slate-800);
    border-radius: 16px;
    background: var(--slate-800);
}

.process-grid article {
    padding: 30px;
    background: #0b1220;
}

.process-grid article > span {
    color: var(--teal-light);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .15em;
}

.process-grid h3 {
    margin-top: 14px;
    font-family: var(--serif);
    font-size: 23px;
}

.process-grid p:not(.eyebrow) {
    margin-top: 10px;
    color: var(--slate-400);
    font-size: 15px;
}

.closing-cta {
    padding: 72px 0;
    border-top: 1px solid var(--slate-200);
    background: white;
}

.closing-cta__inner {
    display: flex;
    gap: 40px;
    align-items: flex-end;
    justify-content: space-between;
    width: min(calc(100% - 48px), var(--content));
    margin: 0 auto;
}

.closing-cta__inner > div:first-child {
    max-width: 650px;
}

.closing-cta h2 {
    margin: 0;
    font-size: clamp(1.8rem, 3.2vw, 2.25rem);
}

.closing-cta p {
    margin-top: 14px;
    color: var(--slate-600);
    font-size: 16.5px;
    line-height: 1.7;
}

.site-footer {
    padding: 64px 0 40px;
    background: var(--ink);
    color: white;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 40px;
    width: min(calc(100% - 48px), var(--content));
    margin: 0 auto;
}

.brand--footer {
    margin-bottom: 16px;
}

.site-footer p,
.site-footer span {
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
}

.site-footer__grid > div:not(:first-child) {
    display: grid;
    gap: 10px;
    align-content: start;
}

.site-footer h2 {
    margin-bottom: 4px;
    color: var(--slate-600);
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.site-footer a {
    color: #cbd5e1;
    font-size: 14.5px;
}

.site-footer a:hover {
    color: white;
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: space-between;
    width: min(calc(100% - 48px), var(--content));
    margin: 44px auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--slate-800);
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 16px;
}

.site-footer__legal a,
.site-footer__legal a span {
    color: #cbd5e1;
    font-size: 14px;
}

.site-footer__legal a:hover,
.site-footer__legal a:hover span {
    color: white;
}

.site-footer__bottom > span:last-child {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.form-honeypot {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
}

.form-success[hidden],
.form-error[hidden] {
    display: none !important;
}

[data-ajax-form] [aria-busy="true"] {
    cursor: wait;
    opacity: .65;
}

.error-page {
    min-height: 65vh;
    padding: 110px max(24px, calc((100% - var(--content)) / 2));
    background: var(--ink);
    color: white;
}

.error-page .button {
    margin-top: 32px;
}

/* Client logo wall. The supplied logos are white artwork on transparency,
   so they sit directly on the dark section rather than on light chips. */
.client-logos__label {
    margin-top: 44px;
    padding-top: 34px;
    border-top: 1px solid #1e293b;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #64748b;
}

.client-logos {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    justify-items: center;
    gap: 40px 26px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.client-logos li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px;
}

.client-logos img {
    width: auto;
    height: auto;
    max-height: 52px;
    /* Caps the very wide lockups so they cannot dominate their row. */
    max-width: min(100%, 180px);
    opacity: .72;
    transition: opacity 160ms ease;
}

/* Wide lockups are held back by height so they do not outweigh the rest. */
.client-logos__wide img {
    max-height: 34px;
}

/* Solid marks carry more visual weight per pixel than the line-art ones. */
.client-logos__solid img {
    max-height: 40px;
}

/* Portrait crests need the extra height to stay readable at this scale. */
.client-logos__tall img {
    max-height: 60px;
}

.client-logos li:hover img {
    opacity: 1;
}

/* The supplied design uses inline desktop layout values. These rules make
   those exact structures responsive without changing its visual language. */
@media (max-width: 980px) {
    html.menu-open {
        overflow: hidden;
    }

    .site-header__inner {
        grid-template-columns: 1fr auto;
        min-height: 82px;
    }

    .menu-toggle {
        display: inline-flex;
        grid-column: 2;
        grid-row: 1;
    }

    .mobile-menu-panel {
        display: none;
        position: fixed;
        z-index: 49;
        top: 82px;
        right: 0;
        left: 0;
        max-height: calc(100dvh - 82px);
        overflow-y: auto;
        gap: 18px;
        padding: 20px max(24px, calc((100vw - var(--content)) / 2 + 24px)) 24px;
        border-bottom: 1px solid var(--slate-800);
        background: rgb(2 6 23 / 98%);
        box-shadow: 0 18px 32px rgb(2 6 23 / 28%);
        backdrop-filter: blur(14px);
    }

    .site-header[data-menu-open="true"] .mobile-menu-panel {
        display: grid;
    }

    .site-nav {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        align-items: stretch;
    }

    .site-nav a {
        text-align: center;
    }

    .header-actions {
        display: flex;
        justify-content: space-between;
        padding-top: 18px;
        border-top: 1px solid var(--slate-800);
    }

    main [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    main [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    main [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .split-layout,
    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
    }

    .process-grid {
        grid-template-columns: 1fr;
    }

    .about-visual {
        height: 400px;
    }
}

@media (max-width: 680px) {
    .site-header__inner,
    .content,
    .split-layout,
    .closing-cta__inner,
    .site-footer__grid,
    .site-footer__bottom {
        width: min(calc(100% - 32px), var(--content));
    }

    .site-nav {
        grid-template-columns: 1fr 1fr;
    }

    .mobile-menu-panel {
        padding: 16px 16px 20px;
    }

    .header-quote {
        display: none;
    }

    .header-actions {
        justify-content: flex-end;
    }

    main > section[style*="padding"] {
        padding: 64px 16px !important;
    }

    main > section:first-child[style*="padding"],
    .page-hero {
        padding-top: 58px !important;
        padding-bottom: 64px !important;
    }

    main h1[style*="font-size"] {
        font-size: clamp(2.65rem, 13vw, 4rem) !important;
    }

    main h2[style*="font-size"] {
        font-size: clamp(2rem, 9vw, 2.75rem) !important;
    }

    main [style*="gap: 64px"],
    main [style*="gap: 72px"] {
        gap: 38px !important;
    }

    main [style*="grid-template-columns: repeat(4"],
    main [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr !important;
    }

    .client-logos {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px 20px;
    }

    .client-logos li {
        min-height: 46px;
    }

    .client-logos img {
        max-height: 44px;
    }

    .client-logos__wide img {
        max-height: 30px;
    }

    .client-logos__solid img {
        max-height: 34px;
    }

    .client-logos__tall img {
        max-height: 50px;
    }

    main form[style*="display: flex"] {
        flex-direction: column;
    }

    main form[style*="display: flex"] button {
        width: 100%;
    }

    main [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    main [style*="height: 420px"],
    main [style*="height: 440px"] {
        height: 310px !important;
    }

    .section {
        padding: 72px 0;
    }

    .split-layout,
    .site-footer__grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .about-visual {
        height: 320px;
    }

    .closing-cta {
        padding: 58px 0;
    }

    .closing-cta__inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .button-row {
        width: 100%;
    }

    .button-row .button {
        flex: 1 1 100%;
    }
}

/* ---------------------------------------------------------------------
   Motion.

   Every resting state below is gated on html.js, which the head script
   sets before the body parses. With JavaScript off, or if site.js fails
   to run, the page renders exactly as it did before — nothing can be
   left stranded invisible.
   --------------------------------------------------------------------- */

html.js [data-reveal],
html.js [data-reveal-group] > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 720ms cubic-bezier(.22, .61, .36, 1),
                transform 720ms cubic-bezier(.22, .61, .36, 1);
}

html.js [data-reveal].is-visible,
html.js [data-reveal-group].is-visible > * {
    opacity: 1;
    transform: none;
}

/* Children of a group follow their container in sequence. site.js numbers
   them; the step size is per-group so a long logo wall does not crawl. */
html.js [data-reveal-group] > * {
    transition-delay: calc(var(--reveal-index, 0) * var(--reveal-step, 80ms));
}

html.js [data-reveal-group="fast"] {
    --reveal-step: 45ms;
}

/* The sector tiles sit in a 1px-gap grid whose container paints the
   dividers, so they fade only — sliding them would flash the rules. */
html.js [data-reveal-group="fade"] {
    --reveal-step: 90ms;
}

html.js [data-reveal-group="fade"] > * {
    transform: none;
}

html.js [data-reveal-delay="1"] { transition-delay: 120ms; }
html.js [data-reveal-delay="2"] { transition-delay: 240ms; }
html.js [data-reveal-delay="3"] { transition-delay: 360ms; }

/* Home hero headline: words rise and sharpen into place on load. The
   language spans stay hidden until site.js has split them into words,
   so the unsplit line is never painted first. */
html.js [data-hero-title] > [data-lang] {
    visibility: hidden;
}

html.js [data-hero-title].is-ready > [data-lang] {
    visibility: visible;
}

html.js [data-hero-title] .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(.4em);
    filter: blur(7px);
    transition: opacity 640ms cubic-bezier(.22, .61, .36, 1),
                transform 640ms cubic-bezier(.22, .61, .36, 1),
                filter 640ms cubic-bezier(.22, .61, .36, 1);
    transition-delay: calc(var(--word-index, 0) * 55ms);
}

html.js [data-hero-title].is-visible .word {
    opacity: 1;
    transform: none;
    filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

    /* Show everything outright rather than racing it past the reader. */
    html.js [data-reveal],
    html.js [data-reveal-group] > *,
    html.js [data-hero-title] .word {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition-delay: 0ms !important;
    }

    html.js [data-hero-title] > [data-lang] {
        visibility: visible;
    }

    /* Hold the hero on the first photograph rather than cycling it. */
    .hero-media img {
        animation: none !important;
    }
}