/*
 * Phone and tablet layout.
 *
 * The pages are an Adobe Muse export. Every element on them is a float with a
 * left offset and a top margin measured against a fixed canvas, and
 * scripts/fit-layout.js scales the whole page down to fit anything narrower
 * than the design. That is fine on a laptop and useless on a phone, where the
 * page ends up rendered at about a fifth of its size.
 *
 * Below 1024px the rules here call that scaling off and drop every element
 * back into ordinary document flow, so a page becomes a single column of
 * full-width blocks in reading order. Nothing that carries words is hidden:
 * only the dividing rules and the wallpaper logos, which have nowhere to sit at
 * this width. Pages that do not load this file keep the scaled layout, so the
 * two must be turned off together, here, and not in the script.
 *
 * Muse's own geometry is set on ids, which outrank everything, so the
 * overrides here have to be !important. Where an element is only identifiable
 * by its Muse id, the comment says what it is.
 */

@media (max-width: 1023px) {
  /* ------------------------------------------------------------- page --- */

  html.html,
  body {
    min-width: 0 !important;
  }

  /* fit-layout.js scales the page down to fit and publishes the reciprocal for
     anything that must not shrink with it. Neither applies to a page that is
     laid out for the screen it is on, and both have to be called off from here
     so the script can go on scaling the pages this file does not cover. */
  body {
    zoom: 1 !important;
  }

  html.html {
    --fit-unzoom: 1 !important;
  }

  /* #page_position_content is floated, so left to itself it shrinks to fit its
     widest child and the page keeps its desktop width. */
  #page,
  #page_position_content {
    display: block !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    padding-bottom: 0 !important;
    overflow-x: hidden;
  }

  /* Holds the page open to the height of the screen on desktop. */
  .verticalspacer {
    display: none !important;
  }

  /* Muse's positioning, undone. */
  #page .grpelem,
  #page .colelem,
  #page .actAsDiv,
  #page .actAsInlineDiv,
  #page .excludeFromNormalFlow,
  #page .browser_width,
  #page .browser_width > * {
    position: static !important;
    float: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* Muse's group wrappers: boxes a hundredth of a pixel wide, often pulled
     sideways, that the children escape from with a huge negative right margin.
     Stacked, they have to be ordinary full-width blocks. */
  #page [id^="pu"] {
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Muse's "align to page" wrappers hold the width of the desktop canvas and
     are shunted sideways to line up with it. */
  #page [id$="_align_to_page"] {
    width: auto !important;
    left: auto !important;
  }

  /* Muse's buttons and its tinted boxes of writing are inline boxes. What sits
     inside them is a block, which splits the inline box into fragments and
     stops its fill and border being painted around the words, so they have to
     become blocks themselves. */
  #page .transition,
  #page .rgba-background {
    display: block !important;
  }

  #page img {
    max-width: 100% !important;
    height: auto !important;
  }

  #page p {
    margin: 0;
  }

  /* Muse indents the paragraphs and text boxes inside a full-width band with
     padding measured against the desktop canvas - a hundred pixels and more,
     which at this width would leave a column of words a few letters wide.
     Blocks of live text bring their own gutter, so this comes off entirely. */
  #page .browser_width p,
  #page .browser_width div:not(.livetext) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* -------------------------------------------------------- live text --- */

  #page .livetext {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  #page .livetext p,
  #page .livetext li {
    font-size: 17px !important;
    line-height: 1.6 !important;
  }

  #page .lt-heading {
    font-size: 19px !important;
    line-height: 1.35 !important;
  }

  #page .lt-sub {
    font-size: 18px !important;
    line-height: 1.4 !important;
  }

  #page .lt-pagetitle {
    font-size: 30px !important;
    line-height: 1.2 !important;
  }

  #page .lt-sectiontitle {
    font-size: 23px !important;
    line-height: 1.3 !important;
  }

  #page .lt-closing {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  /* The two-column blocks become one column, and the rule that divided them
     becomes a gap. */
  #page .lt-cols {
    display: block !important;
    column-count: 1 !important;
  }

  /* The rule is drawn with a border and held off the words with a margin and a
     padding of the same size; all three have to go, or the second column keeps
     its gutter and sits indented under the first. */
  #page .lt-col {
    width: auto !important;
    border-left: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  #page .lt-col + .lt-col {
    margin-top: 30px !important;
  }

  /* -------------------------------------------------------------- nav --- */

  /* The menu labels are sized to the pixel for the desktop bands; at this
     width they are ordinary words that wrap. */
  #page .nav-label {
    width: auto !important;
    height: auto !important;
    line-height: 1.2 !important;
    background-image: none !important;
  }

  #page .nav-link,
  #page .nav-link > span {
    display: inline-block !important;
    vertical-align: middle !important;
  }

  /* A menu label is 18px of type, which is a poor thing to aim a thumb at. The
     anchor is the whole of the tap target, so its padding is what makes the
     item hittable: 12px top and bottom puts every menu item at 42px, clear of
     the 40px floor tests/phone-layout.spec.ts holds every link and button to.
     Trimming this is how a menu quietly stops being tappable.

     The margin is the other half of that: big enough to hit is no use if the
     next item begins where this one ends, so 4px all round leaves 8px between
     any two of them - a thumb that lands in the space between opens nothing
     rather than the wrong page. tests/phone-layout.spec.ts holds them to that
     8px as well.

     The two are set together on purpose. Sideways the margin is taken back out
     of the padding, so an item still occupies its old width and the top menu
     wraps into the same rows it did; the words keep the 20px of air between
     them they had, with the boundary now in the middle of it rather than
     halfway between two touching boxes. Downwards it is added: each item is
     2px shorter and 8px further from its neighbour, which is what keeps the
     eleven footer links from pushing the copyright line down the page. */
  #page .nav-link {
    padding: 12px 6px !important;
    margin: 4px !important;
  }

  #page .nav-label--top {
    font-size: 15px !important;
  }

  #page .nav-label--footer {
    font-size: 15px !important;
  }

  /* ==== faq-s.html, our-gaurantee.html, our-promise.html,
                                             customer-charter.html === */

  /* These four pages are the same page in Muse: one logo bar, one menu bar,
     one banner with the page title over a photograph, then a heading and the
     writing itself. Muse gave the four the same ids for everything except the
     block of writing, so they are stacked together here and only that block is
     named four times. */

  /* Logo bar and menu bar. */
  #page #u9306-5,
  #page #u9310-8 {
    text-align: center !important;
  }

  #page #u9306-5 {
    padding: 16px 0 4px !important;
  }

  #page #u9310-8 {
    padding-bottom: 12px !important;
  }

  /* The banner: navy panel behind, photograph and words in front. */
  #page #pu9305 {
    position: relative !important;
  }

  #page #u9305-bw {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0;
  }

  #page #pu9305 > *:not(#u9305-bw) {
    position: relative !important;
    z-index: 1;
  }

  /* The navy fill itself: Muse gives it a fixed height, which the reset above
     drops, so it has to be told to fill the band it backs. */
  #page #u9305 {
    height: 100% !important;
  }

  #page #u9325 {
    padding: 30px 0 32px !important;
    background-position: center !important;
  }

  #page #u9325_align_to_page {
    padding: 0 !important;
  }

  /* The translucent box of intro copy under the page title. */
  #page #u9327 {
    width: calc(100% - 44px) !important;
    margin: 20px auto 0 !important;
  }

  /* The scroll-down arrow. */
  #page #u9329 {
    display: block !important;
    width: 34px !important;
    margin: 26px auto 0 !important;
  }

  /* The writing itself: the questions on FAQs, and on the other three the
     block of headings and paragraphs. */
  #page #pu9800-72,
  #page #pu9810-72,
  #page #pu9820-72,
  #page #pu9290-72 {
    padding: 26px 0 10px !important;
  }

  #page #u9450-4 {
    padding-top: 32px !important;
  }

  /* -------------------------------------------- footer, those four --- */

  /* Muse lays the footer out as four columns of absolutely placed links, so
     the source order is not the reading order. Stacked, they are put back
     into reading order with flex order. */
  #pu9488 {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 26px 0 22px !important;
    background-color: #1e2b33;
  }

  /* Navy fill, tilted wallpaper logo, and the CCJ mark: all backdrop. */
  #page #u9488-bw,
  #page #u9489-bw,
  #page #u9490-bw {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0;
  }

  #pu9488 > *:not(#u9488-bw):not(#u9489-bw):not(#u9490-bw) {
    position: relative;
    z-index: 1;
  }

  /* The rules between the menu columns. */
  #u9507,
  #u9520,
  #u9521,
  #u9522 {
    display: none !important;
  }

  /* Ordered by the page each link points at, not by its Muse id. Muse renames
     whichever link points at the page being shown, and these four pages share
     one footer, so an id here would be right on one of them and would leave
     the other three with a link of their own jumping to the top of the list. */
  #pu9488 > a[href="index.html"] { order: 1; }
  #pu9488 > a[href="about-us.html"] { order: 2; }
  #pu9488 > a[href="contact-us.html"] { order: 3; }
  #pu9488 > a[href="how-we-work.html"] { order: 4; }
  #pu9488 > a[href="our-gaurantee.html"] { order: 5; }
  #pu9488 > a[href="our-promise.html"] { order: 6; }
  #pu9488 > a[href="our-specialists.html"] { order: 7; }
  #pu9488 > a[href="our-workforce.html"] { order: 8; }
  #pu9488 > a[href="customer-charter.html"] { order: 9; }
  #pu9488 > a[href="privacy-policy.html"] { order: 10; }
  #pu9488 > a[href="faq-s.html"] { order: 11; }

  #u9523-4 { order: 12; } /* telephone */
  #u9524-4 { order: 13; } /* info@ */
  #u9525-4 { order: 14; } /* support@ */

  #u9501-13-bw { order: 15; } /* logo and the paragraph about the business */
  #u9491-12-bw { order: 16; } /* copyright line */

  /* The contact details: "T: " and then the number, with only the number
     itself being the link. Set as words in a line of writing that link is 25px
     tall, and telephoning is the main thing a visitor on a phone came here to
     do - the smallest target on the page is the wrong one to leave small.

     So each line becomes a row of its own with the link laid out as a box
     inside it: 20px of type and 12px above and below it puts every one of them
     at 44px, clear of the 40px floor tests/phone-layout.spec.ts holds them to,
     with 4px of margin either side so the three are not one continuous strip
     and a thumb that lands between two of them opens neither. The row keeps
     only enough side padding to stand the longest address off the edge of the
     screen - the link's own 10px is what separates it from its prefix. */
  #page .livetext--footerContact {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 6px !important;
  }

  /* The box itself, and the rule under the words. On the desktop that rule is
     an overlay pinned to the bottom of the anchor, which is exactly where the
     words end while the anchor is only as tall as they are - given a box to
     fill it would sit 12px below them instead. Drawn by the anchor itself it
     follows the words, whatever the box around them is doing. */
  #page .livetext--footerContact .lt-link {
    margin: 4px 0 !important;
    padding: 12px 10px !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px !important;
    text-decoration-skip-ink: none !important;
  }

  #page .livetext--footerContact .lt-link::after {
    content: none !important;
  }

  #page #u9523-4 {
    margin-top: 14px !important;
  }

  #page #u9501-13 {
    padding: 26px 22px 0 !important;
    text-align: center !important;
  }

  /* Five empty paragraphs that hold the logo clear of the writing beside it in
     the desktop footer. Stacked, they are a hundred pixels of nothing. */
  #page #u9501-13 > p:nth-child(n + 2):nth-child(-n + 6) {
    display: none !important;
  }

  /* The white logo. */
  #page #u9502 {
    text-align: center !important;
  }

  #page #u9503 {
    width: 232px !important;
  }

  /* The paragraph about the business. */
  #page #u9506-10 {
    text-align: center !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
  }

  #page #u9491-12 {
    padding: 16px 22px 0 !important;
    text-align: center !important;
  }

  /* ---------------------------------------------- index.html --- */

  /* The opening block. On a desktop the photograph sits behind the logo, the
     menu, the opening words and the scroll-down arrow. Stacked, it becomes a
     band of its own between the menu and the words, and the bands that carried
     white writing over it take the house navy so the writing still reads. */
  #page #pu2865 {
    display: flex !important;
    flex-direction: column !important;
  }

  #page #u2867-5-bw { order: 1; }   /* logo */
  #page #u2888-6-bw { order: 2; }   /* menu */
  #page #u2865-bw { order: 3; }     /* the photograph */
  #page #u2871-19-bw { order: 4; }  /* opening words */
  #page #u2866-bw { order: 5; }     /* scroll-down arrow */
  #page #u2880-9-bw { order: 6; }   /* Debt Enforcement, Recovering... */
  #page #u2916-30-bw { order: 7; }  /* Nationwide Face-to-Face... */
  #page #u2931-4 { order: 8; }      /* CONTACT US TODAY */

  /* The two CONTACT US TODAY buttons. */
  #page #u2931-4,
  #page #u5098-4 {
    width: calc(100% - 44px) !important;
    margin: 26px auto !important;
  }
  #page #u2947-6-bw { order: 9; }   /* Speak with our team directly */
  #page #u2887-bw { order: 10; }    /* what the team does, and the steps */

  /* The heading belongs to the navy block that follows it. */
  #page #u2947-6 {
    background-color: #1e2b33 !important;
    padding: 26px 22px 0 !important;
    text-align: center !important;
  }

  /* The navy block: a box of writing, then the seven steps. Muse keeps the
     steps in two rows, odd numbers above the line and even numbers below, so
     they have to be threaded back together in order. */
  #page #u2887_position_content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 0 0 30px !important;
  }

  #page #pu2933-6,
  #page #pu2934-4 {
    display: contents !important;
  }

  #page #u2950 {
    width: calc(100% - 44px) !important;
    margin: 0 auto 26px !important;
    order: 1;
  }

  #page #u2933-6 { order: 2; }
  #page #u2934-4 { order: 3; }
  #page #u2935-4 { order: 4; }
  #page #u2936-4 { order: 5; }
  #page #u2938-4 { order: 6; }
  #page #u2937-4 { order: 7; }
  #page #u2939-6 { order: 8; }

  #page #u2867-5,
  #page #u2888-6,
  #page #u2871-19,
  #page #u2866 {
    background-color: #1e2b33 !important;
    text-align: center !important;
  }

  #page #u2867-5 {
    padding: 18px 0 6px !important;
  }

  #page #u2888-6 {
    padding-bottom: 14px !important;
  }

  #page #u2865 {
    min-height: 230px !important;
  }

  #page #u2871-19 {
    padding: 26px 22px 24px !important;
  }

  #page #u2866 {
    padding-bottom: 24px !important;
  }

  /* The scroll-down arrow. */
  #page #u2885 {
    display: block !important;
    width: 40px !important;
    margin: 0 auto !important;
  }

  /* The rules that divide the columns and mark out the steps, the map behind
     the middle section and the small round badge over the photograph: all
     wallpaper, with nowhere to sit at this width. */
  #page #u2903-8-bw,
  #page #u2911-6-bw,
  #page #u2932-bw,
  #page #u2915,
  #page #u2940,
  #page #u2941,
  #page #u2942,
  #page #u2943,
  #page #u2953 {
    display: none !important;
  }

  /* The footer, stacked and put back into reading order. */
  #page #pu2842 {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 26px 0 22px !important;
    background-color: #1e2b33;
  }

  /* Navy fill and the two wallpaper logos: all backdrop. */
  #page #u2842-bw,
  #page #u2843-bw,
  #page #u2844-bw {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0;
  }

  #page #pu2842 > *:not(#u2842-bw):not(#u2843-bw):not(#u2844-bw) {
    position: relative;
    z-index: 1;
  }

  /* The rules between the menu columns. */
  #page #u2973,
  #page #u2986,
  #page #u2987,
  #page #u2988 {
    display: none !important;
  }

  #page #u2975-4 { order: 1; } /* Home */
  #page #u2974 { order: 2; } /* About */
  #page #u2978 { order: 3; } /* Contact Us */
  #page #u2976 { order: 4; } /* How We Work */
  #page #u2977 { order: 5; } /* Our Guarantee */
  #page #u2981 { order: 6; } /* Our Promise */
  #page #u2982 { order: 7; } /* Our Specialists */
  #page #u2980 { order: 8; } /* Our Workforce */
  #page #u2983 { order: 9; } /* Customer Charter */
  #page #u2985 { order: 10; } /* Privacy Policy */
  #page #u2979 { order: 11; } /* FAQs */

  #page #u2989 { order: 12; } /* T: 0333 772 9342 */
  #page #u2990 { order: 13; } /* E: info@debt-enforcement.org */
  #page #u2991 { order: 14; } /* E: support@debt-enforcement.or */

  #page #u2967-13-bw { order: 15; } /* logo and the paragraph */
  #page #u2845-12-bw { order: 16; } /* copyright */

  #page #u2989 {
    margin-top: 14px !important;
  }

  #page #u2967-13 {
    padding: 26px 22px 0 !important;
    text-align: center !important;
  }

  /* Empty paragraphs that hold the desktop logo clear of the writing
     beside it; stacked, they are a hundred pixels of nothing. */
  #page #u2967-13 > p:nth-child(n + 2):nth-child(-n + 6) {
    display: none !important;
  }

  #page #u2968 {
    text-align: center !important;
  }

  #page #u2969 {
    width: 232px !important;
  }

  #page #u2972-10 {
    text-align: center !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
  }

  #page #u2845-12 {
    padding: 16px 22px 0 !important;
    text-align: center !important;
  }
  /* ------------------------------------------- about-us.html --- */

  /* Logo bar and menu bar. */
  #page #u3368-5,
  #page #u3372-8 {
    text-align: center !important;
  }

  #page #u3368-5 {
    padding: 16px 0 4px !important;
  }

  #page #u3372-8 {
    padding-bottom: 12px !important;
  }

  /* The banner. The photograph behind it is a pale one and the writing over it
     is white: on a desktop the words sit on the dark half of the picture, but
     cropped to a phone that half is gone, so the picture is tinted with the
     house navy to keep the words readable. */
  #page #u3456 {
    background-color: #1e2b33 !important;
    background-blend-mode: multiply !important;
    padding: 30px 0 32px !important;
  }

  #page #u3456_align_to_page {
    padding: 0 !important;
  }

  /* The About Us heading. */
  #page #u3550-4 {
    margin: 0 auto !important;
  }

  /* The translucent box of intro copy. */
  #page #u3553 {
    width: calc(100% - 44px) !important;
    margin: 22px auto 0 !important;
  }

  /* The scroll-down arrow. */
  #page #u3559 {
    display: block !important;
    width: 40px !important;
    margin: 26px auto 0 !important;
  }

  /* The six things the business stands for. Muse sets them out as three
     columns of two, with the pictures, the headings and the words kept in
     three separate runs; stacked, each picture needs its own heading and its
     own words beneath it. */
  #page #pu7491 {
    display: flex !important;
    flex-direction: column !important;
    padding: 10px 22px 34px !important;
  }

  #page #pu7491 > div {
    width: 100% !important;
    text-align: center !important;
  }

  #page #pu7491 > div p {
    font-size: inherit !important;
    line-height: inherit !important;
  }

  #page #pu7491 .clip_frame {
    display: block !important;
    width: 76px !important;
    margin: 34px auto 12px !important;
  }

  #page #pu7491 #u3725 {
    margin-top: 6px !important;
  }

  /* The rules that divide the columns. */
  #page #u3580,
  #page #u3581 {
    display: none !important;
  }

  #page #u3578-4,
  #page #u3582-4,
  #page #u3583-4,
  #page #u3584-4,
  #page #u3585-4,
  #page #u3586-4 {
    font-size: 21px !important;
    line-height: 1.25 !important;
    margin-bottom: 7px !important;
  }

  #page #u3587-4,
  #page #u3588-6,
  #page #u3589-6,
  #page #u3590-4,
  #page #u3591-6,
  #page #u3592-6 {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  #page #u3725 { order: 1; }   /* Face 2 Face */
  #page #u3578-4 { order: 2; }
  #page #u3587-4 { order: 3; }

  #page #u7491 { order: 4; }   /* Enforcement */
  #page #u3583-4 { order: 5; }
  #page #u3588-6 { order: 6; }

  #page #u3566 { order: 7; }   /* Workforce */
  #page #u3585-4 { order: 8; }
  #page #u3591-6 { order: 9; }

  #page #u3705 { order: 10; }  /* Strategy */
  #page #u3584-4 { order: 11; }
  #page #u3590-4 { order: 12; }

  #page #u3576 { order: 13; }  /* Honesty */
  #page #u3582-4 { order: 14; }
  #page #u3592-6 { order: 15; }

  #page #u3574 { order: 16; }  /* Customer Service */
  #page #u3586-4 { order: 17; }
  #page #u3589-6 { order: 18; }

  /* The footer, stacked and put back into reading order. */
  #page #pu4824 {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 26px 0 22px !important;
    background-color: #1e2b33;
  }

  /* Navy fill and the two wallpaper logos: all backdrop. */
  #page #u4824-bw,
  #page #u4825-bw,
  #page #u4826-bw {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0;
  }

  #page #pu4824 > *:not(#u4824-bw):not(#u4825-bw):not(#u4826-bw) {
    position: relative;
    z-index: 1;
  }

  /* The rules between the menu columns. */
  #page #u4890,
  #page #u4903,
  #page #u4904,
  #page #u4905 {
    display: none !important;
  }

  #page #u4892 { order: 1; } /* Home */
  #page #u4891-4 { order: 2; } /* About */
  #page #u4895 { order: 3; } /* Contact Us */
  #page #u4893 { order: 4; } /* How We Work */
  #page #u4894 { order: 5; } /* Our Guarantee */
  #page #u4898 { order: 6; } /* Our Promise */
  #page #u4899 { order: 7; } /* Our Specialists */
  #page #u4897 { order: 8; } /* Our Workforce */
  #page #u4900 { order: 9; } /* Customer Charter */
  #page #u4902 { order: 10; } /* Privacy Policy */
  #page #u4896 { order: 11; } /* FAQs */

  #page #u4906 { order: 12; } /* T: 0333 772 9342 */
  #page #u4907 { order: 13; } /* E: info@debt-enforcement.org */
  #page #u4908 { order: 14; } /* E: support@debt-enforcement.or */

  #page #u4884-13-bw { order: 15; } /* logo and the paragraph */
  #page #u4827-12-bw { order: 16; } /* copyright */

  #page #u4906 {
    margin-top: 14px !important;
  }

  #page #u4884-13 {
    padding: 26px 22px 0 !important;
    text-align: center !important;
  }

  /* Empty paragraphs that hold the desktop logo clear of the writing
     beside it; stacked, they are a hundred pixels of nothing. */
  #page #u4884-13 > p:nth-child(n + 2):nth-child(-n + 6) {
    display: none !important;
  }

  #page #u4885 {
    text-align: center !important;
  }

  #page #u4886 {
    width: 232px !important;
  }

  #page #u4889-10 {
    text-align: center !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
  }

  #page #u4827-12 {
    padding: 16px 22px 0 !important;
    text-align: center !important;
  }
  /* ---------------------------------------- how-we-work.html --- */

  /* Logo bar and menu bar. */
  #page #u6615-5,
  #page #u6619-8 {
    text-align: center !important;
  }

  #page #u6615-5 {
    padding: 16px 0 4px !important;
  }

  #page #u6619-8 {
    padding-bottom: 12px !important;
  }

  /* The footer, stacked and put back into reading order. */
  #page #pu9686 {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 26px 0 22px !important;
    background-color: #1e2b33;
  }

  /* Navy fill and the two wallpaper logos: all backdrop. */
  #page #u9686-bw,
  #page #u9687-bw,
  #page #u9688-bw {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0;
  }

  #page #pu9686 > *:not(#u9686-bw):not(#u9687-bw):not(#u9688-bw) {
    position: relative;
    z-index: 1;
  }

  /* The rules between the menu columns. */
  #page #u9705,
  #page #u9718,
  #page #u9719,
  #page #u9720 {
    display: none !important;
  }

  #page #u9710 { order: 1; } /* Contact Us */
  #page #u9708-4 { order: 2; } /* How We Work */
  #page #u9707 { order: 3; } /* Home */
  #page #u9706 { order: 4; } /* About */
  #page #u9709 { order: 5; } /* Our Guarantee */
  #page #u9713 { order: 6; } /* Our Promise */
  #page #u9714 { order: 7; } /* Our Specialists */
  #page #u9712 { order: 8; } /* Our Workforce */
  #page #u9715 { order: 9; } /* Customer Charter */
  #page #u9717 { order: 10; } /* Privacy Policy */
  #page #u9711 { order: 11; } /* FAQs */

  #page #u9721-4 { order: 12; } /* T: 0333 772 9342 */
  #page #u9722-4 { order: 13; } /* E: info@debt-enforcement.org */
  #page #u9723-4 { order: 14; } /* E: support@debt-enforcement.or */

  #page #u9699-13-bw { order: 15; } /* logo and the paragraph */
  #page #u9689-12-bw { order: 16; } /* copyright */

  #page #u9721-4 {
    margin-top: 14px !important;
  }

  #page #u9699-13 {
    padding: 26px 22px 0 !important;
    text-align: center !important;
  }

  /* Empty paragraphs that hold the desktop logo clear of the writing
     beside it; stacked, they are a hundred pixels of nothing. */
  #page #u9699-13 > p:nth-child(n + 2):nth-child(-n + 6) {
    display: none !important;
  }

  #page #u9700 {
    text-align: center !important;
  }

  #page #u9701 {
    width: 232px !important;
  }

  #page #u9704-10 {
    text-align: center !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
  }

  #page #u9689-12 {
    padding: 16px 22px 0 !important;
    text-align: center !important;
  }
  /* ----------------------------------------- contact-us.html --- */

  /* Logo bar and menu bar. */
  #page #u5377-5,
  #page #u5381-8 {
    text-align: center !important;
  }

  #page #u5377-5 {
    padding: 16px 0 4px !important;
  }

  #page #u5381-8 {
    padding-bottom: 12px !important;
  }

  /* The banner: navy panel behind, photograph and words in front. */
  #page #pu5376 {
    position: relative !important;
  }

  #page #u5376-bw {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0;
  }

  /* The navy fill itself: Muse gives it a fixed height, which the reset above
     drops, so it has to be told to fill the band it backs. */
  #page #u5376 {
    height: 100% !important;
  }

  #page #pu5376 > *:not(#u5376-bw) {
    position: relative !important;
    z-index: 1;
  }

  #page #u5396 {
    padding: 200px 0 24px !important;
    background-position: center !important;
  }

  #page #u5396_align_to_page {
    padding: 0 !important;
  }

  /* The scroll-down arrow. */
  #page #u5488 {
    display: block !important;
    width: 40px !important;
    margin: 0 auto !important;
  }

  /* The company details, the telephone panel and the enquiry button: white
     writing that sits on the photograph on a desktop and on the navy here. */
  #page #u6193-6,
  #page #u5490-6,
  #page #u5461-19 {
    text-align: center !important;
  }

  #page #u6193-6 {
    padding-top: 30px !important;
  }

  #page #u5461-19 {
    padding-bottom: 34px !important;
  }

  #page #u6245,
  #page #u5462,
  #page #u5464,
  #page #u5466 {
    display: block !important;
  }

  /* The MAKE ENQUIRY NOW button. */
  #page #u5468 {
    display: block !important;
    margin: 10px 22px 0 !important;
  }

  #page #u5469-4 {
    font-size: 19px !important;
    line-height: 1.25 !important;
    padding: 14px 10px !important;
  }

  /* The rasterised heading above the form. */
  #page #u6440-4 {
    display: block !important;
    width: calc(100% - 44px) !important;
    max-width: 411px !important;
    margin: 34px auto 0 !important;
  }

  /* The enquiry form. Muse gives the form itself no width at all and floats
     the fields onto the fixed canvas, so it has to be rebuilt as a column. */
  #page #widgetu6797 {
    display: flex !important;
    flex-direction: column !important;
    width: calc(100% - 44px) !important;
    max-width: 460px !important;
    margin: 18px auto 36px !important;
  }

  #page #widgetu6837 { order: 1; } /* Your Name */
  #page #widgetu6802 { order: 2; } /* Email Address */
  #page #widgetu6829 { order: 3; } /* Best Contact Number */
  #page #widgetu6798 { order: 4; } /* Tell us why you would like us to... */
  #page #u6859-4 { order: 5; }     /* Submit */

  /* Empty text frames that space the desktop form out. */
  #page #u6819-3,
  #page #u6828-3,
  #page #u6806-3 {
    display: none !important;
  }

  #page #widgetu6797 .fld-grp {
    width: 100% !important;
    margin-bottom: 12px !important;
  }

  #page #widgetu6797 .fld-input,
  #page #widgetu6797 .fld-textarea {
    display: block !important;
    position: relative !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 48px !important;
  }

  #page #widgetu6797 .fld-textarea {
    height: 124px !important;
  }

  #page #widgetu6797 .wrapped-input {
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    padding: 0 13px !important;
    font-size: 16px !important;
  }

  #page #widgetu6797 textarea.wrapped-input {
    padding: 12px 13px !important;
  }

  #page #widgetu6797 label.wrapped-input {
    display: flex !important;
    align-items: center !important;
  }

  #page #widgetu6797 .fld-textarea label.wrapped-input {
    align-items: flex-start !important;
  }

  #page #widgetu6797 label.wrapped-input .actAsPara {
    padding: 0 !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }

  #page #u6859-4 {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 4px !important;
    padding: 13px 0 !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
  }

  #page #u6859-4 > div {
    margin-top: 0 !important;
    height: auto !important;
  }

  /* The footer, stacked and put back into reading order. */
  #page #pu8546 {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 26px 0 22px !important;
    background-color: #1e2b33;
  }

  /* Navy fill and the two wallpaper logos: all backdrop. */
  #page #u8546-bw,
  #page #u8547-bw,
  #page #u8548-bw {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0;
  }

  #page #pu8546 > *:not(#u8546-bw):not(#u8547-bw):not(#u8548-bw) {
    position: relative;
    z-index: 1;
  }

  /* The rules between the menu columns. */
  #page #u8565,
  #page #u8578,
  #page #u8579,
  #page #u8580 {
    display: none !important;
  }

  #page #u8567 { order: 1; } /* Home */
  #page #u8566 { order: 2; } /* About */
  #page #u8570-4 { order: 3; } /* Contact Us */
  #page #u8568 { order: 4; } /* How We Work */
  #page #u8569 { order: 5; } /* Our Guarantee */
  #page #u8573 { order: 6; } /* Our Promise */
  #page #u8574 { order: 7; } /* Our Specialists */
  #page #u8572 { order: 8; } /* Our Workforce */
  #page #u8575 { order: 9; } /* Customer Charter */
  #page #u8577 { order: 10; } /* Privacy Policy */
  #page #u8571 { order: 11; } /* FAQs */

  #page #u8581 { order: 12; } /* T: 0333 772 9342 */
  #page #u8582 { order: 13; } /* E: info@debt-enforcement.org */
  #page #u8583 { order: 14; } /* E: support@debt-enforcement.or */

  #page #u8559-13-bw { order: 15; } /* logo and the paragraph */
  #page #u8549-12-bw { order: 16; } /* copyright */

  #page #u8581 {
    margin-top: 14px !important;
  }

  #page #u8559-13 {
    padding: 26px 22px 0 !important;
    text-align: center !important;
  }

  /* Empty paragraphs that hold the desktop logo clear of the writing
     beside it; stacked, they are a hundred pixels of nothing. */
  #page #u8559-13 > p:nth-child(n + 2):nth-child(-n + 6) {
    display: none !important;
  }

  #page #u8560 {
    text-align: center !important;
  }

  #page #u8561 {
    width: 232px !important;
  }

  #page #u8564-10 {
    text-align: center !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
  }

  #page #u8549-12 {
    padding: 16px 22px 0 !important;
    text-align: center !important;
  }
  /* -------------------------------------- privacy-policy.html --- */

  /* Logo bar and menu bar. */
  #page #u5773-5,
  #page #u5777-8 {
    text-align: center !important;
  }

  #page #u5773-5 {
    padding: 16px 0 4px !important;
  }

  #page #u5777-8 {
    padding-bottom: 12px !important;
  }

  /* The banner: navy panel behind, photograph and words in front. */
  #page #pu5772 {
    position: relative !important;
  }

  #page #u5772-bw {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0;
  }

  #page #pu5772 > *:not(#u5772-bw) {
    position: relative !important;
    z-index: 1;
  }

  /* The navy fill itself: Muse gives it a fixed height, which the reset above
     drops, so it has to be told to fill the band it backs. */
  #page #u5772 {
    height: 100% !important;
  }

  #page #u5792 {
    padding: 30px 0 32px !important;
    background-position: center !important;
  }

  #page #u5792_align_to_page {
    padding: 0 !important;
  }

  /* The page title, which Muse rasterised into a picture 536px across. */
  #page #u5793-4 {
    display: block !important;
    width: calc(100% - 44px) !important;
    max-width: 536px !important;
    margin: 0 auto !important;
  }

  /* The translucent box of intro copy under the page title. */
  #page #u5794 {
    width: calc(100% - 44px) !important;
    margin: 20px auto 0 !important;
  }

  /* The policy itself. */
  #page #u5882-127 {
    padding-top: 32px !important;
    padding-bottom: 10px !important;
  }

  /* The footer, stacked and put back into reading order. */
  #page #pu5913 {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 26px 0 22px !important;
    background-color: #1e2b33;
  }

  /* Navy fill, tilted wallpaper logo, and the CCJ mark: all backdrop. */
  #page #u5913-bw,
  #page #u5914-bw,
  #page #u5915-bw {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0;
  }

  #page #pu5913 > *:not(#u5913-bw):not(#u5914-bw):not(#u5915-bw) {
    position: relative;
    z-index: 1;
  }

  /* The rules between the menu columns. */
  #page #u5978,
  #page #u5991,
  #page #u5992,
  #page #u5993 {
    display: none !important;
  }

  /* Ordered by the page each link points at, for the reason given against the
     shared footer above. */
  #page #pu5913 > a[href="index.html"] { order: 1; }
  #page #pu5913 > a[href="about-us.html"] { order: 2; }
  #page #pu5913 > a[href="contact-us.html"] { order: 3; }
  #page #pu5913 > a[href="how-we-work.html"] { order: 4; }
  #page #pu5913 > a[href="our-gaurantee.html"] { order: 5; }
  #page #pu5913 > a[href="our-promise.html"] { order: 6; }
  #page #pu5913 > a[href="our-specialists.html"] { order: 7; }
  #page #pu5913 > a[href="our-workforce.html"] { order: 8; }
  #page #pu5913 > a[href="customer-charter.html"] { order: 9; }
  #page #pu5913 > a[href="privacy-policy.html"] { order: 10; }
  #page #pu5913 > a[href="faq-s.html"] { order: 11; }

  #page #u5994 { order: 12; }  /* telephone */
  #page #u5995 { order: 13; }  /* info@ */
  #page #u5996 { order: 14; }  /* support@ */

  #page #u5972-13-bw { order: 15; } /* logo and the paragraph about the business */
  #page #u5916-12-bw { order: 16; } /* copyright line */

  #page #u5994 {
    margin-top: 14px !important;
  }

  #page #u5972-13 {
    padding: 26px 22px 0 !important;
    text-align: center !important;
  }

  /* Empty paragraphs that hold the desktop logo clear of the writing
     beside it; stacked, they are a hundred pixels of nothing. */
  #page #u5972-13 > p:nth-child(n + 2):nth-child(-n + 6) {
    display: none !important;
  }

  /* The white logo. */
  #page #u5973 {
    text-align: center !important;
  }

  #page #u5974 {
    width: 232px !important;
  }

  /* The paragraph about the business. */
  #page #u5977-10 {
    text-align: center !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
  }

  #page #u5916-12 {
    padding: 16px 22px 0 !important;
    text-align: center !important;
  }
}