/* ==========================================================================
   THIRD. — site shell: header, mobile menu, footer.
   Design tokens live in the plugin stylesheet (third.css), which this depends on.
   ========================================================================== */

/* The base theme never sets a global box model; without this the shell's
   width:100% + padding overflows the viewport. */
.th-skip,
.th-header,
.th-header *,
.th-header *::before,
.th-header *::after,
.th-menu,
.th-menu *,
.th-cta-bar,
.th-cta-bar *,
.th-footer,
.th-footer *,
.th-footer *::before,
.th-footer *::after {
    box-sizing: border-box;
}

.th-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    background: var(--th-espresso);
    color: var(--th-cream);
    padding: 1rem 1.5rem;
    font-family: var(--th-body);
    font-size: .8125rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.th-skip:focus {
    left: 1rem;
    top: 1rem;
}

/* Elementor full-width pages must not inherit any theme boxing. */
body.th-site {
    margin: 0;
    background: var(--th-cream);
    font-family: var(--th-body);
    color: var(--th-ink);
    overflow-x: hidden;
}

body.th-site #app > .page-wrapper,
body.th-site .page-content-wrapper,
body.th-site .elementor,
body.th-site .elementor-section-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* The homepage sections manage their own gutters — strip Elementor defaults. */
body.th-site .elementor-element.e-con,
body.th-site .elementor-element.e-con-inner {
    --width: 100%;
    --content-width: 100%;
    --padding-block-start: 0px;
    --padding-block-end: 0px;
    --padding-inline-start: 0px;
    --padding-inline-end: 0px;
    --margin-block-start: 0px;
    --margin-block-end: 0px;
    --margin-inline-start: 0px;
    --margin-inline-end: 0px;
    max-width: 100%;
}

body.th-site .elementor-widget-container {
    margin: 0;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

/* The bar is not sticky: it scrolls away with the page. Over the hero it is
   absolutely positioned so the photograph runs underneath it; on every other
   template it simply opens the document flow. The global CTA bar at the bottom
   takes over from here once the hero is behind you. */
.th-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    font-family: var(--th-body);
    transition: background-color .6s var(--th-ease), border-color .6s var(--th-ease), backdrop-filter .6s var(--th-ease);
    background: transparent;
    border-bottom: 1px solid transparent;
}

.th-header:not(.th-header--over) {
    position: relative;
    background: var(--th-cream);
    border-bottom-color: var(--th-rule);
}

.th-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1rem, 3vw, 3rem);
    width: 100%;
    max-width: 1680px;
    margin-inline: auto;
    padding: clamp(1rem, 2vw, 1.5rem) var(--th-gutter);
    transition: padding .6s var(--th-ease);
}

/* --------------------------------------------------------------------------
   Utility bar — USPs, reviews / contact / language, all flush right
   -------------------------------------------------------------------------- */

.th-topbar {
    font-size: clamp(.625rem, .7vw, .6875rem);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--th-cream-soft);
    overflow: hidden;
    max-height: 4rem;
    transition:
        max-height .55s var(--th-ease),
        opacity .4s var(--th-ease),
        color .6s var(--th-ease);
}

/* Folds out of the way entirely while the mobile menu is open. */
body.th-menu-open .th-topbar {
    max-height: 0;
    opacity: 0;
}

.th-header:not(.th-header--over) .th-topbar {
    color: var(--th-ink-soft);
}

.th-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(1rem, 3vw, 2.5rem);
    width: 100%;
    max-width: 1680px;
    margin-inline: auto;
    padding: .7rem var(--th-gutter);
}

.th-topbar__usps {
    display: flex;
    align-items: center;
    gap: clamp(.9rem, 2.2vw, 2.25rem);
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.th-topbar__usps li {
    display: flex;
    align-items: center;
    gap: .5em;
    white-space: nowrap;
}

.th-tick {
    width: .95em;
    height: .95em;
    flex: none;
    color: var(--th-crema);
}

.th-topbar__aside {
    display: flex;
    align-items: center;
    gap: clamp(.9rem, 2vw, 1.9rem);
}

.th-topbar__link {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    transition: color .4s var(--th-ease);
}

.th-topbar__link:hover,
.th-topbar__link:focus-visible {
    color: var(--th-crema);
}

.th-pin {
    width: .9em;
    height: 1.05em;
    flex: none;
    opacity: .8;
}

/* Google reviews */
.th-reviews {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    padding: .45em .85em;
    border: 1px solid currentColor;
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .4s var(--th-ease), color .4s var(--th-ease), background-color .4s var(--th-ease);
}

.th-reviews:hover,
.th-reviews:focus-visible {
    color: var(--th-crema);
    border-color: var(--th-crema);
}

.th-google {
    width: 1.05em;
    height: 1.05em;
    flex: none;
}

.th-stars {
    display: inline-flex;
    gap: .1em;
}

.th-star {
    position: relative;
    display: block;
    width: .95em;
    height: .95em;
    background: currentColor;
    opacity: .28;
    -webkit-mask: var(--th-star-mask) center / contain no-repeat;
    mask: var(--th-star-mask) center / contain no-repeat;
}

.th-star i {
    position: absolute;
    inset: 0;
    display: block;
    background: #F5B400;
    opacity: 1;
    -webkit-mask: var(--th-star-mask) left center / auto 100% no-repeat;
    mask: var(--th-star-mask) left center / auto 100% no-repeat;
}

:root {
    --th-star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.6l2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8L1.6 7.7l5.8-.8z' fill='%23000'/%3E%3C/svg%3E");
}

.th-reviews__score {
    font-weight: 600;
    letter-spacing: .1em;
}

.th-reviews__count {
    font-weight: 400;
    opacity: .75;
}

@media (max-width: 1200px) {
    .th-topbar__usp--wide {
        display: none;
    }
}

/* Below the nav breakpoint the bar keeps only a scrolling USP line. */
.th-topbar__marquee {
    display: none;
    width: 100%;
}

@media (max-width: 900px) {
    .th-topbar__usps,
    .th-topbar__aside {
        display: none;
    }
    .th-topbar__marquee {
        display: block;
        --th-speed: 26s;
    }
    .th-topbar__inner {
        padding-block: .55rem;
    }
    .th-topbar .th-marquee__group span {
        font-family: var(--th-body);
        font-size: inherit;
        font-weight: 500;
        letter-spacing: .14em;
    }
    .th-topbar .th-marquee__group {
        gap: 1.25rem;
        padding-right: 1.25rem;
    }
    .th-topbar .th-marquee__group i {
        color: var(--th-crema);
    }
}

.th-header__brand {
    display: block;
    position: relative;
    flex: none;
    line-height: 0;
}

.th-header__brand img {
    display: block;
    width: auto;
    height: clamp(17px, 1.9vw, 23px);
    transition: opacity .5s var(--th-ease), height .6s var(--th-ease);
}

.th-header__brand img + img {
    position: absolute;
    left: 0;
    top: 0;
}

/* Cream mark over the hero, espresso mark on every other template. */
.th-header__mark--dark { opacity: 0; }
.th-header__mark--light { opacity: 1; }

.th-header:not(.th-header--over) .th-header__mark--dark { opacity: 1; }
.th-header:not(.th-header--over) .th-header__mark--light { opacity: 0; }

.th-nav {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 2.6vw, 2.75rem);
}

.th-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 2.4vw, 2.5rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.th-nav__link {
    position: relative;
    display: inline-block;
    font-size: var(--th-t-label);
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--th-cream);
    text-decoration: none;
    padding-block: .35em;
    transition: color .5s var(--th-ease), opacity .5s var(--th-ease);
}

.th-header:not(.th-header--over) .th-nav__link {
    color: var(--th-ink);
}

.th-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .5s var(--th-ease);
}

.th-nav__link:hover::after,
.th-nav__link:focus-visible::after,
.th-nav__link[aria-current="page"]::after {
    transform: scaleX(1);
    transform-origin: left;
}

.th-nav__item {
    position: static;
}

.th-nav__chev {
    width: .62em;
    height: .62em;
    margin-left: .5em;
    transition: transform .45s var(--th-ease);
    vertical-align: middle;
}

.th-nav__link[aria-expanded="true"] .th-nav__chev {
    transform: rotate(180deg);
}

.th-nav__link[aria-expanded="true"]::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* --------------------------------------------------------------------------
   Megamenu
   -------------------------------------------------------------------------- */

.th-mega {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 5;
    background: var(--th-cream);
    border-top: 1px solid var(--th-rule);
    border-bottom: 1px solid var(--th-rule);
    box-shadow: 0 30px 60px -32px rgba(23, 16, 10, .38);
    color: var(--th-ink);
    opacity: 0;
    transform: translateY(-.6rem);
    pointer-events: none;
    transition: opacity .4s var(--th-ease), transform .5s var(--th-ease);
}

.th-mega[hidden] {
    display: none;
}

.th-mega.is-open {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.th-mega__inner {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) minmax(0, .9fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    width: 100%;
    max-width: 1680px;
    margin-inline: auto;
    padding: clamp(1.75rem, 3vw, 2.75rem) var(--th-gutter) clamp(2rem, 3.5vw, 3rem);
    align-items: start;
}

.th-mega__eyebrow {
    font-size: var(--th-t-label);
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--th-crema);
    margin: 0 0 .85rem;
}

.th-mega__text {
    font-family: var(--th-editorial);
    font-style: italic;
    font-size: clamp(1.25rem, 1.8vw, 1.75rem);
    line-height: 1.15;
    color: var(--th-espresso);
    margin: 0;
    max-width: 20ch;
}

.th-mega__cta {
    display: inline-flex;
    align-items: center;
    gap: .7em;
    margin-top: clamp(1rem, 2vw, 1.6rem);
    padding: .9em 1.5em;
    border: 1px solid var(--th-espresso);
    border-radius: 999px;
    font-size: var(--th-t-label);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--th-espresso);
    text-decoration: none;
    transition: background-color .4s var(--th-ease), color .4s var(--th-ease);
}

.th-mega__cta svg {
    width: 1em;
    height: 1em;
    transition: transform .4s var(--th-ease);
}

.th-mega__cta:hover,
.th-mega__cta:focus-visible {
    background: var(--th-espresso);
    color: var(--th-cream);
}

.th-mega__cta:hover svg,
.th-mega__cta:focus-visible svg {
    transform: translateX(.25em);
}

.th-mega__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    border-top: 1px solid var(--th-rule);
}

.th-mega__links a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding: clamp(.7rem, 1.2vw, 1rem) 0;
    border-bottom: 1px solid var(--th-rule);
    color: var(--th-ink);
    text-decoration: none;
    transition: padding-left .45s var(--th-ease), color .35s var(--th-ease);
}

.th-mega__links a:hover,
.th-mega__links a:focus-visible {
    padding-left: .75rem;
    color: var(--th-espresso);
}

.th-mega__link-label {
    font-family: var(--th-display);
    font-size: clamp(1rem, 1.4vw, 1.3125rem);
    font-weight: 700;
    letter-spacing: -.02em;
}

.th-mega__link-meta {
    font-size: var(--th-t-label);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--th-ink-soft);
    text-align: right;
    white-space: nowrap;
}

.th-mega__side {
    display: grid;
    gap: 1.1rem;
}

.th-mega__figure {
    margin: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--th-bone);
}

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

.th-mega__usps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .6rem;
    font-size: var(--th-t-label);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--th-ink-soft);
    line-height: 1.5;
}

.th-mega__usps li {
    display: flex;
    align-items: flex-start;
    gap: .6em;
}

.th-mega__usps .th-tick {
    margin-top: .2em;
}

/* Dim the page below an open panel. A negative z-index would paint over the
   header's own background, so the scrim starts at the header's bottom edge and
   sits under the panel (z-index 5) instead. */
.th-mega__scrim {
    position: fixed;
    top: var(--th-header-h, 6rem);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: rgba(23, 16, 10, .38);
    opacity: 0;
    pointer-events: none;
    transition: opacity .45s var(--th-ease);
}

.th-header.has-mega-open .th-mega__scrim {
    opacity: 1;
}

/* An open panel always needs the solid header treatment behind it. */
.th-header.has-mega-open {
    background: var(--th-cream);
    border-bottom-color: transparent;
}

.th-header.has-mega-open .th-nav__link,
.th-header.has-mega-open .th-lang,
.th-header.has-mega-open .th-burger {
    color: var(--th-ink);
}

/* The bar turns cream behind an open panel, so the utility row has to follow. */
.th-header.has-mega-open .th-topbar {
    color: var(--th-ink-soft);
}

.th-header.has-mega-open .th-header__mark--dark { opacity: 1; }
.th-header.has-mega-open .th-header__mark--light { opacity: 0; }

@media (max-width: 1100px) {
    .th-mega__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .th-mega__side {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
        align-items: center;
    }
}

.th-lang {
    display: flex;
    align-items: center;
    gap: .5em;
    font-size: var(--th-t-label);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--th-cream);
    transition: color .5s var(--th-ease);
}

.th-header:not(.th-header--over) .th-lang {
    color: var(--th-ink);
}

.th-lang a,
.th-lang span {
    color: inherit;
    text-decoration: none;
    opacity: .5;
    transition: opacity .4s var(--th-ease);
}

.th-lang a:hover {
    opacity: 1;
}

.th-lang [aria-current] {
    opacity: 1;
    font-weight: 600;
}

.th-lang i {
    font-style: normal;
    opacity: .3;
}

/* Burger */
.th-burger {
    display: none;
    appearance: none;
    background: none;
    border: 0;
    padding: .6rem;
    margin-right: -.6rem;
    cursor: pointer;
    color: var(--th-cream);
    transition: color .5s var(--th-ease);
}

.th-header:not(.th-header--over) .th-burger {
    color: var(--th-ink);
}

.th-burger__icon {
    display: block;
    width: 27px;
    height: auto;
    /* The rotated arms of the X reach past the viewBox on the diagonal. */
    overflow: visible;
}

.th-burger__line {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    /* The arms flatten on the way to the X (scaleY below); the paths carry
       vector-effect="non-scaling-stroke" so the hairline stays 1.5px through it.
       fill-box puts each stroke's own midpoint at the origin, so the arms
       pivot in place and only then travel to the centre line. */
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .5s var(--th-ease), opacity .3s var(--th-ease);
}

.th-burger[aria-expanded="true"] .th-burger__line--top {
    transform: translateY(6px) rotate(45deg) scaleY(.12);
}

.th-burger[aria-expanded="true"] .th-burger__line--mid {
    opacity: 0;
    transform: scaleX(.4);
}

.th-burger[aria-expanded="true"] .th-burger__line--bot {
    transform: translateY(-6px) rotate(-45deg) scaleY(.12);
}

@media (max-width: 900px) {
    .th-nav {
        display: none;
    }
    .th-burger {
        display: block;
    }
}

/* --------------------------------------------------------------------------
   Fullscreen mobile menu — white surface.
   The overlay is paper, not ink: it reads as the page opening up rather than
   a second, darker site. Everything inside therefore uses the ink-on-white
   half of the palette, with crema kept for the numerals and accents only.
   -------------------------------------------------------------------------- */
.th-menu {
    --th-menu-surface: #FFFFFF;
    --th-menu-measure: 46rem;
    position: fixed;
    inset: 0;
    z-index: 99;
    background: var(--th-menu-surface);
    color: var(--th-ink);
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: stretch;
    padding: clamp(5rem, 14vh, 7rem) var(--th-gutter) 2rem;
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
    clip-path: inset(0 0 100% 0);
    transition: clip-path .8s var(--th-ease);
    visibility: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.th-menu.is-open {
    clip-path: inset(0 0 0 0);
    visibility: visible;
}

.th-menu__nav {
    align-self: start;
    width: 100%;
    max-width: var(--th-menu-measure);
}

.th-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* Numerals are set from the list, so the markup stays untouched. */
    counter-reset: th-menu;
}

.th-menu__list > li {
    counter-increment: th-menu;
}

.th-menu__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    overflow: hidden;
}

.th-menu__row > a {
    display: flex;
    align-items: baseline;
    gap: .8em;
    flex: 1;
    min-width: 0;
    font-family: var(--th-display);
    font-size: clamp(1.5rem, 7.4vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--th-ink);
    text-decoration: none;
    padding-block: .52em;
    transform: translateY(105%);
    transition: transform .7s var(--th-ease), color .4s var(--th-ease);
}

/* 01, 02, 03 — a quiet index that keeps the big type from floating. */
.th-menu__row > a::before {
    content: counter(th-menu, decimal-leading-zero);
    flex: none;
    font-family: var(--th-body);
    font-size: .3em;
    font-weight: 500;
    letter-spacing: .18em;
    color: var(--th-crema);
}

.th-menu.is-open .th-menu__row > a {
    transform: none;
    transition-delay: calc(var(--i, 0) * 70ms + 120ms);
}

.th-menu__row > a:hover,
.th-menu__row > a:focus-visible {
    color: var(--th-crema);
}

.th-menu__toggle {
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    background: var(--th-paper);
    border: 1px solid var(--th-rule);
    border-radius: .8rem;
    color: var(--th-ink);
    cursor: pointer;
    transition:
        background-color .35s var(--th-ease),
        border-color .35s var(--th-ease),
        color .35s var(--th-ease),
        transform .45s var(--th-ease);
}

.th-menu__toggle svg {
    width: .8rem;
    height: .8rem;
}

.th-menu__toggle:hover {
    border-color: var(--th-crema);
    color: var(--th-crema);
}

.th-menu__toggle[aria-expanded="true"] {
    background: var(--th-ink);
    border-color: var(--th-ink);
    color: var(--th-menu-surface);
    transform: rotate(135deg);
}

.th-menu__sub {
    padding: 0 0 1.5rem;
}

.th-menu__sub[hidden] {
    display: none;
}

.th-menu__sub ul {
    list-style: none;
    margin: 0 0 1rem;
    /* The hairline hangs the sublinks off the row above them. */
    padding: 0 0 0 1.15rem;
    border-left: 1px solid var(--th-rule);
    display: grid;
    gap: .1rem;
}

.th-menu__sub a {
    display: block;
    padding-block: .45rem;
    color: var(--th-ink-soft);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: .01em;
    transition: color .3s var(--th-ease), transform .3s var(--th-ease);
}

.th-menu__sub a:hover,
.th-menu__sub a:focus-visible {
    color: var(--th-ink);
    transform: translateX(4px);
}

.th-menu__usp {
    margin: 0 0 0 1.15rem;
    font-size: var(--th-t-label);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--th-crema);
    line-height: 1.6;
}

.th-menu .th-reviews {
    border-color: var(--th-rule);
    color: var(--th-ink-soft);
}

.th-menu .th-reviews:hover,
.th-menu .th-reviews:focus-visible {
    color: var(--th-crema);
    border-color: var(--th-crema);
}

.th-menu .th-lang {
    color: var(--th-ink);
}

.th-reviews--menu {
    align-self: start;
    margin-bottom: .35rem;
}

.th-lang--menu {
    margin-top: .35rem;
}

.th-menu__foot {
    align-self: end;
    width: 100%;
    max-width: var(--th-menu-measure);
    margin-top: 2.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--th-rule);
    display: grid;
    gap: .85rem;
    font-size: var(--th-t-label);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--th-ink-soft);
}

.th-menu__foot p {
    margin: 0;
}

.th-menu__foot a {
    color: inherit;
    text-decoration: none;
    transition: color .35s var(--th-ease);
}

.th-menu__foot a:hover,
.th-menu__foot a:focus-visible {
    color: var(--th-ink);
}

body.th-menu-open {
    overflow: hidden;
}

/* The bar keeps sitting above the overlay, so it has to switch to the
   ink-on-white treatment for as long as the menu is open — over the hero it
   would otherwise stay cream on white. */
body.th-menu-open .th-header,
body.th-menu-open .th-header:not(.th-header--over) {
    background: #FFFFFF;
    border-bottom-color: transparent;
}

body.th-menu-open .th-burger,
body.th-menu-open .th-lang,
body.th-menu-open .th-nav__link {
    color: var(--th-ink);
}

body.th-menu-open .th-header__mark--dark { opacity: 1; }
body.th-menu-open .th-header__mark--light { opacity: 0; }

/* --------------------------------------------------------------------------
   Footer — light surface.
   It follows the dark CTA section, so the page lands on paper instead of
   fading into more ink. Every colour here is the ink-on-cream half of the
   palette; nothing borrows the dark tokens.
   -------------------------------------------------------------------------- */

.th-footer {
    --th-footer-bg: #FFFFFF;
    --th-footer-rule: var(--th-rule);
    --th-footer-muted: var(--th-ink-soft);

    background: var(--th-footer-bg);
    color: var(--th-ink);
    font-family: var(--th-body);
    font-size: var(--th-t-body);
    position: relative;
    overflow: clip;
}

.th-footer__inner,
.th-footer__actions-inner {
    width: 100%;
    max-width: 1680px;
    margin-inline: auto;
    padding-inline: var(--th-gutter);
}

/* --- Action bar ---------------------------------------------------------- */

.th-footer__actions {
    padding-block: clamp(2.25rem, 4vw, 3.5rem);
    border-bottom: 1px solid var(--th-footer-rule);
}

.th-footer__actions-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: clamp(.75rem, 1.4vw, 1.25rem);
}

.th-footer__action {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: clamp(1rem, 1.6vw, 1.35rem) clamp(1.1rem, 1.8vw, 1.5rem);
    background: var(--th-paper);
    border: 1px solid var(--th-footer-rule);
    color: var(--th-ink);
    text-decoration: none;
    transition: background-color .45s var(--th-ease), border-color .45s var(--th-ease), color .45s var(--th-ease);
}

.th-footer__action:hover,
.th-footer__action:focus-visible {
    background: var(--th-cream);
    border-color: var(--th-espresso);
    color: var(--th-espresso);
}

.th-footer__action .th-footer__icon {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--th-espresso);
}

.th-footer__action-body {
    display: grid;
    gap: .3rem;
    min-width: 0;
}

.th-footer__action-label {
    font-size: var(--th-t-label);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    line-height: 1;
}

.th-footer__action-meta {
    font-size: .8125rem;
    line-height: 1.35;
    color: var(--th-footer-muted);
    overflow-wrap: anywhere;
}

.th-footer__action .th-cta__arrow {
    margin-left: auto;
    flex: none;
    width: 1rem;
    height: 1rem;
    color: var(--th-espresso);
}

.th-footer__action:hover .th-cta__arrow,
.th-footer__action:focus-visible .th-cta__arrow {
    transform: translateX(.28em);
}

/* --- Columns ------------------------------------------------------------- */

.th-footer__top {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(2rem, 3.4vw, 3.5rem);
    padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
}

.th-footer__brand {
    grid-column: span 3;
}

.th-footer__col--nav {
    grid-column: span 2;
}

.th-footer__col--contact {
    grid-column: span 2;
}

.th-footer__map {
    grid-column: span 3;
}

.th-footer__brand img {
    width: min(100%, 190px);
    height: auto;
    display: block;
}

.th-footer__tagline {
    margin: 1.1rem 0 0;
    font-size: var(--th-t-label);
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--th-espresso);
}

.th-footer__blurb {
    margin: 1.1rem 0 0;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--th-footer-muted);
    max-width: 34ch;
}

.th-footer__social {
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.th-footer__social a {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    padding: .55em 1em .55em .8em;
    border: 1px solid var(--th-footer-rule);
    border-radius: 999px;
    font-size: var(--th-t-label);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--th-ink);
    text-decoration: none;
    transition: border-color .45s var(--th-ease), background-color .45s var(--th-ease);
}

.th-footer__social a:hover,
.th-footer__social a:focus-visible {
    border-color: var(--th-espresso);
    background: var(--th-paper);
}

.th-footer__social svg {
    width: 1.05rem;
    height: 1.05rem;
    flex: none;
}

.th-footer__label {
    font-family: var(--th-body);
    font-size: var(--th-t-label);
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--th-espresso);
    margin: 0 0 1.15rem;
}

.th-footer__label--spaced {
    margin-top: 2rem;
}

.th-footer__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .65rem;
}

.th-footer__col a {
    color: var(--th-footer-muted);
    text-decoration: none;
    transition: color .4s var(--th-ease);
}

.th-footer__col a:hover,
.th-footer__col a:focus-visible {
    color: var(--th-ink);
}

/* --- Contact ------------------------------------------------------------- */

.th-footer__address {
    font-style: normal;
    display: grid;
    gap: .85rem;
}

.th-footer__contact-row {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    line-height: 1.5;
    color: var(--th-footer-muted);
    text-decoration: none;
    transition: color .4s var(--th-ease);
}

.th-footer__contact-row:hover,
.th-footer__contact-row:focus-visible {
    color: var(--th-ink);
}

.th-footer__icon {
    width: 1.1rem;
    height: 1.1rem;
    flex: none;
    margin-top: .15rem;
    color: var(--th-espresso);
}

.th-footer__hours {
    margin: 0;
    display: grid;
    gap: .5rem;
    font-size: .9375rem;
    color: var(--th-footer-muted);
}

.th-footer__hours > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .25rem 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--th-footer-rule);
}

.th-footer__hours dt,
.th-footer__hours dd {
    margin: 0;
}

.th-footer__hours dd {
    font-variant-numeric: tabular-nums;
    color: var(--th-ink);
}

/* --- Map ----------------------------------------------------------------- */

.th-footer__map-frame {
    position: relative;
    aspect-ratio: 4 / 3;
    min-height: 13rem;
    border: 1px solid var(--th-footer-rule);
    background: var(--th-paper);
    overflow: hidden;
}

.th-footer__map-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    /* Desaturated so the map sits inside the palette rather than shouting
       Google blue at the bottom of every page; full colour on interaction. */
    filter: grayscale(1) contrast(1.04);
    transition: filter .6s var(--th-ease);
}

.th-footer__map-frame:hover iframe,
.th-footer__map-frame:focus-within iframe {
    filter: none;
}

.th-footer__map-link {
    display: inline-flex;
    align-items: center;
    gap: .6em;
    margin-top: 1.1rem;
    font-size: var(--th-t-label);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--th-espresso);
    text-decoration: none;
}

.th-footer__map-link .th-cta__arrow {
    width: 1rem;
    height: 1rem;
}

.th-footer__map-link:hover .th-cta__arrow,
.th-footer__map-link:focus-visible .th-cta__arrow {
    transform: translateX(.28em);
}

/* --- Wordmark + bottom bar ----------------------------------------------- */

.th-footer__mark {
    display: block;
    width: 100%;
    padding-bottom: clamp(1rem, 2vw, 2rem);
}

.th-footer__mark svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.th-footer__mark text {
    font-family: var(--th-display);
    font-weight: 900;
    letter-spacing: -.045em;
    fill: none;
    stroke: var(--th-ink-faint);
    stroke-width: .6;
}

.th-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--th-footer-rule);
    padding-block: clamp(1.25rem, 2.4vw, 1.75rem);
    font-size: var(--th-t-label);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--th-footer-muted);
}

.th-footer__bottom p {
    margin: 0;
}

/* Copyright and the build credit travel together on the left. Set in sentence
   case and a touch smaller than the uppercase links beside it, so the legal
   line reads as fine print rather than a second nav row. */
.th-footer__bottom-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1.25rem;
    font-size: clamp(.625rem, .6vw, .6875rem);
    letter-spacing: .015em;
    text-transform: none;
    line-height: 1.55;
}

.th-footer__credit a {
    color: var(--th-ink);
}

.th-footer__credit a:hover,
.th-footer__credit a:focus-visible {
    text-decoration: underline;
    text-underline-offset: .25em;
}

.th-footer__bottom-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.75rem;
}

.th-footer__bottom a {
    color: inherit;
    text-decoration: none;
    transition: color .4s var(--th-ease);
}

.th-footer__bottom a:hover,
.th-footer__bottom a:focus-visible {
    color: var(--th-ink);
}

.th-footer__lang {
    margin: 0;
    color: var(--th-ink);
}

@media (max-width: 1200px) {
    .th-footer__brand,
    .th-footer__col--nav {
        grid-column: span 4;
    }
    .th-footer__col--contact,
    .th-footer__map {
        grid-column: span 6;
    }
    .th-footer__map-frame {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 760px) {
    .th-footer__brand,
    .th-footer__col--contact,
    .th-footer__map {
        grid-column: 1 / -1;
    }
    .th-footer__col--nav {
        grid-column: span 6;
    }
    .th-footer__map-frame {
        aspect-ratio: 4 / 3;
    }
    .th-footer__bottom {
        justify-content: flex-start;
    }
}

@media (max-width: 520px) {
    .th-footer__col--nav {
        grid-column: 1 / -1;
    }
}

/* --------------------------------------------------------------------------
   Global sticky CTA — a compact, expandable panel in the bottom right.

   The header no longer follows you down the page, so this takes over once the
   hero is behind you: the wordmark and the actions a visitor actually takes,
   docked to the corner rather than spanning the screen. It steps aside over the
   site footer, which already carries the same links, and collapses to its
   handle when the visitor would rather read.
   -------------------------------------------------------------------------- */

.th-cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    justify-content: flex-end;
    padding: 0 clamp(1rem, 2.2vw, 2.25rem) clamp(1rem, 2.2vw, 1.75rem);
    padding-bottom: calc(clamp(1rem, 2.2vw, 1.75rem) + env(safe-area-inset-bottom, 0px));
    font-family: var(--th-body);
    pointer-events: none;
    transform: translateY(140%);
    opacity: 0;
    visibility: hidden;
    transition:
        transform .7s var(--th-ease),
        opacity .45s var(--th-ease),
        visibility 0s linear .7s;
}

.th-cta-bar.is-visible {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition:
        transform .7s var(--th-ease),
        opacity .45s var(--th-ease),
        visibility 0s;
}

/* The fullscreen menu owns the viewport while it is open. */
body.th-menu-open .th-cta-bar {
    transform: translateY(140%);
    opacity: 0;
}

.th-cta-bar__shell {
    pointer-events: auto;
    width: auto;
    max-width: min(94vw, 40rem);
    background: rgba(243, 239, 233, .95);
    backdrop-filter: saturate(140%) blur(14px);
    border: 1px solid var(--th-rule);
    border-radius: 1.25rem;
    box-shadow: 0 24px 50px -26px rgba(23, 16, 10, .55);
    overflow: hidden;
}

/* Handle — wordmark, address and the collapse toggle. Stays put when the body
   folds away, so the panel can always be opened again. */
.th-cta-bar__handle {
    display: flex;
    align-items: center;
    gap: clamp(.7rem, 1.6vw, 1.1rem);
    padding: .6rem .7rem .6rem 1.1rem;
}

.th-cta-bar__brand {
    display: block;
    flex: none;
    line-height: 0;
}

.th-cta-bar__mark {
    display: block;
    width: auto;
    height: 13px;
}

.th-cta-bar__meta {
    margin: 0;
    min-width: 0;
    font-size: .625rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--th-ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.th-cta-bar__toggle {
    display: grid;
    place-items: center;
    flex: none;
    margin-left: auto;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    appearance: none;
    background: none;
    border: 1px solid var(--th-rule);
    border-radius: 999px;
    color: var(--th-ink);
    cursor: pointer;
    transition: border-color .4s var(--th-ease), background-color .4s var(--th-ease);
}

.th-cta-bar__toggle:hover,
.th-cta-bar__toggle:focus-visible {
    border-color: var(--th-espresso);
    background: var(--th-bone);
}

.th-cta-bar__chev {
    width: .65rem;
    height: .45rem;
    transition: transform .5s var(--th-ease);
}

.th-cta-bar.is-collapsed .th-cta-bar__chev {
    transform: rotate(180deg);
}

/* Collapsible body. The 0fr → 1fr grid keeps the height animatable without
   hard-coding one. */
.th-cta-bar__body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows .55s var(--th-ease), opacity .4s var(--th-ease);
}

.th-cta-bar.is-collapsed .th-cta-bar__body {
    grid-template-rows: 0fr;
    opacity: 0;
}

.th-cta-bar__body > * {
    min-height: 0;
    overflow: hidden;
}

.th-cta-bar__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .4rem;
    padding: 0 .7rem .7rem;
}

/* House pill, at bar scale. */
.th-cta-bar__action {
    display: inline-flex;
    align-items: center;
    gap: .6em;
    flex: 0 0 auto;
    padding: .7em 1.1em;
    border: 1px solid var(--th-rule);
    border-radius: 999px;
    font-size: var(--th-t-label);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--th-ink);
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color .4s var(--th-ease),
        border-color .4s var(--th-ease),
        color .4s var(--th-ease);
}

.th-cta-bar__action:hover,
.th-cta-bar__action:focus-visible {
    border-color: var(--th-espresso);
    background: var(--th-bone);
}

.th-cta-bar__action--primary {
    background: var(--th-espresso);
    border-color: var(--th-espresso);
    color: var(--th-cream);
}

.th-cta-bar__action--primary:hover,
.th-cta-bar__action--primary:focus-visible {
    background: var(--th-ink);
    border-color: var(--th-ink);
    color: var(--th-cream);
}

.th-cta-bar .th-footer__icon {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    color: currentColor;
    opacity: .9;
}

@media (max-width: 900px) {
    .th-cta-bar__meta {
        display: none;
    }
}

@media (max-width: 600px) {
    .th-cta-bar {
        padding-inline: .9rem;
    }
    .th-cta-bar__shell {
        max-width: 100%;
    }
    /* One tidy row of pills that share the width, rather than a ragged wrap. */
    .th-cta-bar__action {
        flex: 1 1 auto;
        justify-content: center;
        padding-inline: .8em;
        letter-spacing: .1em;
    }
}

/* --------------------------------------------------------------------------
   404 — the only theme template with a section of its own.
   Built on the same primitives as the homepage widgets (.th-section, .th-label,
   .th-lede, .th-cta, [data-th-reveal]), so it inherits the house type, motion
   and focus treatment for free. The header runs over it like it does over the
   hero: the surface is dark, so the cream wordmark is the correct one.
   -------------------------------------------------------------------------- */

.th-notfound {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100svh;
    /* Same warm centre the closing CTA uses, so the two dark full stops of the
       site are lit the same way. */
    background:
        radial-gradient(72% 58% at 50% 40%, rgba(83, 33, 0, .5) 0%, rgba(83, 33, 0, 0) 70%),
        var(--th-ink);
    color: var(--th-cream);
    /* The bar is absolute over this template, so the headroom is reserved here. */
    padding-block: calc(var(--th-header-h, 6rem) + clamp(2.5rem, 6vw, 5rem)) clamp(3.5rem, 8vw, 7rem);
    text-align: center;
}

/* The number as watermark rather than headline: outlined, oversized, and
   easing out a fraction as the page settles — the footer's wordmark treatment
   applied to the one piece of copy a 404 cannot avoid saying. */
.th-notfound__mark {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 0;
    width: min(124%, 1180px);
    transform: translate(-50%, -50%) scale(calc(1.04 - var(--th-p, 1) * .04));
    pointer-events: none;
    will-change: transform;
}

.th-notfound__mark svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.th-notfound__mark text {
    font-family: var(--th-display);
    font-weight: 900;
    letter-spacing: -.045em;
    fill: none;
    stroke: var(--th-cream-faint);
    stroke-width: .55;
}

.th-notfound__inner {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: clamp(1.15rem, 2.4vw, 1.9rem);
}

.th-notfound__title {
    font-size: var(--th-t-xl);
    line-height: .94;
    letter-spacing: -.045em;
    text-transform: uppercase;
    max-width: 18ch;
}

/* The second line answers the first, so it arrives a beat later out of a mask —
   the same device the closing CTA uses for its sign-off. */
.th-notfound__title em {
    display: block;
    font-family: var(--th-editorial);
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    letter-spacing: -.02em;
    color: var(--th-crema);
}

.th-notfound__title em > span {
    display: inline-block;
    transform: translateY(105%);
    transition: transform 1.05s var(--th-ease);
    transition-delay: .45s;
}

/* The title is the revealed element itself, so the reset needs the compound
   `.is-in.th-notfound__title` form — a descendant selector would never match. */
.th-js [data-th-reveal].is-in.th-notfound__title em > span,
html:not(.th-js) .th-notfound__title em > span {
    transform: none;
}

.th-notfound .th-lede {
    max-width: 48ch;
}

.th-notfound__actions {
    justify-content: center;
    margin-top: clamp(.5rem, 1.4vw, 1rem);
}

/* The way back is the page's one real action, so it is filled rather than
   outlined — scoped here, every other surface keeps its own treatment. */
.th-notfound .th-cta--filled {
    background: var(--th-cream);
    border-color: var(--th-cream);
    color: var(--th-ink);
}

.th-notfound .th-cta--filled::before {
    background: var(--th-crema);
}

.th-notfound .th-cta--filled:hover,
.th-notfound .th-cta--filled:focus-visible {
    color: var(--th-ink);
    border-color: var(--th-crema);
}

/* Routes — the megamenu's index, set on the dark surface. Left-aligned inside a
   centred column: a list of destinations reads as a list, not as a caption. */
.th-notfound__routes {
    width: 100%;
    max-width: 44rem;
    margin-top: clamp(.75rem, 2vw, 1.5rem);
    text-align: left;
}

.th-notfound__routes ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    border-top: 1px solid var(--th-rule-light);
}

.th-notfound__routes a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding: clamp(.7rem, 1.2vw, 1rem) 0;
    border-bottom: 1px solid var(--th-rule-light);
    color: var(--th-cream);
    transition: padding-left .45s var(--th-ease), color .35s var(--th-ease);
}

.th-notfound__routes a:hover,
.th-notfound__routes a:focus-visible {
    padding-left: .75rem;
    color: var(--th-crema);
}

.th-notfound__route-label {
    font-family: var(--th-display);
    font-size: clamp(1rem, 1.4vw, 1.3125rem);
    font-weight: 700;
    letter-spacing: -.02em;
}

.th-notfound__route-meta {
    font-size: var(--th-t-label);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--th-cream-soft);
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 560px) {
    /* Two competing lines in a 300px row is one too many. */
    .th-notfound__route-meta {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .th-notfound__mark {
        transform: translate(-50%, -50%) !important;
    }
    .th-notfound__title em > span {
        transform: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .th-header,
    .th-header *,
    .th-menu,
    .th-menu * ,
    .th-cta-bar,
    .th-cta-bar *,
    .th-footer * {
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
    }
    .th-menu__list a {
        transform: none !important;
    }
}