/*
 Theme Name:   Unify Studio
 Theme URI:    https://unify-studio.co.uk
 Description:  Unify Studio's own site. Child theme of Unify.
 Author:       Unify Studio
 Author URI:   https://unify-studio.co.uk
 Template:     unify
 Version:      2.8.5
 License:      GNU General Public License v2 or later
 Text Domain:  unify-child
*/

/* ══════════════════════════════════════════════════════
   UNIFY STUDIO — CSS Custom Property Overrides
   ══════════════════════════════════════════════════════ */

:root {

    /* ── Colours ── */
    --unify-primary:        #111111;
    --unify-secondary:      #333333;
    --unify-accent:         #21386f;   /* Unify blue: buttons and a few highlights only */
    --unify-accent-dark:    #182a54;
    --unify-bg:             #ffffff;
    --unify-bg-alt:         #f4f4f4;
    --unify-text:           #111111;
    --unify-text-muted:     #5e5e5e;
    --unify-border:         #e0e0e0;

    /* ── Typography ── */
    --unify-font-heading:   'Plus Jakarta Sans', system-ui, sans-serif;
    --unify-font-body:      'Plus Jakarta Sans', system-ui, sans-serif;
    --unify-font-mono:      'IBM Plex Mono', ui-monospace, monospace;

    /* ── Nav ── */
    --unify-nav-height:     76px;
    --unify-nav-bg:         var(--unify-white);
    --unify-nav-color:      var(--unify-text);

    /* ── Borders & Radius ── */
    --unify-radius-md:      2px;
    --unify-radius-pill:    50px;
}

/*
 The parent prints Customizer colours/fonts inline in <head>.
 This stylesheet loads after it, so the values above win.
*/


/* ══════════════════════════════════════════════════════
   LOGO
   The parent nests the custom logo link inside another
   link; browsers split them, so size the image directly.
   ══════════════════════════════════════════════════════ */

.unify-nav img.custom-logo,
.unify-nav .custom-logo-link img {
    height: 32px !important;
    width: auto !important;
    max-width: none;
}

@media (max-width: 768px) {
    .unify-nav img.custom-logo,
    .unify-nav .custom-logo-link img { height: 26px !important; }
}

/* Inline SVG wordmark (template-parts/logo.php) */
.unify-nav .uh-logo {
    display: block;
    height: 44px;
    width: auto;
    color: var(--unify-accent);
    overflow: visible;
}

@media (max-width: 768px) {
    .unify-nav .uh-logo { height: 28px; }
}




/* ══════════════════════════════════════════════════════
   NAV CTA
   Give the "Book a discovery call" menu item the CSS
   class "menu-cta" (Appearance › Menus › CSS Classes).
   ══════════════════════════════════════════════════════ */

.unify-nav__menu .menu-cta > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 20px;
    background: var(--unify-accent);
    color: var(--unify-white);
    border-radius: var(--unify-radius-md);
    font-weight: 600;
}

.unify-nav__menu .menu-cta > a:hover {
    opacity: 1;
    background: var(--unify-accent-dark);
}


/* ══════════════════════════════════════════════════════
   HOMEPAGE (front-page.php)
   ══════════════════════════════════════════════════════ */

.uh h1, .uh h2, .uh h3 {
    font-weight: 600;
    letter-spacing: -0.025em;
    margin: 0;
}

.uh p { margin: 0; }

.uh-cap {
    display: block;
    font-family: var(--unify-font-mono);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.5;
    color: var(--unify-text-muted);
    margin: 0;
}

/* Section rhythm: each section opens on a hairline rule with generous
   space either side, so blocks never run into each other. */
.uh {
    --uh-gap: clamp(5rem, 11vw, 9rem);
}

.uh-section {
    padding-bottom: var(--uh-gap);
}

.uh-section > .unify-inner {
    padding-top: var(--uh-gap);
    /* Hairline rule across the content width, not edge to edge */
    background-image: linear-gradient(var(--unify-border), var(--unify-border));
    background-size: calc(100% - 2 * var(--unify-gutter)) 1px;
    background-position: center top;
    background-repeat: no-repeat;
}

.uh-h2 {
    font-size: clamp(1.875rem, 4vw, 3rem);
    line-height: 1.1;
    max-width: 20ch;
    margin-block: 1.25rem 3.5rem !important;
}

.uh-body {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--unify-secondary);
}

.uh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 28px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--unify-radius-md);
    background: var(--unify-accent);
    border-color: var(--unify-accent);
    color: var(--unify-white);
}

.uh-btn:hover { background: var(--unify-accent-dark); border-color: var(--unify-accent-dark); color: var(--unify-white); }

.uh-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

.uh-cta__note {
    font-family: var(--unify-font-mono);
    font-size: 0.8125rem;
    color: var(--unify-text-muted);
}

.uh-cta__note a { text-decoration: underline; }

/* ── 01 Hero ── */

.uh-hero {
    padding-block: clamp(4rem, 9vw, 7rem) clamp(5rem, 10vw, 8rem);
}

.uh-hero .uh-cap { margin-bottom: 1.75rem; }

.uh-hero__title {
    /* Sized to sit on two lines on desktop */
    font-size: clamp(2.5rem, 5.4vw, 5rem);
    line-height: 1.04;
    letter-spacing: -0.035em !important;
    max-width: 22ch;
    text-wrap: balance;
}

.uh-hero__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3rem;
    margin-top: 3rem;
}

.uh-lede {
    flex: 1 1 360px;
    max-width: 38ch;
    text-wrap: pretty; /* no single word left on the last line */
    font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
    line-height: 1.5;
    color: var(--unify-secondary);
}

.uh-hero__media {
    margin: clamp(3rem, 6vw, 4.5rem) 0 0;
}

.uh-hero__media img {
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
}

/* ── Work reel (Unify Hero Slider plugin) ──
   Assign a slider to the front page and it replaces the hero image.
   Per slide: Heading = project name, Subheading = one-line caption,
   Button = "View the project" + case study URL, Overlay opacity = 0. */

.uh-hero:has(+ .uh-reel) { padding-bottom: clamp(3rem, 6vw, 4.5rem); }

.uh-reel + .uh-proof > .unify-inner { background-image: none; }

.unify-hero-slider {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 7;
    min-height: 420px;
    max-height: 88vh;
    background: var(--unify-bg-alt);
}

.unify-hero-slider__track { position: absolute; inset: 0; }

.unify-hero-slider__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}

.unify-hero-slider__slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.9s ease;
}

.unify-hero-slider__bg,
.unify-hero-slider__overlay { position: absolute; inset: 0; }

.unify-hero-slider__bg-image,
.unify-hero-slider__bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Caption: a small white label, bottom left */
.unify-hero-slider__content {
    position: absolute;
    left: var(--unify-gutter);
    bottom: var(--unify-gutter);
    max-width: min(420px, calc(100% - 2 * var(--unify-gutter) - 120px));
    padding: 1rem 1.25rem;
    background: var(--unify-white);
    color: var(--unify-text);
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.unify-hero-slider__content:not(:has(*)) { display: none; }

.unify-hero-slider__heading {
    margin: 0;
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.unify-hero-slider__subheading {
    margin: 0;
    font-family: var(--unify-font-mono);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--unify-text-muted);
}

.unify-hero-slider__btn {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--unify-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Arrows: bottom right */
.unify-hero-slider__arrow {
    position: absolute;
    bottom: var(--unify-gutter);
    z-index: 2;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--unify-radius-md);
    background: var(--unify-white);
    color: var(--unify-text);
    cursor: pointer;
    transition: background var(--unify-transition-fast), color var(--unify-transition-fast);
}

.unify-hero-slider__arrow svg { width: 22px; height: 22px; }

.unify-hero-slider__arrow--next { right: var(--unify-gutter); }
.unify-hero-slider__arrow--prev { right: calc(var(--unify-gutter) + 56px); }

.unify-hero-slider__arrow:hover {
    background: var(--unify-accent);
    color: var(--unify-white);
}

/* Dots: top right, quiet */
.unify-hero-slider__dots {
    position: absolute;
    top: var(--unify-gutter);
    right: var(--unify-gutter);
    z-index: 2;
    display: flex;
    gap: 4px;
}

.unify-hero-slider__dot {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.unify-hero-slider__dot::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--unify-white);
    opacity: 0.5;
    transition: opacity var(--unify-transition-fast);
}

.unify-hero-slider__dot.is-active::before,
.unify-hero-slider__dot:hover::before { opacity: 1; }

.unify-hero-slider__arrow:focus-visible,
.unify-hero-slider__dot:focus-visible,
.unify-hero-slider__btn:focus-visible {
    outline: 2px solid var(--unify-accent);
    outline-offset: 3px;
}

@media (max-width: 768px) {
    .unify-hero-slider { aspect-ratio: 4 / 5; min-height: 0; }
    .unify-hero-slider__content { right: var(--unify-gutter); max-width: none; bottom: calc(var(--unify-gutter) + 60px); }
}

@media (prefers-reduced-motion: reduce) {
    .unify-hero-slider__slide,
    .unify-hero-slider__slide.is-active { transition: none; }
}

/* ── 02 Proof ── */

.uh-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    margin: 0 0 5rem;
    padding-block: 2.5rem;
    border-block: 1px solid var(--unify-border);
}

.uh-stats__item {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
}

.uh-stats__value {
    margin: 0;
    font-size: 3rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
}

.uh-cases {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
}

.uh-case__link {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: inherit;
}

.uh-case__link:hover { opacity: 1; }

.uh-case__media { overflow: hidden; background: var(--unify-bg-alt); }

.uh-case__media img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: transform var(--unify-transition-slow);
}

.uh-case__link:hover .uh-case__media img { transform: scale(1.02); }

.uh-case__result {
    font-size: 1.5rem;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.uh-quote {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
    margin: clamp(4rem, 9vw, 7rem) 0 0;
    padding-top: 3.5rem;
    border-top: 1px solid var(--unify-border);
}

.uh-quote blockquote {
    flex: 1 1 420px;
    max-width: 34ch;
    margin: 0;
    font-family: var(--unify-font-mono);
    font-size: clamp(1.375rem, 2.6vw, 1.875rem);
    line-height: 1.45;
}

.uh-quote figcaption { align-self: flex-end; }

/* ── 03 Cost of standing still ── */

.uh-split {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 5rem;
}

.uh-split > .uh-cap { flex: 0 0 240px; padding-top: 0.75rem; }

/* The cost line is a pause: its own tinted band, no rule */
.uh-cost {
    background: var(--unify-bg-alt);
    padding-block: var(--uh-gap);
    margin-bottom: 0;
}

.uh-cost > .unify-inner {
    padding-top: 0;
    background-image: none;
}

.uh-cost + .uh-section > .unify-inner { background-image: none; }

.uh-cost__line {
    flex: 1 1 520px;
    max-width: 30ch;
    font-size: clamp(1.625rem, 3.2vw, 2.5rem);
    font-weight: 500 !important;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.uh-cost__line > span { display: block; margin-top: 0.55em; color: var(--unify-accent); }

/* ── 04 How we work ── */

.uh-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
}

.uh-step {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--unify-accent);
}

.uh-step .uh-cap { color: var(--unify-accent); }

.uh-step__title { font-size: 2.25rem; }

.uh-step p {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--unify-secondary);
}

/* ── 05 Discovery call ── */

.uh-call__panel {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem 5rem;
    padding: clamp(2rem, 5vw, 4.5rem);
    background: var(--unify-bg-alt);
}

.uh-call__intro,
.uh-call__list {
    flex: 1 1 380px;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.uh-call__intro .uh-h2 {
    margin: 0 !important;
    font-size: clamp(1.75rem, 3.4vw, 2.625rem);
    line-height: 1.15;
    max-width: none;
}

.uh-ticks {
    list-style: none;
    margin: 0;
    padding: 0;
}

.uh-ticks li {
    padding-block: 1.125rem;
    border-top: 1px solid #c8c8c8;
    font-size: 1.125rem;
    line-height: 1.5;
}

.uh-ticks li:last-child { border-bottom: 1px solid #c8c8c8; }

/* Founder: full width along the bottom of the call panel */
.uh-founder {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 2rem 3rem;
    padding-top: 1.5rem;
}

.uh-founder__photo {
    flex: 0 0 200px;
    background: var(--unify-border);
}

.uh-founder__photo img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.uh-founder__text {
    flex: 1 1 320px;
    max-width: 52ch;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.uh-founder__name {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin-top: 0.25rem !important;
}

.uh-founder__role {
    font-family: var(--unify-font-mono);
    font-size: 0.8125rem;
    color: var(--unify-accent);
    margin-bottom: 0.75rem !important;
}

@media (max-width: 640px) {
    .uh-founder__photo { flex-basis: 160px; }
}

/* ── 06 Book the call ── */

.uh-book__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 3rem 5rem;
}

.uh-book__intro {
    flex: 1 1 340px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.uh-book__title {
    font-size: clamp(2.25rem, 5vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.03em !important;
    max-width: 12ch;
}

.uh-book__embed {
    flex: 1 1 480px;
    min-width: 0;
}

.uh-book__embed iframe {
    display: block;
    width: 100%;
    /* Tall enough for Google's calendar plus the time slots, so it never
       needs its own scrollbar */
    height: 1040px;
    border: 1px solid var(--unify-border);
    background: var(--unify-white);
}

@media (max-width: 640px) {
    .uh-book__embed iframe { height: 1180px; }
}

/* ── Insights strip ── */

.uh-insights {
    padding-block: 0 6rem;
}

.uh-insights > .unify-inner {
    padding-top: 3.5rem;
    background-image: linear-gradient(var(--unify-border), var(--unify-border));
    background-size: calc(100% - 2 * var(--unify-gutter)) 1px;
    background-position: center top;
    background-repeat: no-repeat;
}

.uh-insights__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

.uh-insights__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
}

.uh-insight {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    color: var(--unify-text);
}

.uh-insight__media {
    display: block;
    overflow: hidden;
    margin-bottom: 0.625rem;
    background: var(--unify-bg-alt);
}

.uh-insight__media img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform var(--unify-transition-slow);
}

.uh-insight:hover { opacity: 1; }
.uh-insight:hover .uh-insight__title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

.uh-insight__title {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
}

/* ══════════════════════════════════════════════════════
   INSIGHTS & CASE STUDIES
   archive.php / home.php / single.php
   archive-case_study.php / single-case_study.php
   ══════════════════════════════════════════════════════ */

/* ── Page header ── */

.uh-pagehead {
    padding-block: clamp(4rem, 9vw, 7rem) clamp(3rem, 6vw, 4.5rem);
}

.uh-pagehead .uh-cap { margin-bottom: 1.5rem; }
.uh-pagehead .uh-cap a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.uh-pagehead__title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1.05;
    letter-spacing: -0.03em !important;
    max-width: 18ch;
}

.uh-pagehead__title--article {
    font-size: clamp(2.25rem, 5vw, 4rem);
    max-width: 22ch;
}

.uh-pagehead .uh-lede { margin-top: 2rem; max-width: 46ch; }
.uh-pagehead .uh-lede p { font-size: inherit; line-height: inherit; color: inherit; }

/* Topic filters */
.uh-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 2.5rem;
}

.uh-filters a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1rem;
    border: 1px solid var(--unify-border);
    border-radius: var(--unify-radius-pill);
    font-family: var(--unify-font-mono);
    font-size: 0.8125rem;
    color: var(--unify-text);
}

.uh-filters a:hover { opacity: 1; border-color: var(--unify-text); }

.uh-filters a[aria-current="page"] {
    background: var(--unify-accent);
    border-color: var(--unify-accent);
    color: var(--unify-white);
}

/* ── Insight cards ── */

.uh-postgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 4rem 2.5rem;
}

.uh-postcard__link {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    color: inherit;
}

.uh-postcard__link:hover { opacity: 1; }
.uh-postcard__link:hover .uh-postcard__title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

.uh-postcard__media { overflow: hidden; background: var(--unify-bg-alt); margin-bottom: 0.5rem; }

.uh-postcard__media img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.uh-postcard__title {
    font-size: 1.375rem;
    line-height: 1.3;
    letter-spacing: -0.015em;
}

.uh-postcard__excerpt {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--unify-text-muted);
}

/* ── Work grid ── */

.uh-workgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr));
    gap: 5rem 2.5rem;
}

.uh-workcard__media img { aspect-ratio: 3 / 2; }

/* ── Pagination ── */

.uh-pagination { margin-top: 5rem; }

.uh-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-family: var(--unify-font-mono);
    font-size: 0.875rem;
}

.uh-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 0.75rem;
    border: 1px solid var(--unify-border);
    color: var(--unify-text);
}

.uh-pagination .page-numbers.current {
    background: var(--unify-text);
    border-color: var(--unify-text);
    color: var(--unify-white);
}

/* ── Article ── */

.uh-feature {
    margin-block: 0 clamp(3rem, 7vw, 5rem);
}

.uh-feature img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.uh-feature figcaption { margin-top: 0.75rem; }

/* Case study facts */
.uh-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 4rem;
    margin: 3rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--unify-border);
}

.uh-facts dt { margin-bottom: 0.25rem; }
.uh-facts dd { margin: 0; font-weight: 500; }

/* Body copy: a comfortable reading column */
.uh-prose {
    max-width: 42rem;
    margin-inline: auto;
    font-size: 1.125rem;
}

.uh-prose > * + * { margin-top: 1.5em; }

.uh-prose p,
.uh-prose li {
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--unify-text);
}

.uh-prose p { margin: 0; }
.uh-prose > p + p { margin-top: 1.25em; }

.uh-prose h2 {
    font-size: clamp(1.625rem, 2.6vw, 2rem);
    line-height: 1.2;
    margin-top: 2.5em;
}

.uh-prose h3 {
    font-size: 1.375rem;
    line-height: 1.3;
    margin-top: 2em;
}

.uh-prose h2 + *,
.uh-prose h3 + * { margin-top: 0.75em; }

.uh-prose a {
    color: var(--unify-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.uh-prose ul,
.uh-prose ol { padding-left: 1.25em; }

.uh-prose blockquote,
.uh-prose .wp-block-pullquote blockquote {
    margin-block: 2.5em;
    padding: 0 0 0 1.5rem;
    border-left: 2px solid var(--unify-accent);
    font-family: var(--unify-font-mono);
    font-style: normal;
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    line-height: 1.55;
    color: var(--unify-text);
}

.uh-prose blockquote p { font-size: inherit; line-height: inherit; font-family: inherit; }
.uh-prose blockquote cite { display: block; margin-top: 1rem; font-size: 0.8125rem; font-style: normal; color: var(--unify-text-muted); }

.uh-prose .wp-block-pullquote { padding: 0; border: 0; text-align: left; }

.uh-prose figure { margin-block: 2.5em; margin-inline: 0; }
.uh-prose img { height: auto; }

.uh-prose figcaption,
.uh-prose .wp-element-caption {
    margin-top: 0.75rem;
    font-family: var(--unify-font-mono);
    font-size: 0.8125rem;
    color: var(--unify-text-muted);
    text-align: left;
}

/* Wide and full images break out of the reading column */
.uh-prose .alignwide {
    width: min(1200px - 2 * var(--unify-gutter), 100vw - 2 * var(--unify-gutter));
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
}

.uh-prose .alignfull {
    width: 100vw;
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
}

.uh-prose hr {
    border: 0;
    border-top: 1px solid var(--unify-border);
    margin-block: 3em;
}

/* Case study pattern (patterns/case-study.php) */
.uh-prose p.uh-lead {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.uh-prose .uh-results {
    list-style: none;
    padding: 0;
    border-top: 2px solid var(--unify-accent);
}

.uh-prose .uh-results li {
    margin: 0;
    padding-block: 1rem;
    border-bottom: 1px solid var(--unify-border);
    font-size: clamp(1.125rem, 1.8vw, 1.375rem);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Galleries: side by side from tablet up, stacked on phones.
   Set here so it doesn't rely on WordPress's layout styles loading. */
.uh-prose .wp-block-gallery {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 1rem;
    --wp--style--unstable-gallery-gap: 1rem;
}
.uh-prose .wp-block-gallery > figure,
.uh-prose .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
    margin: 0;
    flex: 1 1 100%;
    width: 100%;
}
@media (min-width: 600px) {
    .uh-prose .wp-block-gallery.columns-2 > figure,
    .uh-prose .wp-block-gallery.columns-default > figure,
    .uh-prose .wp-block-gallery.has-nested-images.columns-2 figure.wp-block-image:not(#individual-image),
    .uh-prose .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image) { flex: 0 0 calc(50% - 0.5rem); width: calc(50% - 0.5rem); }
    .uh-prose .wp-block-gallery.columns-3 > figure,
    .uh-prose .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image) { flex: 0 0 calc((100% - 2rem) / 3); width: calc((100% - 2rem) / 3); }
}
.uh-prose .wp-block-gallery.is-cropped figure img { width: 100%; height: 100%; object-fit: cover; }

/* ── Single insight (single.php) ── */

/* Reading progress: a thin brand line across the top of the screen */
.uh-progress {
    position: fixed;
    inset: 0 0 auto;
    height: 3px;
    z-index: 1001;
    pointer-events: none;
}

.uh-progress__bar {
    display: block;
    height: 100%;
    background: var(--unify-accent);
    transform: scaleX(0);
    transform-origin: left center;
}

.admin-bar .uh-progress { top: 32px; }
@media (max-width: 782px) { .admin-bar .uh-progress { top: 46px; } }

.uh-pagehead--article { padding-bottom: clamp(2.5rem, 5vw, 4rem); }

.uh-pagehead--article .uh-pagehead__title { max-width: 20ch; }

.uh-article__back a { text-decoration: none !important; }
.uh-article__back a:hover { color: var(--unify-accent); }

.uh-pagehead .uh-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.625rem;
    margin: 2.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--unify-border);
}

.uh-article__meta a { color: var(--unify-accent); text-decoration: none !important; }

/* Body: the reading column sits centred, details ride alongside it */
.uh-article__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
}

.uh-article__body .uh-prose { max-width: 42rem; width: 100%; margin-inline: auto; }

.uh-article__rail {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 3rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--unify-border);
    max-width: 42rem;
    width: 100%;
    margin-inline: auto;
}

@media (min-width: 1100px) {
    .uh-article__body {
        grid-template-columns: minmax(0, 1fr) minmax(0, 42rem) minmax(0, 1fr);
        column-gap: 3rem;
    }
    .uh-article__body > * { grid-column: 2; }
    .uh-article__body > .uh-article__rail {
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: start;
        position: sticky;
        top: calc(var(--unify-nav-height) + 2.5rem);
        flex-direction: column;
        max-width: 200px;
        margin: 0;
        padding: 1.25rem 0 0;
        border-bottom: 0;
        border-top: 1px solid var(--unify-border);
    }
}

.uh-article__railitem { display: flex; flex-direction: column; gap: 0.375rem; }

.uh-article__railvalue { font-size: 0.9375rem; font-weight: 600; }

.uh-article__share a,
.uh-copylink {
    font: inherit;
    font-size: 0.9375rem;
    color: var(--unify-text);
    text-align: left;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    align-self: flex-start;
    text-decoration: underline;
    text-decoration-color: var(--unify-border);
    text-underline-offset: 4px;
}

.uh-article__share a:hover,
.uh-copylink:hover { color: var(--unify-accent); text-decoration-color: currentColor; }

@media (max-width: 1099px) {
    .uh-article__share { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0.375rem 1rem; }
    .uh-article__share .uh-cap { width: 100%; }
}

/* The opening paragraph reads as a standfirst */
.uh-article .uh-prose > p:first-child {
    font-size: clamp(1.25rem, 2vw, 1.4375rem);
    line-height: 1.6;
    letter-spacing: -0.01em;
}

/* Sign-off: who wrote it, and the next step */
.uh-signoff {
    max-width: 42rem;
    width: 100%;
    margin: clamp(2rem, 5vw, 3rem) auto 0;
    padding-top: 2rem;
    border-top: 2px solid var(--unify-accent);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    align-items: start;
}

.uh-signoff__photo img {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    filter: grayscale(1);
}

.uh-signoff__text { grid-column: 2; display: flex; flex-direction: column; gap: 0.625rem; }
.uh-signoff__photo + .uh-signoff__text { grid-column: 2; }
.uh-signoff > .uh-signoff__text:first-child { grid-column: 1 / -1; }

.uh .uh-signoff__name { font-size: 1.125rem; font-weight: 600; }
.uh-signoff__name span {
    display: block;
    margin-top: 0.125rem;
    font-family: var(--unify-font-mono);
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--unify-text-muted);
}

.uh .uh-signoff__bio { font-size: 1rem; line-height: 1.6; color: var(--unify-secondary); }

.uh-signoff__link { align-self: flex-start; margin-top: 0.25rem; color: var(--unify-accent); }

.uh-signoff .uh-tags { grid-column: 1 / -1; }

/* Keep reading */
.uh-more { margin-top: clamp(4rem, 9vw, 7rem); padding-bottom: 0; }
.uh-more > .unify-inner { padding-top: 3.5rem; }
.uh-more .uh-postgrid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.uh-more .uh-postcard__title { font-size: 1.25rem; }

.uh-tags { margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.uh-tags a { font-family: var(--unify-font-mono); font-size: 0.8125rem; color: var(--unify-text-muted); }

/* Previous / next insight */
.uh-postnav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
    margin-top: clamp(4rem, 9vw, 7rem);
}

.uh-postnav__link {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--unify-text);
    color: inherit;
}

.uh-postnav__link--next { text-align: right; align-items: flex-end; }
.uh-postnav__link:hover { opacity: 1; }
.uh-postnav__link:hover .uh-postnav__title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

.uh-postnav__title { font-size: 1.25rem; font-weight: 600; line-height: 1.3; }

/* Next project */
.uh-nextcase { margin-top: clamp(4rem, 9vw, 7rem); }

.uh-nextcase .uh-case__link {
    padding-top: 1.5rem;
    border-top: 2px solid var(--unify-accent);
}

.uh-nextcase__title {
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.025em;
    max-width: 22ch;
}

.uh-nextcase .uh-case__link:hover .uh-nextcase__title { color: var(--unify-accent); }

/* ── What we do (page-what-we-do.php) ── */

.uh-services__extra { margin: 3rem 0 0; }

.uh-services .uh-pagehead + .uh-service > .unify-inner { background-image: none; padding-top: clamp(2rem, 4vw, 3rem); }

.uh-service { scroll-margin-top: calc(var(--unify-nav-height) + 1rem); }

.uh-service__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 5rem;
}

.uh-service__head {
    flex: 1 1 280px;
    max-width: 420px;
}

@media (min-width: 960px) {
    .uh-service__head {
        position: sticky;
        top: calc(var(--unify-nav-height) + 2rem);
        align-self: flex-start;
    }
}

.uh-service__head .uh-cap { color: var(--unify-accent); margin-bottom: 1rem; }

.uh-service__title {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.03em !important;
}

.uh-service__body {
    flex: 999 1 480px;
    min-width: 0;
    max-width: 44rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.uh-service__outcome {
    font-size: clamp(1.375rem, 2.4vw, 1.75rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.uh-service__label { margin-top: 1.5rem !important; }

.uh-service .uh-ticks li:first-child { border-top-color: var(--unify-accent); border-top-width: 2px; }

.uh-service__work {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

.uh-service__work .uh-case__link { gap: 0.625rem; }

.uh-service__result {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
}

.uh-service__cta { margin-top: 1rem; align-self: flex-start; color: var(--unify-accent); }

/* The flagship service gets a little more presence: its own grey band,
   which also sets it apart from the intro (as on the Let's talk page) */
.uh-service--lead .uh-service__title { color: var(--unify-accent); }

.uh-services .uh-service--lead {
    background: var(--unify-bg-alt);
    padding-block: clamp(4rem, 8vw, 6rem);
}

.uh-services .uh-pagehead + .uh-service--lead > .unify-inner,
.uh-services .uh-service--lead > .unify-inner { background-image: none; padding-top: 0; }

.uh-services .uh-service--lead + .uh-service > .unify-inner { background-image: none; }

.uh-service--lead .uh-case__media,
.uh-service--lead .uh-workcard__media { background: var(--unify-white); }

/* ── Who we work with (template-parts/clients.php) ── */

.uh-clients { margin: 0 0 4rem; }
.uh-clients-band .uh-clients { margin: 0; }

.uh-clients__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem 3rem;
    margin-bottom: 1.5rem;
}

.uh-clients__intro {
    max-width: 44ch;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--unify-secondary);
}

/* Logos sit in an even grid on hairlines, all the same grey */
.uh-clients__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 600px) { .uh-clients__list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .uh-clients__list { grid-template-columns: repeat(5, 1fr); } }

.uh-clients__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(8.5rem, 14vw, 12rem);
    padding: 1.25rem 1rem;
    margin: 0;
}

/* Every logo gets the same box and is scaled up or down to fill it, so
   small files and logos with built-in padding still read at a good size. */
.uh-clients__logo {
    display: block;
    width: 100%;
    max-width: 220px;
    height: clamp(72px, 8vw, 116px);
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.7;
    mix-blend-mode: multiply; /* knocks out white backgrounds on JPG logos */
}

/* Moving version (motion.js): two rows that slide in opposite directions
   with the scroll, fading out at either end */
.uh-clients__list--hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.uh-clients__marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.uh-clients__row { overflow: hidden; }

.uh-clients__track {
    display: flex;
    width: max-content;
    will-change: transform;
}

.uh-clients__track .uh-clients__item {
    flex: 0 0 clamp(180px, 22vw, 280px);
    min-height: clamp(7rem, 10vw, 9rem);
}

/* ── Let's talk (page-contact.php) ── */

.uh-contactpage__extra { margin: 2rem 0 0; }

/* The calendar sits on its own grey band, so the intro above reads as
   the page's one headline and the booking area as the thing to do */
.uh-contactpage .uh-book {
    background: var(--unify-bg-alt);
    padding-block: clamp(4rem, 8vw, 6rem);
}

.uh-contactpage .uh-book > .unify-inner { background-image: none; padding-top: 0; }
.uh-contactpage .uh-book + .uh-section > .unify-inner { background-image: none; }

.uh-contactpage .uh-book__title {
    font-size: clamp(1.875rem, 3.4vw, 2.75rem);
    max-width: 12ch;
}

.uh-contactpage .uh-book__intro .uh-cap { color: var(--unify-accent); }

.uh-contact .uh-cap { margin-bottom: 2rem; }

.uh-contact__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2.5rem 3rem;
}

.uh-contact__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding-top: 1.25rem;
    border-top: 2px solid var(--unify-text);
}

.uh-contact__item:first-child { border-top-color: var(--unify-accent); }

.uh h3.uh-contact__label {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
}

.uh-contact__big {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--unify-text);
    overflow-wrap: anywhere;
}

.uh-contact__big:hover { color: var(--unify-accent); }

.uh-contact__address {
    font-style: normal;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--unify-secondary);
}

.uh-contact__link { color: var(--unify-accent); }

.uh-contact__social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.uh-contact__social a {
    font-size: 1.0625rem;
    color: var(--unify-text);
    text-decoration: underline;
    text-decoration-color: var(--unify-border);
    text-underline-offset: 4px;
}

.uh-contact__social a:hover { color: var(--unify-accent); text-decoration-color: currentColor; }

/* ── Website care (page-website-care.php) ── */

.uh-care__extra { margin: 2rem 0 0; }

.uh-care .uh-pagehead + .uh-plans > .unify-inner { background-image: none; padding-top: clamp(1rem, 3vw, 2rem); }

.uh-plans__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}

.uh-plan {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    border: 1px solid var(--unify-border);
    border-top: 2px solid var(--unify-text);
    background: var(--unify-white);
}

.uh-plan--standard { border-top-color: var(--unify-accent); }

.uh .uh-plan__name { font-size: 1.5rem; letter-spacing: -0.02em; }

.uh .uh-plan__for { font-size: 1rem; line-height: 1.5; color: var(--unify-secondary); min-height: 3em; }

.uh .uh-plan__price {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    padding-block: 1rem;
    border-block: 1px solid var(--unify-border);
}

.uh-plan__amount {
    font-size: clamp(2.5rem, 4vw, 3.25rem);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1;
}

.uh-plan--standard .uh-plan__amount { color: var(--unify-accent); }

.uh .uh-plan__hours { font-weight: 600; }

.uh .uh-plan__lead { margin-top: 0.25rem; }

.uh-plan__list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

.uh-plan__list li {
    position: relative;
    margin: 0;
    padding: 0.5rem 0 0.5rem 1.5rem;
    font-size: 1rem;
    line-height: 1.5;
}

.uh-plan__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.05rem;
    width: 0.625rem;
    height: 1px;
    background: var(--unify-accent);
}

.uh-plan__btn { align-self: flex-start; margin-top: 0.5rem; }

.uh-plans__notes {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 52rem;
    margin-top: 2.5rem;
}

.uh .uh-plans__adhoc { font-size: 1.0625rem; line-height: 1.6; color: var(--unify-secondary); }
.uh-plans__adhoc strong { color: var(--unify-text); font-weight: 600; }

.uh-plans__small { text-transform: none; letter-spacing: 0; }
.uh-plans__small a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.uh-care .uh-plans { padding-bottom: 0; }

/* Existing clients: one quiet line under the plans */
.uh-supportline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem 2rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--unify-border);
}

.uh .uh-supportline p { font-size: 1.0625rem; color: var(--unify-secondary); }
.uh-supportline strong { color: var(--unify-text); font-weight: 600; }
.uh-supportline .unify-link { color: var(--unify-accent); }

/* Contact: studio visits are by appointment */
.uh .uh-contact__note { margin-top: 1rem; font-size: 1rem; font-weight: 500; color: var(--unify-text); }

/* Default pages (page.php): privacy policy, terms and so on */
.uh-page__body { padding-bottom: clamp(4rem, 8vw, 7rem); }
.uh-page .uh-prose { margin-inline: 0; }
.uh-page .uh-prose > :first-child { margin-top: 0; }

/* Coming soon holding page (page-coming-soon.php) */
.uh-soon .uh-pagehead { padding-bottom: clamp(5rem, 10vw, 9rem); }
.uh-soon .uh-soon__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2rem;
    margin-top: 2.5rem;
}
.uh-soon .uh-soon__actions .unify-link { color: var(--unify-accent); }
.uh-soon .uh-supportline { margin-top: clamp(4rem, 8vw, 6rem); }

/* Support links elsewhere */
.uh-contactpage__support { margin-top: 1.5rem !important; }
.uh-footer__support a { color: #a3a3a3 !important; }
.uh .uh-service__care { font-size: 1rem; color: var(--unify-secondary); }
.uh-service__care a { color: var(--unify-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ── Closing CTA band ── */

.uh-endcta {
    margin-top: clamp(5rem, 11vw, 9rem);
    padding-block: clamp(4rem, 8vw, 6rem);
    background: var(--unify-bg-alt);
}

.uh-endcta__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem 4rem;
}

.uh-endcta__title {
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.03em !important;
    max-width: 14ch;
}

/* Archive sections sit directly under the header: no opening rule */
.uh-archive .uh-pagehead + .uh-section > .unify-inner { padding-top: 0; background-image: none; }
.uh-archive .uh-section { padding-bottom: 0; }

/* ══════════════════════════════════════════════════════
   FOOTER (footer.php)
   ══════════════════════════════════════════════════════ */

.uh-footer {
    background: var(--unify-text);
    color: var(--unify-white);
    padding-block: clamp(4rem, 8vw, 6rem) 2rem;
}

.uh-footer a { color: var(--unify-white); }
.uh-footer a:hover { opacity: 0.7; }

.uh-footer__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem 3rem;
    padding-bottom: clamp(3rem, 6vw, 4.5rem);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.uh-footer__brand { display: inline-flex; flex: 0 0 auto; }
.uh-footer__brand:hover { opacity: 1; }

/* Sized to sit level with the statement beside it */
.uh-footer__logo {
    display: block;
    height: clamp(3rem, 5.6vw, 4.5rem);
    width: auto;
    color: var(--unify-white);
}

.uh-footer__wordmark { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }

.uh-footer__statement {
    flex: 1 1 320px;
    margin: 0 0 0 clamp(0rem, 2vw, 1.5rem);
    padding-left: clamp(1.5rem, 3vw, 2.5rem);
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    font-size: clamp(1.75rem, 3.6vw, 2.75rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--unify-white);
}

@media (max-width: 860px) {
    .uh-footer__statement { flex-basis: 100%; margin: 0; padding: 0; border: 0; }
}

.uh-footer .uh-btn,
.uh-footer .uh-btn:hover { color: var(--unify-white); opacity: 1; }

.uh-footer__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2.5rem;
    padding-block: clamp(3rem, 6vw, 4rem);
}

.uh-footer__label {
    margin: 0 0 1rem;
    font-family: var(--unify-font-mono);
    font-size: 0.8125rem !important;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #a3a3a3;
}

.uh-footer__address {
    font-style: normal;
    font-size: 1rem;
    line-height: 1.7;
    color: #d4d4d4;
}

.uh-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.uh-footer__list li { margin: 0; line-height: 1.5; }

.uh-footer__social a {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
}

.uh-footer__bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    font-family: var(--unify-font-mono);
    font-size: 0.8125rem;
    color: #a3a3a3;
}

.uh-footer__bar p { margin: 0; font-size: inherit; color: inherit; }
.uh-footer__bar a { color: #d4d4d4; }

/* Company details: small print under the bar */
.uh-footer__legal {
    margin: 1rem 0 0;
    max-width: 90ch;
    font-size: 0.75rem;
    line-height: 1.6;
    color: #8a8a8a;
}

.uh-footer a:focus-visible {
    outline: 2px solid var(--unify-white);
    outline-offset: 3px;
}

/* Closing CTA band sits flush on the footer */
.uh-endcta + * { margin-top: 0; }

/* ══════════════════════════════════════════════════════
   MOTION (assets/js/motion.js)
   Only applies when the script adds .uh-motion to <html>, which it
   skips for anyone with reduced motion turned on.
   ══════════════════════════════════════════════════════ */

:root { --uh-ease: cubic-bezier(0.2, 0.7, 0.2, 1); }

/* Sections rise gently into view */
.uh-motion .uh-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s var(--uh-ease), transform 0.9s var(--uh-ease);
}

.uh-motion .uh-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* Hero headline settles in word by word */
.uh-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: 0.14em;
    margin-bottom: -0.14em;
}

.uh-word__inner {
    display: inline-block;
    transform: translateY(110%);
    transition: transform 1.1s var(--uh-ease);
}

.uh-ready .uh-word__inner { transform: none; }

/* ── Page wipe ──
   First visit in a session: a brand-blue panel fills the screen, the
   wordmark's letters come together (u and n from the left, f-y from the
   right, the i rises, the dot drops in last), then the panel lifts away.
   Every later page load: the panel sweeps up to cover on the way out, and
   the wordmark comes together again, quicker, before it lifts. The head script in functions.php sets the classes before
   first paint; nothing shows for anyone with reduced motion on. */

@keyframes uh-join {
    from { opacity: 0; transform: var(--uh-from); }
    to   { opacity: 1; transform: none; }
}

@keyframes uh-drop {
    0%   { opacity: 0; transform: translateY(-160px); }
    60%  { opacity: 1; transform: translateY(14px); }
    80%  { transform: translateY(-5px); }
    100% { opacity: 1; transform: none; }
}

@keyframes uh-wipe-off   { from { transform: none; } to { transform: translateY(-100%); } }
@keyframes uh-wipe-cover { from { transform: translateY(100%); } to { transform: none; } }

.uh-wipe {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--unify-accent);
    color: var(--unify-white);
    will-change: transform;
}

.uh-wipe .uh-logo {
    height: clamp(72px, 12vw, 170px);
    width: auto;
    overflow: visible;
    visibility: hidden;
}

.uh-wipe-intro .uh-wipe,
.uh-wipe-in .uh-wipe,
.uh-wipe-out .uh-wipe { display: flex; }

/* Intro */
.uh-wipe-intro .uh-wipe {
    animation: uh-wipe-off 0.85s cubic-bezier(0.76, 0, 0.24, 1) 1.75s both;
}

.uh-wipe-intro .uh-wipe .uh-logo { visibility: visible; }

.uh-wipe-intro .uh-wipe .uh-logo > * { animation: uh-join 1s var(--uh-ease) both; }
.uh-wipe-intro .uh-wipe .uh-logo__u  { --uh-from: translateX(-220px); animation-delay: 0.1s; }
.uh-wipe-intro .uh-wipe .uh-logo__n  { --uh-from: translateX(-120px); animation-delay: 0.16s; }
.uh-wipe-intro .uh-wipe .uh-logo__i  { --uh-from: translateY(110px);  animation-delay: 0.22s; }
.uh-wipe-intro .uh-wipe .uh-logo__fy { --uh-from: translateX(220px);  animation-delay: 0.16s; }
.uh-wipe-intro .uh-wipe .uh-logo__dot {
    animation: uh-drop 0.8s cubic-bezier(0.3, 0.7, 0.4, 1) 0.85s both;
}

/* Every later page load: the same moment, quicker */
.uh-wipe-in .uh-wipe {
    animation: uh-wipe-off 0.65s cubic-bezier(0.76, 0, 0.24, 1) 0.95s both;
}

.uh-wipe-in .uh-wipe .uh-logo { visibility: visible; }

.uh-wipe-in .uh-wipe .uh-logo > * { animation: uh-join 0.6s var(--uh-ease) both; }
.uh-wipe-in .uh-wipe .uh-logo__u  { --uh-from: translateX(-160px); animation-delay: 0.05s; }
.uh-wipe-in .uh-wipe .uh-logo__n  { --uh-from: translateX(-90px);  animation-delay: 0.08s; }
.uh-wipe-in .uh-wipe .uh-logo__i  { --uh-from: translateY(80px);   animation-delay: 0.11s; }
.uh-wipe-in .uh-wipe .uh-logo__fy { --uh-from: translateX(160px);  animation-delay: 0.08s; }
.uh-wipe-in .uh-wipe .uh-logo__dot {
    animation: uh-drop 0.5s cubic-bezier(0.3, 0.7, 0.4, 1) 0.4s both;
}

/* Leaving for another page */
.uh-wipe-out .uh-wipe {
    animation: uh-wipe-cover 0.45s cubic-bezier(0.76, 0, 0.24, 1) both;
}

/* How we work: the three stages are drawn together onto one blue line,
   with a point marking each stage as the line reaches it. */
@media (min-width: 960px) {
    .uh-steps { position: relative; }

    .uh-steps::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--unify-accent);
        transform-origin: left center;
    }

    .uh-steps > .uh-step { border-top-color: transparent; position: relative; }

    .uh-steps > .uh-step::before {
        content: '';
        position: absolute;
        top: -5px;
        left: 0;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--unify-accent);
    }

    .uh-motion .uh-steps.uh-reveal { opacity: 1; transform: none; }

    .uh-motion .uh-steps::before {
        transform: scaleX(0);
        transition: transform 1.6s var(--uh-ease) 0.1s;
    }

    .uh-motion .uh-steps.is-in::before { transform: scaleX(1); }

    .uh-motion .uh-steps > .uh-step::before {
        transform: scale(0);
        transition: transform 0.5s var(--uh-ease);
    }

    .uh-motion .uh-steps.is-in > .uh-step:nth-child(1)::before { transform: scale(1); transition-delay: 0.15s; }
    .uh-motion .uh-steps.is-in > .uh-step:nth-child(2)::before { transform: scale(1); transition-delay: 0.65s; }
    .uh-motion .uh-steps.is-in > .uh-step:nth-child(3)::before { transform: scale(1); transition-delay: 1.15s; }
}

/* ══════════════════════════════════════════════════════
   CURSOR (assets/js/cursor.js) — desktop with a mouse only
   ══════════════════════════════════════════════════════ */

.uh-cursor-on,
.uh-cursor-on * { cursor: none !important; }

.uh-cursor-on input,
.uh-cursor-on textarea,
.uh-cursor-on [contenteditable="true"] { cursor: text !important; }

.uh-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100;
    width: 0;
    height: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.uh-cursor.is-visible { opacity: 1; }

.uh-cursor::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    border: 1.5px solid var(--unify-accent);
    border-radius: 50%;
    background: var(--unify-accent);
    transform: translate(-50%, -50%);
    transition: width 0.3s var(--uh-ease), height 0.3s var(--uh-ease), background 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
}

/* Over links and buttons: an open ring */
.uh-cursor.is-link::before {
    width: 44px;
    height: 44px;
    background: rgba(33, 56, 111, 0.1);
}

/* On blue or dark areas: white */
.uh-cursor.is-light::before { background: var(--unify-white); border-color: var(--unify-white); }
.uh-cursor.is-light.is-link::before { background: rgba(255, 255, 255, 0.18); }

/* Over the work: a "View" disc */
.uh-cursor.is-view::before {
    width: 88px;
    height: 88px;
}

.uh-cursor__label {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    font-family: var(--unify-font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--unify-white);
    opacity: 0;
    transition: opacity 0.2s ease;
    white-space: nowrap;
}

.uh-cursor.is-view .uh-cursor__label { opacity: 1; transition-delay: 0.08s; }

.uh-cursor.is-down::before { transform: translate(-50%, -50%) scale(0.85); }

/* ══════════════════════════════════════════════════════
   POLISH
   ══════════════════════════════════════════════════════ */

/* No lonely last words in body copy; headings break evenly */
.uh-body, .uh-prose p, .uh-prose li, .uh-postcard__excerpt, .uh-clients__intro, .uh-signoff__bio { text-wrap: pretty; }
.uh-h2, .uh-pagehead__title, .uh-book__title, .uh-endcta__title, .uh-service__title, .uh-case__result, .uh-postcard__title, .uh-insight__title { text-wrap: balance; }

/* Selected text in the brand blue */
::selection { background: var(--unify-accent); color: var(--unify-white); }

/* Images ease in slightly on hover, across every card */
.uh-postcard__media img,
.uh-workcard__media img { transition: transform var(--unify-transition-slow); }

@media (hover: hover) {
    .uh-insight:hover .uh-insight__media img,
    .uh-postcard__link:hover .uh-postcard__media img,
    .uh-case__link:hover .uh-workcard__media img { transform: scale(1.03); }
}

/* Once scrolled, the nav sits on a hairline rather than a shadow */
.unify-nav.is-scrolled { box-shadow: 0 1px 0 var(--unify-border); }

/* Anchor jumps (e.g. to the calendar) land clear of the fixed nav */
[id] { scroll-margin-top: calc(var(--unify-nav-height) + 1rem); }

@media (prefers-reduced-motion: reduce) {
    .uh-insight__media img,
    .uh-postcard__media img,
    .uh-workcard__media img,
    .uh-case__media img { transition: none; transform: none !important; }
}

/* ── Hand-drawn marks (uh_mark() in functions.php) ──
   A loose pen line in the brand blue that draws itself in. Two on the
   homepage at most: any more and it stops meaning anything. */
.uh-mark {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}

.uh-mark svg {
    position: absolute;
    max-width: none;
    overflow: visible;
    pointer-events: none;
}

.uh-mark path {
    fill: none;
    stroke: var(--unify-accent);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.uh-mark--underline svg { left: -1%; bottom: -0.1em; width: 96%; height: 0.26em; }
.uh-mark--underline path { stroke-width: 4; }

.uh-mark--circle { padding-inline: 0.6em; margin-left: -0.6em; }
.uh-mark--circle svg { left: 0; top: -24%; width: 100%; height: 150%; }
.uh-mark--circle path { stroke-width: 2.5; }

.uh-motion .uh-mark path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}

.uh-motion .uh-mark--circle path { transition-duration: 1.2s; }
.uh-motion .uh-hero .uh-mark path { transition-delay: 0.9s; }
.uh-motion .uh-pagehead .uh-mark path { transition-delay: 0.6s; }
.uh-motion .uh-mark.is-drawn path { stroke-dashoffset: 0; }

/* ── Focus ── */

.uh a:focus-visible,
.unify-nav__menu .menu-cta > a:focus-visible {
    outline: 2px solid var(--unify-accent);
    outline-offset: 3px;
}
.uh-article { overflow-x: clip; }