:root {
    --Primary: #0A0A0A;
    --Secondary: #1B263B;
    --font-main: "Plus Jakarta Sans", sans-serif;
    --font-main2: "Space Grotesk", sans-serif;
    --font-main3: 'Rift', sans-serif;
}

body {
    color: var(--Text-secondary);
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    color: var(--Text-primary);
    font-family: var(--font-main2);
    font-weight: 400;
}

/* The heading rule above colours .h1–.h6 near-black, and those class selectors
   are (0,1,0) — exactly the same specificity as the theme's text colour
   utilities in styles.css. Because this file loads last, the heading colour was
   silently beating every one of them.

   That broke any element carrying both a heading class and a colour utility:
   the hero eyebrows (h6 + text_white) rendered black on the hero photo, and the
   footer brand line (h4 + text_white) was black on the black footer, i.e.
   invisible. 198 elements across the site combine the two.

   Restating the utilities here fixes all of them at once. No !important needed —
   equal specificity, and these now come later. Bootstrap's own .text-white is
   unaffected either way; it ships with !important.

   If you add a colour utility to the theme, add it here too. */
.text_white {
    color: var(--White);
}

/* Note the theme's naming is counterintuitive: .text_primary maps to
   --Text-primary, while .text_primary-color maps to --Primary. Copied from
   styles.css rather than inferred — do not "tidy" these. */
.text_primary {
    color: var(--Text-primary);
}

.text_secondary {
    color: var(--Text-secondary);
}

.text_primary-color {
    color: var(--Primary);
}

.text_secondary-color {
    color: var(--Secondary);
}

.text_muted {
    color: var(--Text-muted);
}

.text_on-suface-1 {
    color: var(--On-Suface-1);
}

.text_on-suface-2 {
    color: var(--On-Suface-2);
}

.text_placehover {
    color: var(--Placehover);
}

.font-main {
    font-family: var(--font-main);
}

.font-3 {
    font-family: var(--font-main3);
}

.main-menu .navigation>li:hover>a {
    color: var(--Primary);
}

.navigation .submenu li:hover>a {
    color: var(--Primary);
}


/* Active nav item. The theme paints it --Primary (#0A0A0A) / --Secondary
   (#1B263B), both invisible against our dark header — the item vanished and only
   its underline showed.

   Specificity matters here. styles.css has
       .main-menu.style-2 .current-menu > a { color: var(--Primary) !important }
   at (0,3,1). A plainer `.main-menu .current-menu > a` at (0,2,1) loses to it even
   with !important and even though this file loads later, because specificity is
   compared before source order. So the selectors below deliberately mirror the
   theme's, winning on source order at equal specificity.

   The underline is separate — .current-menu > a::before, further down. */
.main-menu.style-1 .current-menu > a,
.main-menu.style-2 .current-menu > a,
.main-menu.style-1 .current-menu-item > a,
.main-menu.style-2 .current-menu-item > a,
.main-menu .current-menu > a,
.main-menu .current-menu-item > a {
    color: var(--White) !important;
}

.navigation li>a {
    color: var(--White);
}

.navigation li.has-child::after {
    color: var(--White);
}

.main-menu.style-1 .navigation>li>a::before {
    background-color: var(--White);
}

.main-menu.style-1 .current-menu>a {
    color: var(--White) !important;
}

.main-menu .current-menu::after {
    color: var(--White) !important;
}

.main-menu .navigation>li:hover>a {
    color: var(--White) !important;
}

/* Active/hover underline. The theme leaves it at bottom:0, which lands it 8px
   below the baseline — far enough that it reads as a detached rule and makes the
   active item look like it sits lower than its neighbours. Raised to sit 4px off
   the baseline so it binds to the word.
   Same specificity as the theme's rule, so this wins on source order. */
.main-menu.style-2 .navigation>li>a::before {
    background-color: var(--White);
    bottom: 4px;
}

.main-menu .navigation > li:hover::after {
    color: var(--White);
}

#menu-mobile-menu li.active > a {
    color: var(--White);
    opacity: 1;
}

#menu-mobile-menu li > a {
    color: var(--White);
    opacity: 0.7;
}

/* Plain .tf-btn on touch devices. The theme's base rule (styles.css) paints
   .tf-btn as background --Primary (#0A0A0A) / color --Secondary (#1B263B) —
   near-black on near-black, contrast 1.31:1. Desktop gets away with it because
   .btn-hover-animate-2:hover wipes in a --Secondary panel and flips the text
   white; a tap-only device never hovers, so the label stayed invisible
   (§43 found 13 such buttons across 7 pages).

   Fixed only where the hover effect can't fire, using the site's standard
   mobile query (same condition as tano-scroll-world.js's MOBILE_QUERY), so the
   desktop hover reveal is untouched.

   Specificity: this is (0,1,0) like the theme's base rule and wins on source
   order. Every appearance modifier (.btn-bg-dark, .style-border, …) is (0,2,0)
   and still wins where it sets its own colour, and the :hover rules (0,2,0)
   still win on a tap. The one modifier that sets a background but no colour is
   .btn-bg-white — restated below so it keeps its dark-text-on-white-pill look
   instead of going white-on-white. */
@media (max-width: 860px), (hover: none) and (pointer: coarse) {
    .tf-btn {
        color: var(--White);
    }

    .tf-btn.btn-bg-white {
        color: var(--Secondary);
    }

    /* The two round "Talk To An Expert" buttons (services, service-detail)
       carry their label in a span.h4, and the .h4 colour rule above pins it to
       --Text-primary (#0A0A0A) regardless of the button's own colour — so the
       button-level fix never reaches the text. (0,3,0) beats .h4's (0,1,0). */
    .btn-item.btn-hover .h4 {
        color: var(--White);
    }
}

/* Header variant for pages with no dark hero behind it.

   .header.style-19 is built to overlay the homepage hero: it has no background
   and pulls the next section up under itself with margin-bottom: -120px. On an
   inner page the content starts immediately and is light, so the white nav text
   landed on a white background and vanished until you scrolled (at which point
   .header-fixed.style-19 supplies its own dark background).

   This gives those pages a solid bar and puts the header back in normal flow.
   Applied by scripts/build.js to every page except index.html. */
.header.style-19.header-solid {
    background-color: var(--Text-primary);
    margin-bottom: 0;
}

/* Logo colour. logo-tano.png (30 Jul 2026) is black artwork on a transparent
   background — every slot it goes in (.logo_header in the header, .main-logo in
   the footer and mobile nav) is a dark surface: the header is transparent-over-
   hero or #0a0a0a solid (§14.4b), the footer is #0a0a0a, the mobile nav is
   .style-dark. Left as-is it is the same near-invisible-on-dark problem as
   §16.2, just via image colour instead of CSS colour.

   filter: invert(1) flips black -> white and leaves transparent pixels alone,
   so it is a correct fix, not just a visual trick — but it is a STAND-IN.
   §0 already asks for "an SVG plus a light/white version for the dark header
   and footer"; once that file exists, point these three <img> tags at it
   directly and delete this rule. A designer-authored white export will also
   avoid the faint edge fringing filter: invert can leave on anti-aliased PNG
   edges, which is not otherwise visible at these logo sizes but is worth
   knowing about. */
.logo_header,
.main-logo {
    filter: invert(1);
}

/* Section eyebrows ("About Tano Homes", "Our process", "Portfolio", …).
   The theme sets .text-label to 12px, which reads as fine print next to the
   display-size headline underneath it. Bumped so it registers as a label.
   Affects all five section eyebrows on index, keeping them consistent. */
.tag-line.text-label {
    font-size: 16px;
    line-height: 24px;
}

/* Footer height. The theme's tf-spacing-1 puts 100px top and bottom on the
   footer — 200px of padding before any content, which made the footer read as
   long as a content section. Halved.

   Compound selector on purpose: .footer-style-18 alone ties with .tf-spacing-1
   at (0,1,0), and per §14.1 source order is not something to rely on. This wins
   at (0,2,0) without !important.

   The theme drops every tf-spacing-* to 80/80 below 991px, so the mobile value
   is restated to keep the same proportion there. */
.footer-style-18.tf-spacing-1 {
    padding-top: 48px;
    padding-bottom: 40px;
}

@media (max-width: 991px) {
    .footer-style-18.tf-spacing-1 {
        padding-top: 40px;
        padding-bottom: 32px;
    }
}

/* The !important override that used to sit here for the footer brand line is
   gone. Its real cause was the heading-colour rule at the top of this file
   beating .text_white on source order — fixed there, generally, so the footer
   needs nothing of its own. */


/* ---------------------------------------------------------------------------
   Reduced motion

   The theme animates heavily (WOW, GSAP/ScrollTrigger, SplitText, Swiper) and
   none of it checks the visitor's motion preference. Several classes also start
   at opacity:0 or behind a clip-path and are only revealed once JS runs, so it
   is not enough to switch animation off — anything hidden has to be forced
   visible, or the page renders blank for these users.

   GSAP writes inline styles, hence !important throughout.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        animation-delay: 0s !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }

    /* Hidden until JS reveals them — show immediately instead. */
    .tf-animateCLP-left,
    .tf-animateCLP-right,
    .tf-animateCLP-up,
    .tf-animateCLP-down,
    .effect-item,
    .split-text,
    .split-text *,
    .reveal-type,
    .reveal-type *,
    .scroll-effect .text-change-color,
    .wow {
        clip-path: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        animation-name: none !important;
    }

    /* Ken Burns / hover zoom on imagery. */
    .img-zoom,
    .effect-img-zoom img {
        transform: none !important;
    }

    /* .progress-wrap is deliberately left alone: it is meant to stay hidden
       until the visitor scrolls, and revealing it here would just add clutter. */
}


/* ---------------------------------------------------------------------------
   Homepage scroll-world hero

   A local, three-leg Architecture A walkthrough. The stage is fixed only while
   #tano-scroll-world owns the viewport; after its final scroll band it becomes
   absolute at the bottom of the hero, so it cannot cover the About section.
   --------------------------------------------------------------------------- */
.tano-scroll-world {
    --tano-sw-black: #070705;
    --tano-sw-ink: #f6f1e7;
    --tano-sw-gold: #c7a15a;
    --tano-sw-gold-bright: #e2c17c;
    position: relative;
    height: 100vh;
    min-height: 720px;
    overflow: hidden;
    isolation: isolate;
    background: var(--tano-sw-black);
    color: var(--tano-sw-ink);
}

.tano-sw-static,
.tano-sw-stage {
    position: absolute;
    inset: 0 0 auto;
    width: 100%;
    height: 100vh;
    min-height: 720px;
    overflow: hidden;
    background: var(--tano-sw-black);
}

.tano-scroll-world.is-fixed .tano-sw-stage {
    position: fixed;
    inset: 0;
}

.tano-scroll-world.is-past .tano-sw-stage {
    top: auto;
    bottom: 0;
}

.tano-sw-static img,
.tano-sw-scene__still,
.tano-sw-scene__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 48%;
}

.tano-sw-static__shade,
.tano-sw-shade {
    position: absolute;
    z-index: 30;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(5, 5, 3, 0.86) 0%, rgba(5, 5, 3, 0.56) 32%, rgba(5, 5, 3, 0.08) 66%, rgba(5, 5, 3, 0.2) 100%),
        linear-gradient(0deg, rgba(5, 5, 3, 0.54) 0%, transparent 34%, rgba(5, 5, 3, 0.2) 100%);
}

.tano-sw-static__copy,
.tano-sw-copy {
    position: absolute;
    z-index: 40;
    left: clamp(24px, 6vw, 116px);
    bottom: clamp(74px, 13vh, 142px);
    width: min(640px, 50vw);
}

.tano-sw-static__copy span,
.tano-sw-copy__eyebrow {
    display: block;
    margin-bottom: 23px;
    color: var(--tano-sw-gold-bright);
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.tano-sw-static__copy h1,
.tano-sw-copy__title {
    margin: 0;
    color: var(--tano-sw-ink);
    font-family: var(--font-main2);
    font-size: clamp(54px, 6.3vw, 108px);
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: -0.045em;
    text-wrap: balance;
}

.tano-sw-static__copy p,
.tano-sw-copy__body {
    max-width: 43ch;
    margin: 28px 0 0;
    color: rgba(246, 241, 231, 0.78);
    font-family: var(--font-main);
    font-size: clamp(15px, 1.1vw, 18px);
    line-height: 1.65;
}

.tano-sw-scenes,
.tano-sw-copy-layer {
    position: absolute;
    inset: 0;
}

.tano-sw-scene {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    overflow: hidden;
    will-change: opacity;
}

.tano-sw-scene:first-child {
    opacity: 1;
}

.tano-sw-scene__still {
    transition: opacity 180ms ease;
    will-change: transform, opacity;
}

.tano-sw-scene__video {
    z-index: 2;
    opacity: 0;
}

.tano-sw-scene.has-video .tano-sw-scene__video {
    opacity: 1;
}

.tano-sw-scene.has-video .tano-sw-scene__still {
    opacity: 0;
}

.tano-sw-copy-layer {
    z-index: 40;
    pointer-events: none;
}

.tano-sw-copy {
    opacity: 0;
    pointer-events: none;
    will-change: opacity, transform;
}

.tano-sw-copy:first-child {
    opacity: 1;
}

.tano-sw-copy__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
    pointer-events: auto;
}

.tano-sw-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 13px 25px;
    border: 1px solid var(--tano-sw-gold);
    color: var(--tano-sw-ink);
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 220ms ease, background-color 220ms ease, transform 220ms ease;
}

.tano-sw-button--primary {
    background: var(--tano-sw-gold);
    color: var(--tano-sw-black);
}

.tano-sw-button--secondary {
    background: rgba(7, 7, 5, 0.22);
    backdrop-filter: blur(8px);
}

.tano-sw-button:hover {
    transform: translateY(-2px);
    background: var(--tano-sw-gold-bright);
    color: var(--tano-sw-black);
}

.tano-sw-button:focus-visible {
    outline: 3px solid var(--tano-sw-gold-bright);
    outline-offset: 4px;
}

.tano-sw-progress {
    position: absolute;
    z-index: 50;
    right: clamp(24px, 4vw, 72px);
    bottom: clamp(36px, 5vh, 58px);
    width: clamp(140px, 15vw, 250px);
    height: 1px;
    background: rgba(246, 241, 231, 0.2);
}

.tano-sw-progress__line {
    display: block;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background: var(--tano-sw-gold);
}

.tano-sw-progress__text {
    position: absolute;
    right: 0;
    bottom: 13px;
    color: rgba(246, 241, 231, 0.72);
    font-family: var(--font-main);
    font-size: 11px;
    letter-spacing: 0.18em;
}

.tano-sw-hint {
    position: absolute;
    z-index: 50;
    left: 50%;
    bottom: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transform: translateX(-50%);
    color: rgba(246, 241, 231, 0.62);
    font-family: var(--font-main);
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    pointer-events: none;
}

.tano-sw-hint i {
    display: block;
    width: 1px;
    height: 32px;
    background: linear-gradient(var(--tano-sw-gold), transparent);
}

@media (max-width: 860px), (hover: none) and (pointer: coarse) {
    /* Static-mode visitors (reduced-motion / no-JS) get exactly one viewport.
       In video mode the JS sets the root height inline (several vh of scroll
       distance), so nothing here may put !important on .tano-scroll-world's
       height, and nothing may force the stage back to position:absolute —
       the is-fixed pin is what makes the scrub work. */
    .tano-scroll-world.is-reduced-motion,
    .tano-scroll-world.is-static-mobile {
        height: 100svh !important;
        min-height: 640px;
    }

    .tano-sw-static,
    .tano-sw-stage {
        height: 100svh;
        min-height: 640px;
    }

    .tano-sw-static img,
    .tano-sw-scene__still {
        object-position: 60% center;
    }

    /* (The old "display: none !important" block on the video chain was deleted,
       not scoped: in static mode those elements are never built, so the rules
       matched nothing; in video mode they would hide the hero itself.) */

    .tano-sw-static__shade,
    .tano-sw-shade {
        background:
            linear-gradient(0deg, rgba(5, 5, 3, 0.88) 0%, rgba(5, 5, 3, 0.48) 42%, rgba(5, 5, 3, 0.08) 75%),
            linear-gradient(90deg, rgba(5, 5, 3, 0.3), transparent);
    }

    .tano-sw-static__copy,
    .tano-sw-copy {
        left: 22px;
        right: 22px;
        bottom: calc(54px + env(safe-area-inset-bottom));
        width: auto;
    }

    .tano-sw-static__copy span,
    .tano-sw-copy__eyebrow {
        margin-bottom: 17px;
        font-size: 10px;
    }

    .tano-sw-static__copy h1,
    .tano-sw-copy__title {
        font-size: clamp(44px, 13vw, 68px);
        line-height: 0.94;
    }

    .tano-sw-static__copy p,
    .tano-sw-copy__body {
        max-width: 31ch;
        margin-top: 20px;
        font-size: 15px;
        line-height: 1.55;
    }
}

/* style-19 overlaps the hero with a desktop-sized -120px margin. Its compact
   homepage header is shorter at tablet/phone widths, so match the overlap to
   the real header height and keep the static poster exactly one viewport tall. */
@media (max-width: 767px) {
    .tano-home-scroll #smooth-content > .header.style-19 {
        margin-bottom: -85px;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .tano-home-scroll #smooth-content > .header.style-19 {
        margin-bottom: -94px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tano-scroll-world {
        height: 100vh !important;
        min-height: 720px;
    }

    .tano-sw-scene__video,
    .tano-sw-progress,
    .tano-sw-hint {
        display: none !important;
    }
}

/* Projects stack dwell — the theme pins each .element with pinSpacing:false, so the
   next card used to slide over at raw scroll speed with almost no gap. A bottom
   margin between stacked cards adds real scroll distance, so the card on screen
   holds for a beat before the next one covers it. The stackElement pin math in
   gsapAnimate.js was made margin-aware to match — keep the two in sync.
   Desktop-only: the pin effect itself is (min-width: 767px), and on phones the
   cards render as a plain list where a 45vh gap would just be a hole. */
@media (min-width: 767px) {
    .section-portfolio .stack-element .element:not(:last-child) {
        margin-bottom: 45vh;
    }
}

/* "Modern Homes. Built To Last." band tightened (6 Aug): the theme gives the heading
   546px of padding-top against 54px padding-bottom, which made the blue banner
   mostly empty space. Padding-top now matches the 54px below the heading row, so
   the band wraps its content evenly. The 900px .bg-banner parallax layer is
   untouched — it's absolute inset:0 slack for the data-speed="0.8" scroll effect
   and still has plenty of travel at the shorter band height. */
.section-banner-13 .heading {
    padding-top: 54px;
}

@media (max-width: 991px) {
    .section-banner-13 .heading {
        padding-top: 54px;
    }
}

/* White gap between the dark CTA band and the footer (6 Aug): .section-cta-5 is a
   near-black box inside a white .tf-container, and it used to sit flush against
   the dark footer, so the two read as one broken block (seen on services.html).
   A bottom margin lets the page background show between them. Applies to all
   four pages using section-cta-5: services, service-detail, projects,
   portfolio-detail. */
.section-cta-5 {
    margin-bottom: 60px;
}

/* Contact form result popup (7 Aug). Fixed overlay + centred dark card, shown by
   the Formcarry handler at the bottom of contact.html. `hidden` attribute keeps
   it out of the a11y tree until needed; the [hidden] display rule below is
   needed because display:flex here would otherwise beat the UA's hidden style. */
.tano-form-popup {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.tano-form-popup[hidden] {
    display: none;
}

.tano-form-popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.6);
}

.tano-form-popup__card {
    position: relative;
    max-width: 480px;
    width: 100%;
    background: var(--Primary);
    padding: 40px 36px;
    text-align: center;
    animation: tano-popup-in 0.25s ease-out;
}

@keyframes tano-popup-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Contact page showcase (7 Aug): two columns — left holds two stacked photos,
   right one portrait. Scoped to .contact-showcase — the same theme section
   survives unmodified on the hidden our-team page.

   Two lessons baked into these selectors:
   1. Every rule needs the .team-purpose-showcase prefix. The theme's own
      selectors (.team-purpose-showcase .wrap-showcase etc.) are two classes
      deep, so a bare .contact-showcase loses the tie — most visibly
      align-items, where the theme's `center` let oversized columns bleed
      symmetrically over the sections above and below.
   2. minmax(0, 1fr) tracks + min-height:0 chain: the theme's .col-image grids
      size rows to content, so a plain 1fr/height:100% chain is circular and
      falls back to intrinsic image size. */
.team-purpose-showcase .contact-showcase {
    align-items: stretch;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.team-purpose-showcase .contact-showcase .col-image {
    flex: 3 1 0;
    min-width: 0;
    min-height: 0;
}

.team-purpose-showcase .contact-showcase .col-image-1 {
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    justify-items: stretch;
    margin-top: 0;
}

.team-purpose-showcase .contact-showcase .col-image-2 {
    flex: 2 1 0;
    grid-template-rows: minmax(0, 1fr);
}

.team-purpose-showcase .contact-showcase .hover-image,
.team-purpose-showcase .contact-showcase .img-style {
    height: 100%;
    min-height: 0;
}

.team-purpose-showcase .contact-showcase .img-style img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fixed shared row height on desktop so the two left photos + gap exactly
   match the right portrait. On mobile the columns stack and each photo keeps
   its own aspect instead. */
@media (min-width: 768px) {
    .team-purpose-showcase .contact-showcase {
        height: 480px;
    }
}

@media (max-width: 767px) {
    .team-purpose-showcase .contact-showcase {
        flex-direction: column;
    }

    .team-purpose-showcase .contact-showcase .col-image-1 {
        grid-template-rows: none;
    }

    .team-purpose-showcase .contact-showcase .hover-image,
    .team-purpose-showcase .contact-showcase .img-style {
        height: auto;
    }

    .team-purpose-showcase .contact-showcase .img-style img {
        height: auto;
        aspect-ratio: 4 / 3;
    }
}

/* contact.html: close the gap between the photo showcase and "Thinking About
   Building? Let's Talk." (7 Aug). The theme's .tf-spacing-15 gives that section
   98px of top padding (80px on mobile); the gap above the showcase — title to
   photos — is the heading's mb_44 = 44px. Matched, so the showcase reads as
   centred between the two text blocks. (0,2,0) beats the theme's spacing
   classes and their mobile restatement on source order. */
.section-contact.tf-spacing-15 {
    padding-top: 44px;
}