/* Phone section spacing, from the third section of every page downward.

   What this corrects is what the eye sees, not what the stylesheet says. Each
   page was photographed at 390px and the space between sections was measured
   in pixels from the screenshot: from the last row that carries anything
   visible in one section to the first such row in the next. Visible includes
   the faint fills: a card's #0d0d0d body on the black ground reads as the
   card's edge, and the footer's dark panel reads as where the footer starts.
   A padding value says little about any of that on its own. An FAQ with 48px
   of padding showed 88px under its last question, because the list ends in
   40px of nothing.

   Measured that way the site already has a rhythm: about 96px from the
   content of one section to the content of the next (the homepage between
   its portfolio, team and banner, the case pages into Discover more, contact,
   careers). The footer's panel starts 78px under a page's last content, the
   same on every page, so the footer arrives the same way wherever it is
   reached. Sections are brought to that, one by one, each by
   whatever its own insides need, so the numbers below differ from section to
   section while the gaps they produce do not. Where a thin divider line
   separates two sections (the legal chapters, the Academy topics, the team
   profile) the line sits in the middle of the gap, and those seams already
   did, so they are left alone.

   Left alone on purpose, per page: the hero, and the section immediately
   after it. A number below never reaches either of them, which is why the
   first reachable section on a page sometimes carries a larger or smaller
   top than its neighbours: the frozen section above it leaves what it leaves.
   Three exceptions, made at HOX's request (10 Sep 2026) so the footer could
   sit the same everywhere: the blog index's featured block loses its 80vh
   height, the impressum's one chapter loses the trailing margins at its
   foot, and /free-quote's footer, which there is the second section, gets
   the same top as everyone else's.

   The footer is not restyled inside. Where a page ends too far from it or too
   close, the gap is taken up in the footer's outer top padding only.

   Why every line is !important: main.css already carries a phone rhythm that
   puts one number, --sec-y (48px), on both sides of every content section,
   with !important so the page stylesheets cannot undo it. One number on every
   section is exactly what produced the uneven gaps, since the insides differ.
   These rules override it section by section, so they have to be !important
   too; they win on specificity and on order (this file loads after main.css),
   and only for the selectors named here. The footer's top comes from
   Bootstrap's pt-5, which is !important as well.

   Desktop and tablet are untouched: everything is inside the phone query. */

@media (max-width: 767.98px) {

    /* ---------------------------------------------------------------- home
       Hero and logo rail are frozen. From the rail down the gaps were 48,
       103, 72, 92, 145 and 100. */

    /* What we offer: 48px under the logo rail, the tightest seam on the page.
       Its own bottom was 56px of which some belonged to the next section. */
    .home-page .service-offer.d-sm-none {
        padding-top: 68px !important;
        padding-bottom: 41px !important;
    }
    /* The team rail has no padding of its own: it sat 72px under the work
       grid, and its last name 88px over the FAQ. */
    .home-page #team.hox-tw {
        padding-top: 24px !important;
        padding-bottom: 8px !important;
    }
    /* The FAQ list ends in 40px of nothing under its last question, so 48px
       of padding read as 88px, and 145px before the banner. */
    .home-page #faq.faq-section {
        padding-bottom: 8px !important;
    }
    .home-page section.hox-bn {
        padding-top: 39px !important;
    }
    /* The brief ended 72px above the footer's panel. */
    .home-page footer#footer-contact-section {
        padding-top: 54px !important;
    }

    /* ------------------------------------------------------------ services
       The listing above is frozen and ends 48px under its last card, so the
       offer block's 100px of top made a 148px hole between that card and
       "What we've built". It opens on its own first row, which carries
       Bootstrap's py-5. */
    .services-page .svc-offer-block {
        padding-top: 0 !important;
    }
    .services-page .svc-offer-block > .services-offer.py-5 {
        padding-top: 40px !important;
    }

    /* ------------------------------------------ the brief inside the footer
       On /services, the blog posts, /team and /sitemap the footer opens on
       the Send the brief form and then its own brand panel, 24px apart. The
       panel gets the room; the form is not touched, since on /sitemap it is
       the page's second section. */
    footer.hox-footer > .hox-brief ~ .container {
        padding-top: 54px !important;
    }

    /* the brief's top where it follows a page's content too closely or too far */
    .blog-detail-page footer.hox-footer > .hox-brief > .os-section--brief {
        padding-top: 26px !important;
    }
    .team-page footer.hox-footer > .hox-brief > .os-section--brief {
        padding-top: 35px !important;
    }

    /* -------------------------------------------------------- service page
       Its closing card, frozen, ended 72px above the footer's panel. */
    .service-detail-page footer#footer-contact-section {
        padding-top: 54px !important;
    }

    /* ---------------------------------------------------------- case pages
       The story itself, writing and pictures in turn, is already even at
       54 to 65px and stays as it is. The page then ended 120px above the
       footer's panel after its call to action. */
    .case-page footer#footer-contact-section {
        padding-top: 6px !important;
    }

    /* --------------------------------------------------------- outsourcing
       Scoped to the page that has the statistics band; /free-quote carries
       the same body classes and must not move. The statistics band sat 142
       and 141px from what is on either side of it, the steps 104px above the
       brief and
       the brief 120px above the footer's panel. The service cards between
       them already end 100px above the steps and are left as they are. */
    .outsource-page #hox-statistics.os-proof {
        padding-top: 2px !important;
        padding-bottom: 3px !important;
    }
    .outsource-page #hox-statistics + .os-section + .os-section {
        padding-bottom: 39px !important;
    }
    .outsource-page:has(#hox-statistics) footer#footer-contact-section {
        padding-top: 6px !important;
    }
    /* /free-quote is the same brief on its own, followed by the footer: the
       same seam as the foot of /outsourcing, which was 120px. */
    .outsource-page:not(:has(#hox-statistics)) footer#footer-contact-section {
        padding-top: 6px !important;
    }

    /* ------------------------------------------------------------- academy
       Library: the topics sit 48px either side of their dividers, card edge
       to line to heading, and are left as they are. The last topic's cards
       ended 120px above the footer's panel, the category and article pages
       72px. */
    .academy-page:has(.ac-topic) footer#footer-contact-section {
        padding-top: 6px !important;
    }
    .academy-page:has(.ac-listing) footer#footer-contact-section,
    .academy-page:has(.ac-art) footer#footer-contact-section {
        padding-top: 54px !important;
    }

    /* ---------------------------------------------------------------- blog
       The index held its featured block (the page's second section) at 80vh,
       which on a phone left some 280px of black under the last post and the
       footer 304px away. HOX asked for it: the block is as tall as its posts
       on a phone. */
    .blog-page .blog-featured {
        min-height: 0 !important;
    }
    .blog-page footer#footer-contact-section {
        padding-top: 15px !important;
    }

    /* ------------------------------------------------------------- contact */
    .contact-page footer#footer-contact-section {
        padding-top: 38px !important;
    }

    /* ------------------------------------------------------------- careers
       The phone copy of the factors list. */
    .careers-page .container.d-sm-none:has(> .factor-listing) {
        padding-top: 36px !important;
    }
    .careers-page footer#footer-contact-section {
        padding-top: 6px !important;
    }

    /* -------------------------------------------------------- team profile
       Each block sits between two dividers. The first seam, frozen, has 56px
       on each side of its line; the others follow it. */
    .team-profile-page .tp-section--work {
        padding-bottom: 50px !important;
    }
    .team-profile-page .tp-contact {
        padding-top: 52px !important;
    }
    /* The contact block ended 72px above the footer's panel. */
    .team-profile-page footer#footer-contact-section {
        padding-top: 54px !important;
    }

    /* ------------------------------------------------------------ our work
       The grid, frozen, ended 84px above the footer's panel. */
    .portfolio-page footer#footer-contact-section {
        padding-top: 42px !important;
    }

    /* -------------------------------------------------------- legal pages
       The chapters sit about 45px either side of their dividers, except
       those that end on a table, a list or a fact list, which keep that
       element's bottom margin (or its last entry's) and run 62 to 78px. The
       first chapter is the page's second section and is left as it is. */
    .legal-page .legal-doc .legal-section:not(:first-of-type) .legal-copy > :last-child,
    .legal-page .legal-doc .legal-section:not(:first-of-type) .legal-copy > .legal-facts:last-child > :last-child {
        margin-bottom: 0 !important;
    }
    .legal-page:has(.legal-doc) footer#footer-contact-section {
        padding-top: 6px !important;
    }
    /* the terms end on their fact list, a line lower than the other two */
    .terms-page:has(.legal-doc) footer#footer-contact-section {
        padding-top: 8px !important;
    }
    /* The impressum is one chapter, the page's second section, and it ended
       on its fact list's margins, 82px above its own foot. HOX asked for it:
       the chapter ends on its last line, like the chapters above. */
    .legal-page--impressum .legal-doc .legal-section .legal-copy > :last-child,
    .legal-page--impressum .legal-doc .legal-section .legal-copy > .legal-facts:last-child > :last-child {
        margin-bottom: 0 !important;
    }
    .legal-page--impressum:has(.legal-doc) footer#footer-contact-section {
        padding-top: 5px !important;
    }
}