:root {
    --default-border-radius: 10px;
    --input-border-radius: 5px;
}

/* LAYOUT */
html, body {
    height: 100%;
    margin: 0;
}

.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

/*FOOTER*/

/* Set off from the page by space alone — no top rule, and no filled band
   either: the landing page's grain sits at z-index -1 behind the content, so
   an opaque background here would punch a visibly grain-free rectangle out of
   the bottom of the page. */
.tt-footer {
    margin-top: var(--space-xl);
    width: 100%;
}
.tt-footer .u-container {
    width: 100%;
    padding-block: var(--space-l) var(--space-s);
}

/* Two levels of folding, neither pinned to a viewport breakpoint.

   Outer: the brand block and the link columns as a whole each grow from their
   own flex-basis, so the link columns leave the brand's side all together
   rather than dropping one orphan column below the other two.

   Inner: the columns are equal grid tracks, so they hold 3-across for as long
   as they fit and then go straight to one per row — never through a lopsided
   2 + 1. The threshold is a container query on the grid rather than a media
   query because the columns' width depends on whether they are still sharing
   the row with the brand, which the viewport width alone cannot tell us.

   Nothing here is positional — a fourth link column needs only the repeat()
   count changed. */
.tt-footer-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-m) var(--space-l);
    container-type: inline-size;
    container-name: footer-grid;
}
.tt-footer-brand {
    flex: 1 1 18rem;
}
.tt-footer-columns {
    flex: 1 1 32rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-m) var(--space-l);
}
/* 3 × the columns' comfortable width plus the two gaps between them. Below
   this the row cannot hold three, so all three stack. */
@container footer-grid (max-width: 34rem) {
    .tt-footer-columns {
        grid-template-columns: 1fr;
    }
}

.tt-footer-tagline {
    max-width: 34ch;
    margin-block: var(--space-2xs) var(--space-s);
}
.tt-footer-contact li + li {
    margin-block-start: var(--space-3xs);
}
/* .tt-icon carries a symmetric inline margin for icons sitting mid-sentence;
   here the icon opens the line, so the leading margin would indent these two
   rows out of line with the tagline and logo above them. */
.tt-footer-contact .tt-icon {
    margin-inline-start: 0;
}

/* One step down from the links it labels, and set in the stencil face the
   design system uses for accents (.tt-highlight), so the columns read as
   labelled groups without a heading-sized type jump. */
.tt-footer-heading {
    font-size: var(--step--1);
    line-height: 1.2;
    margin-block-end: var(--space-2xs);
}
.tt-footer-links {
    font-size: var(--step--1);
}
.tt-footer-links li + li {
    margin-block-start: var(--space-3xs);
}

/* BOTTOM BAR — a quiet row under the footer columns, separated by a rule
   rather than by space alone so it reads as a footnote to the footer, not
   another column. Its two halves stack when there is no room for both. */
.tt-footer-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3xs) var(--space-m);
    margin-block-start: var(--space-l);
    padding-block-start: var(--space-xs);
    border-block-start: var(--border-thin) solid var(--border-muted);
}


/* LANDING PAGE */
.tt-landing-page {
    background-color: var(--bg-color);
    font-family: "PP Neue Montreal", sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    flex-grow: 1;
}

.tt-landing-page :is(input, button, select, textarea) {
    font-family: inherit;
}

.tt-landing-page section {
    width:100%;
}


/* SECTION CODE */
.tt-hero .grid-base {
    grid-template-rows: 1fr;
    padding-top: var(--space-3xl);
}
.tt-hero .tt-text-content {
    display:flex;
    flex-direction: column;
}


/* TEXT AND IMAGE SECTION */
.tt-text-and-images h2 {
    text-align: center;
}

.tt-text-and-images .tt-content-element:nth-child(even) img{
    order:2;

}
.tt-text-and-images ul:not(.dropdown-menu) {
    /*display: flex;*/
    gap: var(--space-3xl);
    flex-direction: column;
}

/* PLACEMENT */
.tt-text-end {
    margin-left: auto;
}
.tt-text-align-right {
    text-align: right;
}

.tt-text-right {
    text-align: right;
}
.tt-text-center {
    text-align: center;
}

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

.tt-vertical-center {
    display: flex;
    align-items: center;
}
.tt-vertical-center-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* UTILITY */
.tt-w-100 {
    width: 100%;
}

/* Same reading-width cap as .tt-paragraph (typography.css), for blocks of
   mixed content (headings, text, tables) that should read as prose rather
   than stretch edge to edge. Centered, since — unlike a paragraph — it isn't
   already anchored to a left-aligned column of text above it. */
.tt-w-prose {
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
}

/* SCROLL CUE — a brand-colored arrow inviting the reader further down the
   page (e.g. to contact details already shown in the footer), instead of
   repeating that content inline. Angled toward where that content actually
   sits (the footer's contact block leads the left-hand brand column — see
   .tt-footer-brand above), rather than pointing straight down.

   .tt-scroll-cue-container establishes the query container: it should wrap
   the same .grid-base[data-layout='halves'] the arrow sits beside, so the
   container query below tracks that grid's own collapse to a single column
   (2 × 20rem item min-size + gutter, see .grid-base[data-layout='halves']
   in grid.css) rather than a guessed viewport breakpoint. Once it collapses
   the arrow sits directly above the brand column, so it drops the angle and
   points straight down — and aligns to the same edge as the contact block
   below it, which is the start edge, not the end. */
.tt-scroll-cue-container {
    container-type: inline-size;
}
.tt-scroll-cue-column {
    text-align: center;
    margin-top: var(--space-l);
}
.tt-scroll-cue {
    display: inline-flex;
    color: var(--primary-color);
}
.tt-scroll-cue:hover,
.tt-scroll-cue:focus-visible {
    color: var(--primary-hover-color);
}
.tt-scroll-cue-icon {
    width: 3.5rem;
    height: 3.5rem;
    transform: rotate(25deg);
}
@container (max-width: 42rem) {
    .tt-scroll-cue-column {
        text-align: start;
        margin-top: 0;
    }
    .tt-scroll-cue-icon {
        transform: none;
    }
}

/* MINI MENU */
.tt-mini-menu {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    row-gap: var(--space-3xs);
}
.tt-mini-menu a {
    white-space: nowrap;
}

/* FLEX */
.tt-flex {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
}

.tt-flex--wrap {
    flex-wrap: wrap;
}

.tt-text-block {
    display: flex;
    align-items: baseline;
    gap: var(--space-3xs);
}

.tt-align-items-center {
    display: flex;
    align-items: center;
}

.tt-justify-content-between {
    justify-content: space-between;
}