/*
Theme Name: Duitti
Theme URI: https://duittigroup.com
Description: Duitti Group hospitality brand-portfolio child theme based on Blocksy
Author: Greys
Author URI: https://greys.co
Template: blocksy
Version: 1.35.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: duitti
*/

/* ============================================
   Brand tokens — single source of truth
   ============================================ */
:root {
    --dt-green: #033425;
    --dt-green-light: #1C6B4A;
    /* Ends of the Our Brands diagonal, measured off the comp's corners. */
    --dt-green-deep: #001712;
    --dt-green-raised: #02422F;
    --dt-off-white: #EFEFEF;
    /* Endpoints of the off-white wash, measured off the comps. */
    --dt-wash-light: #F4F4F4;
    --dt-wash-mid: #EAEAEA;
    --dt-wash-dark: #D4D4D4;
    --dt-white: #FFFFFF;
    --dt-dark: #1A1A1A;
    --dt-grey: #6B7280;

    --dt-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Blocksy styles its header and footer off its own variable rather than
       inheriting from body, so the nav and the whole footer were rendering in
       the system stack — true of Poppins before this too, just less obvious.
       Pointing its variable at ours fixes every region it owns at once, which
       beats chasing each one with an ID-qualified override. */
    --theme-font-family: var(--dt-font);

    /* Subtle paper texture used on the off-white sections. Inline SVG fractal noise
       so there is no extra HTTP request and no binary asset to ship. */
    --dt-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* ============================================
   Base typography
   ============================================ */
body {
    font-family: var(--dt-font);
    font-weight: 400;
    color: var(--dt-dark);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
    font-family: var(--dt-font);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
    text-transform: uppercase;
}

p {
    line-height: 1.7;
}

/* ============================================
   Off-white sections — graded wash, paper texture on top
   ============================================ */

/* The comps do not use a flat off-white here. Sampling the background of the
   Brands, About and Contact designs — taking the median of unsaturated pixels
   so type and photography do not skew it — all three agree on the same left-to-
   right wash, #f4f4f4 down to #d4d4d4. Rendered flat it reads as the dead grey
   the client noticed.

   The noise layer stays on top: listed first, since background-image paints
   its layers front to back. */
.dt-section-paper {
    background-color: var(--dt-off-white);
    background-image:
        var(--dt-paper),
        linear-gradient(100deg, var(--dt-wash-light) 0%, var(--dt-wash-mid) 45%, var(--dt-wash-dark) 100%);
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
}

/* ============================================
   Shared outlined button
   Used by VIEW OUR BRANDS, READ MORE and LEARN MORE.
   Light variant sits on photos and on the green section;
   dark variant sits on the off-white sections.
   ============================================ */
.dt-btn-outline .wp-block-button__link,
a.dt-btn-outline {
    display: inline-block;
    padding: 0.9rem 2.2rem;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 0;
    color: var(--dt-white);
    font-family: var(--dt-font);
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dt-btn-outline .wp-block-button__link:hover,
.dt-btn-outline .wp-block-button__link:focus-visible,
a.dt-btn-outline:hover,
a.dt-btn-outline:focus-visible {
    background: var(--dt-white);
    color: var(--dt-green);
}

.dt-btn-outline--dark .wp-block-button__link,
a.dt-btn-outline--dark {
    color: var(--dt-dark);
}

.dt-btn-outline--dark .wp-block-button__link:hover,
.dt-btn-outline--dark .wp-block-button__link:focus-visible,
a.dt-btn-outline--dark:hover,
a.dt-btn-outline--dark:focus-visible {
    background: var(--dt-green);
    color: var(--dt-white);
    border-color: var(--dt-green);
}

/* ============================================
   Transparent header
   Full rules live in Task 10; this is the base state so the hero
   sections in Tasks 7 and 8 render correctly before then.
   ============================================ */
.has-transparent-header .ct-header [data-row] {
    background: transparent;
}

/* Admin bar fix — WP core injects `html { margin-top: 32px !important }`
   (wp-includes/admin-bar.php), which inflates the document height and leaves a
   white bar at the bottom when scrolling a full-bleed hero. Cancel the margin and
   re-apply the offset as body padding instead, which does not add to the height. */
html {
    margin-top: 0 !important;
}

body.admin-bar {
    padding-top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar {
        padding-top: 46px;
    }
}

/* ============================================
   Brands — cards layout (home page)
   Sits inside the green section from patterns/brands-section.php.
   ============================================ */
.dt-brands--cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.dt-brand-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--dt-white);
}

/* The three brand marks are wildly different shapes — Ginza Kagari is a tall
   0.62 portrait, North Hotpot a 2.69 lockup — so no single box reproduces the
   mockups. The designer balanced them by eye, to roughly equal optical area
   rather than equal height or width, and measuring the comp bears that out:
   Ginza 139x222, Yuku Do 206x187, North Hotpot 263x98 at a 1440 viewport.
   Those aspect ratios match our traced files exactly, so height per brand is
   the only lever needed. A brand with no rule of its own gets the default.

   --dt-logo-scale lets the breakpoints shrink all three together without
   restating each height. */
.dt-brand-card__logo-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(240px * var(--dt-logo-scale, 1));
    margin-bottom: 1.5rem;
}

.dt-brand-card__logo {
    --dt-logo-h: 150px;
    --dt-logo-scale: 1;
    width: auto;
    max-width: 100%;
    height: calc(var(--dt-logo-h) * var(--dt-logo-scale));
    object-fit: contain;
}

.dt-brand-card--ginza-kagari .dt-brand-card__logo { --dt-logo-h: 222px; }
.dt-brand-card--yuku-do      .dt-brand-card__logo { --dt-logo-h: 187px; }
.dt-brand-card--north-hotpot .dt-brand-card__logo { --dt-logo-h: 98px; }

.dt-brand-card__name {
    margin: 0 0 1rem;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dt-white);
}

.dt-brand-card__desc {
    margin: 0 0 2rem;
    max-width: 22rem;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--dt-white);
}

/* Pushes every LEARN MORE button to the same baseline regardless of
   how long the description above it is. */
.dt-brand-card__link {
    margin-top: auto;
}

@media (max-width: 1024px) {
    .dt-brands--cards {
        gap: 2rem;
    }

    .dt-brand-card__logo,
    .dt-brand-card__logo-slot {
        --dt-logo-scale: 0.8;
    }
}

@media (max-width: 781px) {
    .dt-brands--cards {
        grid-template-columns: 1fr;
        gap: 3.5rem;
    }

    .dt-brand-card__desc {
        max-width: 32rem;
    }
}

/* ============================================
   Brands — showcase layout (Brands page)
   Two-column head (identity | gallery), then full-width
   about / featured / socials blocks beneath.
   ============================================ */
/* The showcase is a bare block on the Brands page, so unlike the pattern-based
   sections it has no .dt-section-paper wrapper and was falling through to the
   white body background. The design puts it on the same off-white paper tone as
   every other content section. */
.dt-brands--showcase {
    background-color: var(--dt-off-white);
    background-image: var(--dt-paper);
    background-repeat: repeat;
}

.dt-brands--showcase > * {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.dt-brands--showcase {
    padding: 4rem 1.5rem;
}

.dt-brand-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    column-gap: 2.5rem;
    row-gap: 2rem;
    /* Offset so #brand-slug anchors are not hidden behind the sticky header. */
    scroll-margin-top: 120px;
}

.dt-brand-row__identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
}

/* Same per-brand sizing as the home cards, scaled down to sit in the 200px
   identity column. */
.dt-brand-row__logo {
    --dt-logo-h: 100px;
    --dt-logo-scale: 1;
    width: auto;
    max-width: 170px;
    height: calc(var(--dt-logo-h) * var(--dt-logo-scale));
    object-fit: contain;
}

.dt-brand-row--ginza-kagari .dt-brand-row__logo { --dt-logo-h: 138px; }
.dt-brand-row--yuku-do      .dt-brand-row__logo { --dt-logo-h: 116px; }
.dt-brand-row--north-hotpot .dt-brand-row__logo { --dt-logo-h: 61px; }

.dt-brand-row__name {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--dt-green);
}

.dt-brand-row__gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

/* The tile is a <figure> now, not the image itself — each one is rendered as a
   core/image block so it inherits WordPress's lightbox. The figure holds the
   grid cell's shape and the image fills it; the height overrides further down
   still apply, because they set the figure. */
.dt-brand-row__gallery-item {
    width: 100%;
    height: 210px;
    margin: 0;
    display: block;
    overflow: hidden;
}

.dt-brand-row__gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Core's lightbox puts a magnifier button over the image on hover. It is
   useful on a lone editorial image and noisy on a three-up grid of thumbnails
   that are obviously clickable, so the affordance here is the cursor.

   Only the sets that actually open are listed. About's photo strip and the
   Contact photo are not lightboxed, and a zoom cursor over them would promise
   a click that does nothing. */
.dt-collage__item .lightbox-trigger {
    display: none;
}

.dt-collage__item img {
    cursor: zoom-in;
}

/* ============================================
   Gallery lightbox
   Markup is built by assets/js/lightbox.js on first open.
   ============================================ */
html.dt-lightbox-open {
    overflow: hidden;
}

/* The hidden attribute has to be honoured explicitly. [hidden] { display: none }
   is a user-agent rule, and ANY author display wins over it regardless of
   specificity — so `display: flex` below left the closed overlay laid out at
   full size with opacity 0, invisible but still swallowing every click. The
   symptom was that no image would open a second time until the page reloaded. */
.dt-lightbox[hidden] {
    display: none;
}

.dt-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3.5rem);
    /* Opaque rather than a 94% scrim: the near-transparent version could not be
       confirmed rendering in the capture path used to verify this, and at that
       alpha the difference is invisible anyway. A photo gallery reads better
       against a solid backdrop regardless. */
    background: var(--dt-green);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.dt-lightbox.is-open {
    opacity: 1;
}

.dt-lightbox.is-instant {
    transition: none;
}

.dt-lightbox__figure {
    position: relative;
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

/* The already-decoded thumbnail sits behind the full-size file so the frame is
   never empty while that downloads — the image appears at once, then sharpens. */
.dt-lightbox__ghost,
.dt-lightbox__img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 9rem);
    width: auto;
    height: auto;
    object-fit: contain;
}

.dt-lightbox__ghost {
    position: absolute;
    inset: 0;
    margin: auto;
    filter: blur(6px);
    transform: scale(1.02);
}

.dt-lightbox__img {
    position: relative;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.dt-lightbox__img.is-loaded {
    opacity: 1;
}

.dt-lightbox.is-instant .dt-lightbox__img {
    transition: none;
    opacity: 1;
}

.dt-lightbox__caption {
    margin: 0;
    max-width: 46rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    line-height: 1.5;
    text-align: center;
}

.dt-lightbox__counter {
    position: absolute;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;
}

.dt-lightbox__close,
.dt-lightbox__nav {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--dt-white);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.dt-lightbox__close:hover,
.dt-lightbox__nav:hover,
.dt-lightbox__close:focus-visible,
.dt-lightbox__nav:focus-visible {
    background: rgba(255, 255, 255, 0.16);
}

.dt-lightbox__close:focus-visible,
.dt-lightbox__nav:focus-visible {
    outline: 2px solid var(--dt-white);
    outline-offset: 2px;
}

.dt-lightbox__close {
    top: 1rem;
    right: 1rem;
}

.dt-lightbox__nav--prev { left: 1rem; }
.dt-lightbox__nav--next { right: 1rem; }

.dt-lightbox__nav {
    top: 50%;
    transform: translateY(-50%);
}

.dt-lightbox__live {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 600px) {
    .dt-lightbox__nav {
        top: auto;
        bottom: 1rem;
        transform: none;
    }

    .dt-lightbox__nav--prev { left: 1.5rem; }
    .dt-lightbox__nav--next { right: 1.5rem; }

    .dt-lightbox__ghost,
    .dt-lightbox__img {
        max-height: calc(100vh - 11rem);
    }

    .dt-lightbox__caption {
        display: none;
    }
}

/* In the design the About / Featured On / View More blocks are indented to the
   gallery's left edge, not the page margin — the logo+name column stays clear
   at the far left. So they occupy column 2, not the full row. */
.dt-brand-row__about,
.dt-brand-row__meta {
    grid-column: 2;
}

/* Featured On and View More sit side by side where they fit, and wrap when the
   press list is long (as Ginza Kagari's is in the mockup). */
.dt-brand-row__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 4.5rem;
}

.dt-brand-row__about-heading,
.dt-brand-row__featured-heading,
.dt-brand-row__socials-heading {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dt-green);
}

.dt-brand-row__about p {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    line-height: 1.8;
}

.dt-brand-row__about p:last-child {
    margin-bottom: 0;
}

.dt-brand-row__about a {
    color: var(--dt-green);
    text-decoration: underline;
}

.dt-brand-row__about a:hover,
.dt-brand-row__about a:focus-visible {
    text-decoration: none;
}

.dt-brand-row__about strong {
    font-weight: 700;
}

.dt-brand-row__about ul,
.dt-brand-row__about ol {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
    font-size: 0.95rem;
    line-height: 1.8;
}

.dt-brand-row__about li {
    margin-bottom: 0.35rem;
}

.dt-brand-row__featured-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2.5rem;
}

.dt-brand-row__featured-name {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--dt-dark);
    opacity: 0.75;
}

.dt-brand-row__featured-logos img {
    height: 30px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
}

.dt-brand-row__socials-list {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

.dt-brand-row__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dt-dark);
    transition: color 0.2s ease;
}

.dt-brand-row__social:hover,
.dt-brand-row__social:focus-visible {
    color: var(--dt-green);
}

/* margin-inline must stay auto. Every child of the showcase is centred by
   `.dt-brands--showcase > * { margin-left: auto; margin-right: auto }`, and a
   shorthand of `4rem 0` here quietly reset that — the rule then sat flush to
   the section padding at x=24 while the rows it separates sat at x=120, so the
   line looked broken rather than continuous. */
.dt-brand-row__rule {
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--dt-dark) 25%, transparent);
    margin: 4rem auto;
}

@media (max-width: 1024px) {
    .dt-brand-row {
        grid-template-columns: 160px 1fr;
        column-gap: 1.75rem;
    }

    .dt-brand-row__gallery-item {
        height: 170px;
    }

    .dt-brand-row__logo {
        --dt-logo-scale: 0.85;
    }
}

@media (max-width: 781px) {
    .dt-brands--showcase {
        padding: 2.5rem 1.25rem;
    }

    .dt-brand-row {
        grid-template-columns: 1fr;
        row-gap: 1.5rem;
    }

    .dt-brand-row__about,
    .dt-brand-row__meta {
        grid-column: 1;
    }

    .dt-brand-row__meta {
        flex-direction: column;
        gap: 1.5rem;
    }

    /* The logo sits in a fixed slot rather than at its own width. Each mark is
       a different shape, so a slot that shrink-wrapped them started every
       brand's name at a different x and gave each row a different height —
       the rows read as three unrelated blocks rather than one list. */
    .dt-brand-row__identity {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 0.9rem;
        text-align: left;
    }

    .dt-brand-row__logo {
        width: 100px;
        height: 72px;
        max-width: none;
        object-fit: contain;
        object-position: left center;
        flex: 0 0 auto;
    }

    /* One column per image, however many there are. A fixed three-column grid
       left Ginza Kagari's two photos sitting beside an empty cell, which is
       what made the section look unfinished. */
    .dt-brand-row__gallery {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: 0.5rem;
    }

    .dt-brand-row__gallery-item {
        height: auto;
        aspect-ratio: 1 / 1;
    }

    /* A two-column grid rather than a wrapping flex row: the press marks are
       all different widths, so flex wrapping left them at ragged positions
       with no shared edge to read down. */
    .dt-brand-row__featured-logos {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-items: start;
        align-items: center;
        gap: 1.25rem 1rem;
    }

    /* Explicit height, auto width: these are SVGs, and with height:auto in a
       grid cell they resolved to 0x0 and vanished. The height is what gives
       them a size to derive their width from. */
    .dt-brand-row__featured-logos img {
        height: 24px;
        width: auto;
        max-width: 100%;
        object-fit: contain;
    }

    .dt-brand-row__rule {
        margin: 2.5rem auto;
    }
}

/* ============================================
   Home — hero
   ============================================ */
.dt-hero-home {
    align-items: center;
}

.dt-hero-home__title {
    margin: 0 0 2.5rem;
    font-size: clamp(2rem, 6.5vw, 5.2rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.015em;
    text-transform: uppercase;
}

/* ============================================
   Home — Who We Are
   ============================================ */
.dt-who-we-are {
    padding: 4.5rem 1.5rem 5rem;
}

.dt-who-we-are__title {
    margin: 0;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.01em;
}

/* Montserrat sets "WE ARE" about 5px wider than Poppins did, which was just
   enough to tip the heading onto a third line — the design has two. Hold the
   column open here rather than widening the block's own percentage: the width
   then survives the client editing the section, and no stored markup depends
   on it. */
@media (min-width: 782px) {
    .dt-who-we-are__intro > .wp-block-column:first-child {
        min-width: 10rem;
    }
}

.dt-who-we-are__intro p {
    margin: 0 0 1.25rem;
    font-size: 1rem;
    line-height: 1.8;
}

.dt-who-we-are__intro p:last-child {
    margin-bottom: 0;
}

/* READ MORE sits at the left of the text column, stats at the right — both
   inside the 88% column so they align with the body copy, per the mockup. */
.dt-who-we-are__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 3rem;
}

/* Statistic circles */
.dt-stats {
    display: flex;
    gap: 3.75rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.dt-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 138px;
    height: 138px;
    border-radius: 50%;
    background: var(--dt-green);
    color: var(--dt-white);
    text-align: center;
    padding: 0;
}

/* Compound selectors: these paragraphs sit inside a group inside a column, where
   Blocksy's own `.entry-content p` rules (0,1,1) outrank a lone class (0,1,0) and
   were resetting the size and margins back to body defaults. */
.dt-stat .dt-stat__number {
    margin: 0;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
}

.dt-stat .dt-stat__label {
    margin: 0.2rem 0 0;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.1;
}

.dt-stat .dt-stat__sublabel {
    margin: 0.1rem 0 0;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
}

/* ============================================
   Home — Our Brands (dark green)
   ============================================ */
/* The comp grades this band diagonally rather than glowing from the centre:
   sampling its corners gives #001712 at bottom-left rising to #02422f at
   top-right, with the brand green sitting almost exactly halfway. Lightness
   climbs about 23 points left-to-right and 30 bottom-to-top, which is the 37
   degrees below. Keeping --dt-green as the midpoint means the section still
   reads as the brand colour, graded, rather than as two invented greens. */
.dt-brands-section {
    padding: 5.5rem 0 6rem;
    background-color: var(--dt-green);
    background-image: linear-gradient(
        37deg,
        var(--dt-green-deep) 0%,
        var(--dt-green) 50%,
        var(--dt-green-raised) 100%
    );
}

.dt-brands-section__title {
    margin: 0 0 4rem;
    font-size: clamp(2rem, 4vw, 3.1rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

/* ============================================
   Home — closing statement
   ============================================ */
.dt-closing {
    padding: 6rem 1.5rem;
}

.dt-closing__title {
    margin: 0;
    font-size: clamp(1.5rem, 3.4vw, 2.6rem);
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

@media (max-width: 1024px) {
    .dt-stat {
        width: 128px;
        height: 128px;
    }

    .dt-stat .dt-stat__number {
        font-size: 2.1rem;
    }

    .dt-stat .dt-stat__label {
        font-size: 0.8rem;
    }
}

@media (max-width: 781px) {
    .dt-who-we-are {
        padding: 3.5rem 1.25rem;
    }

    /* The heading stops hugging the right edge once the columns stack. */
    .dt-who-we-are__title {
        text-align: left;
        margin-bottom: 1.25rem;
    }

    .dt-who-we-are__footer {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 2rem;
    }

    .dt-stats {
        justify-content: center;
        gap: 1rem;
        margin-top: 2.5rem;
    }

    .dt-stat {
        width: 104px;
        height: 104px;
    }

    .dt-stat .dt-stat__number {
        font-size: 1.75rem;
    }

    .dt-stat .dt-stat__label {
        font-size: 0.7rem;
    }

    .dt-stat .dt-stat__sublabel {
        font-size: 0.52rem;
    }

    .dt-brands-section {
        padding: 3.5rem 0 4rem;
    }

    .dt-brands-section__title {
        margin-bottom: 2.5rem;
    }

    .dt-closing {
        padding: 3.5rem 1.25rem;
    }
}

/* ============================================
   Inner page hero
   ============================================ */
.dt-page-hero {
    align-items: center;
}

.dt-page-hero__title {
    margin: 0;
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

/* ============================================
   About
   ============================================ */
.dt-about {
    padding: 5rem 1.5rem;
}

.dt-about p {
    margin: 0 0 1.5rem;
    font-size: 1rem;
    line-height: 1.8;
}

.dt-photo-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
    margin-top: 3.5rem;
}

.dt-photo-strip__item {
    margin: 0;
}

.dt-photo-strip__item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
}

/* ============================================
   Contact
   ============================================ */
.dt-contact {
    padding: 5rem 1.5rem 7rem;
}

.dt-contact__intro {
    margin: 0 0 2rem;
    font-size: 1.05rem;
    line-height: 1.9;
}

.dt-contact__email {
    margin: 0;
    font-size: 1.05rem;
}

.dt-contact__email a {
    color: var(--dt-dark);
    text-decoration: none;
}

.dt-contact__email a:hover,
.dt-contact__email a:focus-visible {
    color: var(--dt-green);
    text-decoration: underline;
}

.dt-contact__image {
    margin: 0;
}

.dt-contact__image img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 1024px) {
    .dt-photo-strip__item img {
        height: 220px;
    }
}

@media (max-width: 781px) {
    .dt-about {
        padding: 3rem 1.25rem;
    }

    .dt-photo-strip {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        margin-top: 2.5rem;
    }

    .dt-photo-strip__item img {
        height: 190px;
    }

    /* Five images into a two-column grid leaves one orphan on the last row;
       let it span the full width rather than sit half-empty. */
    .dt-photo-strip__item:last-child {
        grid-column: 1 / -1;
    }

    .dt-contact {
        padding: 3rem 1.25rem 4rem;
    }
}

/* ============================================
   Careers
   ============================================ */
.dt-careers {
    padding: 5rem 1.5rem 7rem;
}

.dt-careers p {
    margin: 0 0 1.5rem;
    font-size: 1rem;
    line-height: 1.9;
}

.dt-careers__heading {
    margin: 2.5rem 0 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
}

.dt-careers a {
    color: var(--dt-dark);
    text-decoration: underline;
}

.dt-careers a:hover,
.dt-careers a:focus-visible {
    color: var(--dt-green);
}

/* Overlapping photo collage */
/* Proportions measured from the Careers mockup: the collage box is 594x808 at a
   1440 viewport. An aspect-ratio box with fractional rows scales the whole
   arrangement with its container, so desktop and mobile are the same
   composition at different sizes — no per-breakpoint row heights to keep in sync. */
.dt-collage {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(20, 1fr);
    aspect-ratio: 594 / 808;
    position: relative;
}

.dt-collage__item {
    margin: 0;
    position: relative;
}

.dt-collage__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Top-left, narrow portrait, sits under the others */
.dt-collage__item--1 {
    grid-column: 1 / 6;
    grid-row: 1 / 10;
    z-index: 1;
}

/* Right and lower, and the largest of the three. Its left edge overlaps photo 1,
   which passes underneath (z-index 1 < 2). The negative margin creates the
   overlap while keeping the measured 58.3% width — pulling the grid column
   earlier instead would have widened it past the mockup's proportion. */
.dt-collage__item--2 {
    grid-column: 6 / 13;
    grid-row: 6 / 17;
    margin-left: -6%;
    z-index: 2;
}

/* Bottom-left, overlapping the left edge of item 2 and painting on top. Indented
   slightly from the left edge — in the mockup it does not sit flush with photo 1. */
.dt-collage__item--3 {
    grid-column: 1 / 8;
    grid-row: 11 / 21;
    margin-left: 3.5%;
    z-index: 3;
}

@media (max-width: 781px) {
    .dt-careers {
        padding: 3rem 1.25rem 4rem;
    }

    /* Keep the overlapping collage on mobile rather than flattening it to a
       stack — it is a distinctive part of the design, and three full-width
       images stacked ran to nearly three screens. Scaling the implicit row
       height down preserves the exact arrangement at a fraction of the height:
       the 12-column grid and every span stay as they are on desktop. */
    .dt-collage {
        margin-top: 2rem;
    }

    }

/* ============================================
   Header — transparent over the hero

   Implemented in the child theme rather than via Blocksy's Pro
   "transparent header" option: that setting lives inside Blocksy's
   undocumented per-row header_placements structure, i.e. database state
   that has to be re-applied on every install. Doing it here keeps the
   header reproducible from git with no Customizer dependency.
   ============================================ */
/* Selectors are ID-qualified on purpose. Blocksy styles the header via `#header`
   (specificity 1,0,0), which beats any plain class selector — a class-only rule
   here is silently ignored. `#offcanvas` also carries the .ct-header class, so
   targeting .ct-header alone hits the mobile drawer instead of the real header. */
.has-transparent-header #header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: transparent;
}

/* The admin bar is fixed at the top for logged-in users; drop the header
   below it so the wordmark is not hidden behind it. */
.admin-bar.has-transparent-header #header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar.has-transparent-header #header {
        top: 46px;
    }
}

.has-transparent-header #header [data-row] {
    background: transparent;
    border: 0;
}

/* Nav links, white over the hero photograph. */
.has-transparent-header #header .ct-menu-link,
.has-transparent-header #header .ct-menu-link:visited {
    color: var(--dt-white);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.has-transparent-header #header .ct-menu-link:hover,
.has-transparent-header #header .ct-menu-link:focus-visible {
    color: var(--dt-white);
    opacity: 0.75;
}

/* Site title stands in for the wordmark until artwork is supplied. */
.has-transparent-header #header .site-title,
.has-transparent-header #header .site-title a {
    color: var(--dt-white);
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
}

.has-transparent-header .ct-header [data-row="middle"] .ct-menu-link {
    color: var(--dt-white);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.has-transparent-header .ct-header [data-row="middle"] .ct-menu-link:hover,
.has-transparent-header .ct-header [data-row="middle"] .ct-menu-link:focus-visible {
    opacity: 0.75;
}

/* Sticky state gets a solid background so links stay legible over content. */
.has-transparent-header .ct-header [data-sticky*="yes"] [data-row="middle"] {
    background: var(--dt-green);
}

.dt-site-logo img,
.ct-header .site-logo-container img {
    max-height: 48px;
    width: auto;
}

/* ============================================
   Footer
   ============================================ */
/* The footer sits outside .dt-section-paper, so when the off-white sections
   picked up the comps' graded wash this stayed flat and a seam appeared where
   the two met. Grading the footer as one piece — rather than per row, which
   would restart the gradient halfway down — continues it to the bottom of the
   page. The rows themselves go transparent so it shows through. */
/* The footer's background is set further down, on the ID-qualified #footer
   rule that has to outrank Blocksy. */
.ct-footer [data-row="middle"] {
    text-align: center;
}

.ct-footer [data-row="middle"] .widget {
    text-align: center;
}

.ct-footer [data-row="middle"] img {
    max-height: 56px;
    width: auto;
    margin: 0 auto 1.5rem;
}

.ct-footer [data-row="middle"] .widget_text p {
    margin: 0 0 0.35rem;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dt-dark);
}

.ct-footer [data-row="middle"] a {
    color: var(--dt-dark);
    text-decoration: none;
}

.ct-footer [data-row="middle"] a:hover,
.ct-footer [data-row="middle"] a:focus-visible {
    color: var(--dt-green);
}

.ct-footer .ct-social-box {
    justify-content: center;
    margin-top: 1.25rem;
}

.ct-footer .ct-social-box a {
    color: var(--dt-green);
}

.ct-footer .ct-social-box svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.ct-footer [data-row="bottom"] {
    background: transparent;
    text-align: center;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--dt-grey);
    padding-bottom: 1.5rem;
}

/* The solid green bar closing the page. */
.ct-footer::after {
    content: "";
    display: block;
    width: 100%;
    height: 10px;
    background: var(--dt-green);
}

@media (max-width: 781px) {
    .ct-footer [data-row="middle"] img {
        max-height: 44px;
        margin-bottom: 1rem;
    }
}

/* ============================================
   Footer stack
   Seeded as a single block widget by bin/seed.php so the footer is
   reproducible from git rather than hand-placed Customizer state.
   ============================================ */
.dt-footer-stack {
    text-align: center;
}

/* Blocksy renders the site title alongside the logo, so once the wordmark was
   set the header showed the mark with the word "duitti" repeated underneath.
   The design has the mark alone. Scoped with :has() so a site with no logo
   uploaded still shows its name rather than nothing. */
#header .site-branding:has(.site-logo-container img) .site-title-container {
    display: none;
}

.dt-footer-stack__logo img {
    display: block;
    width: auto;
    height: 46px;
    margin: 0 auto;
}

.dt-footer-stack__logo {
    margin: 0 0 1.5rem;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--dt-green);
}

.dt-footer-stack__heading {
    margin: 0 0 0.25rem;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dt-dark);
}

.dt-footer-stack__email {
    margin: 0 0 1.25rem;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dt-footer-stack__email a {
    color: var(--dt-dark);
    text-decoration: none;
}

.dt-footer-stack__email a:hover,
.dt-footer-stack__email a:focus-visible {
    color: var(--dt-green);
    text-decoration: underline;
}

.dt-footer-stack__socials {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
    margin: 0;
}

.dt-footer-stack__social {
    display: inline-flex;
    color: var(--dt-green);
    transition: opacity 0.2s ease;
}

.dt-footer-stack__social:hover,
.dt-footer-stack__social:focus-visible {
    opacity: 0.7;
}

/* Blocksy renders an empty "ghost" column when a footer widget area has no
   widgets; once seeded it is redundant and adds a stray gap. */
#footer [data-column="ghost"] {
    display: none;
}

/* ID-qualified: Blocksy paints the footer background via `#footer`, which beats
   any plain class selector.

   The wash belongs here rather than anywhere lower. This rule is 1,0,0 and used
   the `background` shorthand, so a graded rule added further up the file was
   both outranked and had its background-image reset to none — the footer stayed
   flat while the sections above it graded, leaving a seam.

   The row is transparent so the gradient runs the height of the footer instead
   of restarting partway down. */
#footer {
    background-color: var(--dt-off-white);
    background-image:
        var(--dt-paper),
        linear-gradient(100deg, var(--dt-wash-light) 0%, var(--dt-wash-mid) 45%, var(--dt-wash-dark) 100%);
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
}

#footer [data-row="middle"] {
    background: transparent;
}

.dt-footer-stack__copyright {
    margin: 1.75rem 0 0;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--dt-grey);
}

/* Blocksy's own copyright row is replaced by the one inside our seeded footer
   widget — its text lives in undocumented nested per-item settings, so it cannot
   be set reproducibly from code. */
#footer [data-row="bottom"] {
    display: none;
}

/* ============================================
   Suppress Blocksy's built-in page title block

   Blocksy renders `.hero-section > .entry-header` above the content on pages,
   printing the page title a second time. Every page on this site opens with a
   cover hero pattern that already carries the title, so the built-in block is a
   duplicate — and it also pushed the hero down, breaking the full-bleed top.
   ============================================ */
.page .hero-section,
.page article > .entry-header {
    display: none;
}

/* Blocksy pads the content container by 60px top and bottom. The top padding
   stopped the hero reaching the top of the viewport; the bottom padding left a
   60px white band between the last section and the footer, which the design does
   not have — the off-white runs continuously into the footer. */
.page #main > .ct-container-full {
    padding-top: 0;
    padding-bottom: 0;
}

/* Full-bleed sections butt directly against one another in the design. WordPress
   applies its default 1.5em block gap between top-level blocks, which showed the
   white body background as a band between every section and before the footer. */
.entry-content > .alignfull,
.entry-content > .wp-block-cover.alignfull,
.entry-content > .wp-block-group.alignfull {
    margin-top: 0;
    margin-bottom: 0;
}

/* Blocksy gives the footer rows 70px of vertical container padding, making the
   footer ~100px taller than the design. */
#footer .ct-container {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
}

/* ============================================
   Mobile menu

   Blocksy ships a dark-on-transparent hamburger and an unstyled offcanvas
   drawer. Over a full-bleed hero photograph the trigger was invisible, and the
   open panel used default typography on near-black. Both are restyled to the
   brand here. Selectors are ID-qualified because Blocksy's own rules are.
   ============================================ */

/* The wordmark is set from the Customizer, which sizes it for the desktop bar.
   Carried onto a phone unchanged it drew 128x48 — a third of a 393px screen —
   and crowded the hamburger. Capped here rather than in the Customizer so the
   desktop size stays where the client can adjust it. */
@media (max-width: 781px) {
    #header .site-logo-container img {
        max-height: 34px;
        width: auto;
    }
}

/* Trigger — white, larger, comfortably tappable */
.has-transparent-header #header .ct-header-trigger {
    color: var(--dt-white);
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
}

.has-transparent-header #header .ct-header-trigger svg {
    width: 26px;
    height: 26px;
    fill: var(--dt-white);
    color: var(--dt-white);
}

/* Drawer */
#offcanvas.ct-panel {
    --panel-bg: var(--dt-green);
}

/* !important is needed here: Blocksy hard-codes rgba(18,21,25,.98) on the panel
   with a selector that outranks a plain ID rule, and exposes no variable for it. */
#offcanvas .ct-panel-inner {
    background: var(--dt-green) !important;
    width: 100% !important;
    max-width: none !important;
    inset: 0 !important;
    display: flex;
    flex-direction: column;
}

#offcanvas .ct-panel-actions {
    padding: 1.5rem 1.5rem 0;
    justify-content: flex-end;
}

#offcanvas .ct-toggle-close {
    color: var(--dt-white);
    width: 44px;
    height: 44px;
}

#offcanvas .ct-toggle-close svg {
    width: 22px;
    height: 22px;
    fill: var(--dt-white);
    color: var(--dt-white);
}

/* Blocksy emits two .ct-panel-content wrappers; only one holds the menu. The
   empty one was taking half the height and pushing the menu into the lower
   third, so it is collapsed and only the menu's wrapper grows. */
#offcanvas .ct-panel-content:not(:has(.mobile-menu)) {
    display: none;
}

#offcanvas .ct-panel-content:has(.mobile-menu) {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

#offcanvas .mobile-menu {
    width: 100%;
}

/* The inner wrapper stretches to the full column height, so centering has to be
   applied here as well or the menu pins to the top of it. */
#offcanvas .ct-panel-content-inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#offcanvas .mobile-menu ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

#offcanvas .mobile-menu li {
    width: 100%;
    text-align: center;
}

#offcanvas .mobile-menu a {
    display: inline-block;
    padding: 0.8rem 1.75rem;
    font-family: var(--dt-font);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dt-white);
    text-decoration: none;
    border-radius: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* The label stays white and the highlight is carried by the lighter brand
   green behind it. Dark text on the panel was the previous approach and read
   as broken rather than de-emphasised — at 1.26:1 it was barely legible. White
   on #1C6B4A is 6.5:1, so the state is obvious and still passes AA. */
#offcanvas .mobile-menu a:hover,
#offcanvas .mobile-menu a:focus-visible,
#offcanvas .mobile-menu .current-menu-item > a,
#offcanvas .mobile-menu .current_page_item > a {
    color: var(--dt-white);
    background: var(--dt-green-light);
}

/* ============================================
   Mobile refinements (<= 600px)

   At phone widths the desktop type scale and 1.7-1.8 line-heights made every
   text section run several screens long, and the brand galleries stacked to
   three full-width images per brand — turning the Brands page into a very long
   scroll. Tighter type, tighter section padding, and galleries that stay a row
   of thumbnails rather than stacking.
   ============================================ */
@media (max-width: 600px) {
    /* Body copy: smaller and less airy so sections are readable in fewer screens */
    .dt-who-we-are__intro p,
    .dt-about p,
    .dt-careers p,
    .dt-contact__intro,
    .dt-brand-row__about p {
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 1rem;
    }

    /* Section padding */
    .dt-who-we-are,
    .dt-about,
    .dt-careers,
    .dt-contact {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .dt-who-we-are__title {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .dt-who-we-are__footer {
        margin-top: 1.75rem;
        gap: 1.75rem;
    }

    /* Stat circles: smaller so all three sit comfortably across a 390px screen */
    .dt-stats {
        gap: 0.75rem;
        margin-top: 0;
        justify-content: space-between;
        width: 100%;
    }

    .dt-stat {
        width: 96px;
        height: 96px;
    }

    .dt-stat .dt-stat__number {
        font-size: 1.6rem;
    }

    .dt-stat .dt-stat__label {
        font-size: 0.62rem;
    }

    .dt-stat .dt-stat__sublabel {
        font-size: 0.46rem;
    }

    /* Brands: keep the gallery a row of three thumbnails rather than three
       full-width images stacked, which made each brand a full screen of photos. */
    .dt-brands--showcase {
        padding: 2.5rem 1.25rem;
    }

    .dt-brand-row__gallery {
        gap: 0.4rem;
    }

    .dt-brand-row__identity {
        gap: 0.5rem;
        margin-bottom: 0.25rem;
    }

    .dt-brand-row__name {
        font-size: 1.1rem;
    }

    .dt-brand-row__rule {
        margin: 2rem auto;
    }

    /* Closing statement and section headings */
    .dt-closing {
        padding: 2.5rem 1.25rem;
    }

    .dt-brands-section {
        padding: 2.5rem 0 3rem;
    }

    .dt-brands-section__title {
        margin-bottom: 2rem;
    }

    /* About photo strip: shorter tiles */
    .dt-photo-strip__item img {
        height: 150px;
    }

    }