/*
 * Gap-fills for the ported Tilda Zero-block CSS at off-breakpoint widths.
 *
 * Between Tilda's design breakpoints (375 / 768 / 1024 / 1440) some background
 * elements get a %-based height (e.g. height: 806%) that balloons to thousands
 * of px and, because the artboard is overflow: visible, bleeds down over the
 * whole page. Cap the offending element to the artboard so it fits. (The live
 * Tilda site has the same bug.)
 *
 * NB: we cap the element rather than clipping the artboard with overflow:hidden,
 * because clipping the artboard cuts the hero's rounded bottom corners and can
 * hide content where a block is intentionally taller than its artboard (the hero
 * is height:100vh on mobile).
 */

/* Home hero (#rec2163182733): a full-bleed background image is height: 806%
   (~6496px) at <= 1023px and covers everything below the hero, while its square
   corners show through the hero's rounded bottom. Its sibling video background
   already fits, so just cap the image to the artboard height. */
@media screen and (max-width: 1023px) {
    #rec2163182733 .tn-elem[data-elem-id="1776261652480"] {
        height: 100% !important;
    }
}

/* Home "Why startups overpay" block (#rec2208432513) is an SBS scroll animation:
   its cards are pinned and revealed one-by-one as you scroll the height of the
   artboard. The authored res-768 artboard height is only 1300px — anomalously
   short (375:1720, 1024:1930, 1440:2000) — so the SBS pin is far too short at
   tablet widths and the next block ("5 steps", #rec2180194553) rides up and
   overlaps the cards. Restore it to res-1024's 1930px so the pin has room.
   (The remaining end-gap between the last two cards is a separate fix: this block
   has no res-768 SBS timing variants, so the last card fell back to base timing
   and didn't open a gap — fixed by adding a res-768 data-animate-sbs-opts to that
   card in the blade, mirroring res-1024's travel distance.) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    #rec2208432513 .t396__artboard,
    #rec2208432513 .t396__filter,
    #rec2208432513 .t396__carrier {
        height: 1930px !important;
    }
}

/* block-26 (rec2192524033) + block-13 (rec2208432513): tilda-animation-sbs
   promotes their full-area "pin" element to position:fixed on a scroll keyframe
   and never restores it, stranding a transparent full-viewport sheet over
   everything below it (case studies, testimonials, footer) that swallows clicks
   AND text selection. Neutralize ONLY those two pin elements — keep them in flow
   and non-blocking. The per-atom fade animations (other elem-ids) are untouched.
   (tilda-animation-sbs is slated for removal in the de-Tilda P6 work.) */
#rec2192524033 .tn-elem[data-elem-id="1776939040593000001"],
#rec2208432513 .tn-elem[data-elem-id="1776155958060"] {
    position: absolute !important;
    pointer-events: none !important;
}

/* Header contact-row alignment. Every ported header variant (home/uk header-04 &
   header-05, about/uk-about block-04 & block-05) reuses the same Tilda element ids.
   Tilda positioned the contact group — the WhatsApp + email/phone text and their
   two icons — at top:40px, 1px below the nav links (Testimonials / Case studies /
   About Us) at top:39px, so the contact row read as slightly dropped. Lift the
   contact text 1px onto the nav baseline, and the two icons a further 1px so they
   sit centered against the text (kept level with each other) rather than reading
   slightly low. These ids belong only to the header contact group (never the footer
   or body blocks), so no rec scoping needed. */
.tn-elem[data-elem-id="1776337877514000003"], /* email / phone text */
.tn-elem[data-elem-id="1775811080195000023"] { /* WhatsApp text      */
    margin-top: -1px;
}
.tn-elem[data-elem-id="1776338066205"],  /* mail icon / GB flag */
.tn-elem[data-elem-id="1776338056772"] { /* WhatsApp icon       */
    margin-top: -2px;
}

/* The GB flag's box is shorter than the mail icon it replaces on the UK headers,
   so at the same -2px it lands ~3px high (its centre above the WhatsApp icon's).
   Drop just the flag back down so it sits level with the WhatsApp icon. Scoped to
   the flag, so the mail icon on non-UK pages is unaffected. */
.tn-elem[data-elem-id="1776338066205"] .iti__flag {
    position: relative;
    top: 2px;
    transform: scale(1.1); /* ~+2px on the 20px flag; scales the sprite uniformly */
    transform-origin: center;
}

/* UK header only: drop the phone number 1px and pull it 3px closer to the flag, so
   the flag->number gap (11px) matches the WhatsApp icon->text gap (8px) — the GB flag
   is narrower than the mail icon it replaces, which opened the gap. Scoped to the tel
   link, so the email on non-UK pages (a mailto link in the same element) is unaffected. */
.tn-elem[data-elem-id="1776337877514000003"] a[href^="tel:"] {
    position: relative;
    top: 1px;
    left: -3px;
}

/* Footer: the mail icon + email render ~0.5px below the LinkedIn/Medium icons
   (t396 seats the 21px mail icon a hair low in its grid cell); lift them level.
   footer-01 (home/uk) ids + block-23 (about/uk-about) ids. */
.tn-elem[data-elem-id="1776959532286000003"],
.tn-elem[data-elem-id="1777376553486000012"] {
    transform: translateY(-1.5px);
}

/* Mail icon also scaled up ~1px (from its centre, so it stays level + centred, and
   the SVG stays crisp) to better match the 23px LinkedIn/Medium icons. */
.tn-elem[data-elem-id="1776959532286000004"],
.tn-elem[data-elem-id="1777376553486000013"] {
    transform: translateY(-1.5px) scale(1.05);
}

/* UK decorative flag (header / floating menu / mobile drawer) — desaturate it so it
   sits with the monochrome icon set. Scoped to the t396/t450 chrome, so the
   intl-tel-input phone-widget flags in the modals stay in full colour. */
.t396 .iti__flag.iti__gb,
.t450 .iti__flag.iti__gb {
    filter: grayscale(0.85);
}

/* UK mobile drawer: drop the phone number label 1px so it sits level with the flag
   in its pill. Scoped to the drawer (t450) tel pill's text. */
.t450 a[href^="tel:"] .t-btnflex__text {
    position: relative;
    top: 1px;
}