/* Adjustments on top of the Webflow export.
 *
 * Kept in its own file rather than edited into site.css: that stylesheet is
 * 220KB of generated rules and is patched by the brand-asset build, so any
 * hand edits in it are easy to lose and hard to find again.
 *
 * Loaded after site.css, so these win without needing !important. */

/* ------------------------------------------------------------------ *
 * The mobile header
 *
 * The export gives it a pale translucent lavender, which over the dark
 * hero video reads as a washed-out grey band bolted to the top of the
 * page — a hard edge exactly where the design wants none. It also hides
 * the white wordmark against it.
 *
 * Over the hero it is now nothing but a soft dark scrim, so the video
 * runs behind it. Once scrolled past the hero it takes a solid dark
 * background, because from there down the page is pale and white type
 * on it would vanish.
 * ------------------------------------------------------------------ */

@media screen and (max-width: 991px) {
  .navbar-2 {
    background-color: transparent;
    background-image: linear-gradient(to bottom, rgba(10, 10, 12, 0.62), rgba(10, 10, 12, 0));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    /* background-image is not interpolable: a gradient to `none` snaps
     * whatever duration you give it, so listing it only cost repaints. */
    transition: background-color .28s ease, box-shadow .28s ease;
  }

  .navbar-2.is-stuck {
    background-color: #141414;
    background-image: none;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
  }

  /* The burger is an inline SVG whose bars are fill="currentColor", and the
   * export pins that colour to near-black — invisible now the bar behind it
   * is dark. It stays white in both states, since the stuck bar is dark too. */
  .navbar-2 .menu svg,
  .navbar-2 .menu svg path {
    color: #fff;
  }

  .navbar-2 .menu {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  /* The wordmark is white-on-transparent, so give it room to be read. */
  .navbar-2 .image-2 {
    width: 132px;
    height: auto;
  }
}

/* ------------------------------------------------------------------ *
 * How fast the hero arrives
 *
 * The page finishes loading at about 320ms, but the export's own entrance
 * interaction did not finish revealing the headline until ~970ms and the
 * call to action until ~1050ms. That is most of a second looking at an
 * empty video, which is a poor first impression and a poor first
 * impression is a lost lead.
 *
 * A CSS animation beats the inline styles Webflow's interaction engine
 * writes, so this simply outruns it: same fade-and-rise, a third of the
 * time, with a small stagger so it still feels composed rather than
 * everything snapping in at once.
 * ------------------------------------------------------------------ */

@keyframes heroIn {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

.hero .heading-main .ha h1,
.hero .p-hold h2,
.hero .but,
.hero .button_new,
.hero .stats,
.hero .stats .count,
.hero .scroll,
/* The badge's container was already covered, but the things you actually
 * see inside it — the number, the label, the avatars — are animated
 * separately by the export and did not finish until about 2.9 seconds,
 * long after the header. Measuring the container hid that. */
.hero ._100,
.hero .text-11,
.hero .circles,
.hero .circles > *,
.hero .more {
  animation: heroIn .34s cubic-bezier(.16, 1, .3, 1) both;
}

.hero .heading-main .ha:nth-child(1) h1 { animation-delay: .02s; }
.hero .heading-main .ha:nth-child(2) h1 { animation-delay: .08s; }
.hero .p-hold h2                        { animation-delay: .14s; }
.hero .but,
.hero .button_new                       { animation-delay: .20s; }
/* the badge and everything in it share the header's delay, so the top of
 * the page and the bottom-left badge land at the same moment */
.hero .stats,
.hero ._100,
.hero .text-11,
.hero .circles,
.hero .circles > *,
.hero .more                             { animation-delay: .26s; }
.hero .scroll                           { animation-delay: .34s; }

@media (prefers-reduced-motion: reduce) {
  .hero .heading-main .ha h1,
  .hero .p-hold h2,
  .hero .but,
  .hero .button_new,
  .hero .stats,
  .hero .stats .count,
  .hero ._100,
  .hero .text-11,
  .hero .circles,
  .hero .circles > *,
  .hero .more,
  .hero .scroll {
    animation: none;
    opacity: 1;
  }
}

/* ------------------------------------------------------------------ *
 * The hero on a phone
 *
 * The export leaves a tall dead gap under the call to action, so the
 * fold ends on nothing. Pull the content up and let the video fill less
 * height, and the whole thing reads in one screen.
 * ------------------------------------------------------------------ */

@media screen and (max-width: 767px) {
  .hero {
    margin: 0;
  }

  .background-video-3 {
    border-radius: 0;
  }

  /* the "scroll down" cue was floating in the middle of empty video */
  .scroll {
    bottom: 1.6rem;
  }
}

@media screen and (max-width: 479px) {
  .hero .content,
  .hero .heading-main {
    padding-top: 4.5rem;
  }
}

/* ------------------------------------------------------------------ *
 * The sticky call-to-action bar (phones only)
 *
 * On a phone the header scrolls away within the first swipe, taking the
 * phone number and the quote button with it. This slides up once past the
 * hero and stays in thumb reach, then gets out of the way over the footer
 * where both actions are already on screen.
 * ------------------------------------------------------------------ */

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  /* Opaque, and deliberately not blurred. A backdrop-filter has to
   * re-sample everything behind the element on every frame it moves, which
   * is the one thing guaranteed to make a sliding bar stutter. At 96% the
   * blur was never visible through it anyway. */
  background: rgba(35, 43, 51, .96);
  border-top: 1px solid rgba(255, 255, 255, .10);
  transform: translateY(110%);
  transition: transform .34s cubic-bezier(.22, 1, .36, 1);
  /* promote it once, up front, so the first slide is not the frame the
   * browser spends building a layer */
  will-change: transform;
}

.sticky-cta.is-in {
  transform: none;
}

.sticky-cta a {
  flex: 1;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  font-family: Gilroy, Arial, sans-serif;
  font-weight: 700;
  font-size: .94rem;
  text-decoration: none;
  padding: 0 12px;
  white-space: nowrap;
}

.sticky-cta-quote {
  background: var(--brand);
  color: var(--brand-ink);
  /* the only child of the bar, so it takes the whole width */
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
}

/* the floating pill nav would sit right on top of the bar */
@media screen and (max-width: 991px) {
  .foot-nav { display: none; }
}

/* ------------------------------------------------------------------ *
 * The mobile menu
 *
 * The export's drawer is a bare list of links on a dark panel — no way to
 * ring, no way to get a quote, which are the only two things a visitor is
 * there to do. The build appends both to the bottom of it.
 * ------------------------------------------------------------------ */

.side_nav .menu-cta {
  margin-top: auto;
  padding: 22px 0 8px;
  display: grid;
  gap: 10px;
}

.side_nav .menu-cta a {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-family: Gilroy, Arial, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
}

.side_nav .menu-cta .m-quote {
  background: var(--brand);
  color: var(--brand-ink);
}

.side_nav .menu-cta .m-call {
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .5);
}

.side_nav .menu-cta small {
  display: block;
  text-align: center;
  color: rgba(255, 255, 255, .55);
  font-size: .78rem;
  margin-top: 4px;
}

/* let the drawer lay its content out top-to-bottom so the buttons can sit
   against the bottom edge */
.side_nav {
  display: flex;
  flex-direction: column;
}

/* ------------------------------------------------------------------ *
 * Brand colour
 *
 * One place to change it. The export hard-codes a washed-out #fcd052 on
 * the buttons, which does not match the logo and reads as weak against
 * the hero video.
 * ------------------------------------------------------------------ */

:root {
  /* Slate and terracotta, taken from the roofs in the job photos: dark grey
   * slate with terracotta ridge tiles. Keep in step with `brand` in
   * content/business.json, which is what the generated pages read. */
  --brand: #ec4a10;          /* the orange taken from the logo artwork */
  --brand-hover: #ff5f26;
  --brand-ink: #ffffff;      /* type that sits on the brand colour */
  --brand-dark: #2f3944;     /* deep slate — dark bands */
  --brand-page: #f4f2ef;     /* warm off-white — page background */

  /* The export routes nearly every surface through these two variables, so
   * redefining them here re-skins the whole site rather than hunting down
   * several hundred generated rules. */
  --background-color--background-primary: var(--brand-page);
  --neutral--alt-black: var(--brand-dark);
  --neutral--black: #232b33;   /* the deepest slate, not pure black */
  --equispace-brand-color--artyclick-amber: var(--brand);
  --equispace-brand-color--palatinate-blue: var(--brand);
}

/* The handful of places the export hard-codes the old lavender.
 *
 * The header is deliberately desktop-only here: on a phone it has to stay a
 * transparent scrim over the hero video, and an unconditional rule further
 * down this file would quietly beat that one on source order. */
.accordion-item {
  background-color: var(--brand-page);
}

@media screen and (min-width: 992px) {
  .navbar-2,
  .navbar-2-copy {
    background-color: var(--brand-page);
  }
}

/* The desktop nav links are white, which worked when the header sat on the
 * old dark page colour. On the warm off-white they are all but invisible. */
@media screen and (min-width: 992px) {
  .nav-link-2 {
    color: var(--brand-dark);
  }

  .nav-link-2:hover,
  .nav-link-2.w--current {
    color: var(--brand);
  }
}

/* the pale grey radial behind the statistics band */
.stats-2 {
  background-image: radial-gradient(circle, #e3e0da, var(--brand-page));
}

/* the enquiry form's submit button, hard-coded to the template yellow */
.submit-button {
  background-color: var(--brand);
  color: var(--brand-ink);
  border-radius: 999px;
  font-weight: 700;
  transition: background-color .18s ease;
}

.submit-button:hover {
  background-color: var(--brand-hover);
}

/* ------------------------------------------------------------------ *
 * The primary call to action
 *
 * Three things were wrong with it:
 *   - a pale template yellow that is not the brand colour
 *   - a stray black dot before the label, a decorative leftover from the
 *     template that reads as a bullet point
 *   - text-transform: capitalize, giving "Get A Free Quote"
 * ------------------------------------------------------------------ */

.button_new,
.button_new-copy {
  background-color: var(--brand);
  border-radius: 999px;
  padding: 1em 2.1em;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.button_new:hover,
.button_new-copy:hover {
  background-color: var(--brand-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .26);
}

/* the leftover dot */
.button_new .div-block-9,
.button_new-copy .div-block-9 {
  display: none;
}

/* White, because near-black on terracotta is only about 3.5:1 and this is
 * the primary call to action on the site.
 *
 * The !important is not laziness. Webflow's interaction engine writes
 * `color: rgb(35,43,51)` onto this element as an inline style at runtime,
 * baked into the exported interaction data, and an inline style beats any
 * selector. An author !important is the only thing that outranks it. */
.button_new .text-block-2,
.button_new-copy .text-block-2 {
  text-transform: none;
  color: var(--brand-ink) !important;
  font-weight: 700;
  letter-spacing: .01em;
  font-size: .95rem;
}

/* The nav's quote button is the .ripple-btn wrapper, not the link inside it —
 * the link has no padding of its own, so colouring that leaves the label
 * spilling out of the pill. */
.ripple-btn {
  border-radius: 999px;
  overflow: hidden;
}

.ripple-btn .contact.w-nav-link {
  font-weight: 700;
}

/* ------------------------------------------------------------------ *
 * Headings
 *
 * The export gives every display heading its own generated class and its
 * own weight — 400, 500, 600 and 900 all appear — so "Our Work", "FAQ's",
 * "AND MANY MORE" and the card titles each render in a different weight of
 * Gilroy and read as different typefaces.
 *
 * One weight for all of them: Gilroy 700, the same as the hero's
 * "ROOFING / DONE RIGHT". Applies on every page, not just the homepage.
 * ------------------------------------------------------------------ */

.text-2,              /* hero — the reference */
.text-2-copy,         /* About heading */
.text-2-copy-copy,    /* FAQ's */
.featured-work,       /* Our Work */
.heading-2,           /* Our Work card titles */
.heading-4,           /* Everything We Cover tiles */
.heading-4-copy,      /* AND MANY MORE */
.heading-5,           /* footer — Get a free quote */
.heading-5-copy,
.heading-5-copy-copy,
.heading-6,           /* service page sub-headings */
.h1,                  /* service page titles */
.text-4,              /* REVIEWS panel */
.text-12,             /* by the numbers */
.text-13,             /* the statistics themselves */
._100,                /* the roofs-completed counter */
.services-text-head,  /* Everything We Cover */
.text-block-8,        /* About Amarx Roofing */
.jobv h2 {            /* On the roof this month */
  font-family: Gilroy, Arial, sans-serif;
  font-weight: 700;
}

/* The pull quote is set in the same family but reads as body copy, so it
 * keeps a lighter weight on purpose — only the emphasis matches. */
.text-span-8 {
  font-weight: 700;
}

/* Two paragraphs fall through to system-ui because the export never names
 * a family on them. On a page set entirely in Gilroy they stand out. */
.paragraph-5,
.about-us-text,
.text-block-13,
.text-block-13-copy {
  font-family: Gilroy, Arial, sans-serif;
}

/* ------------------------------------------------------------------ *
 * The "View our work" panel
 *
 * It sits among the reviews as the one large, dark, eye-catching tile on
 * that screen, so it should read as something you can press.
 * ------------------------------------------------------------------ */

a.card-wrapper {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform .22s cubic-bezier(.16,1,.3,1), filter .22s ease;
}

a.card-wrapper:hover,
a.card-wrapper:focus-visible {
  transform: translateY(-4px);
  filter: brightness(1.08);
}

a.card-wrapper:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 6px;
  border-radius: 18px;
}

/* "VIEW OUR WORK" is longer than the single word the panel was built for.
 * At the export's size it wraps to two lines and shoves the tracked-out
 * subtitle off the bottom edge, so size it to sit on one line. */
.card-front .text-4 {
  font-size: clamp(.95rem, 1.35vw, 1.25rem);
  white-space: nowrap;
  letter-spacing: .01em;
}

.card-front .text-5 {
  font-size: .72rem;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * Our Work cards
 *
 * Each card sizes its photo with its own generated class, tuned to the
 * aspect ratio of whichever picture the template originally shipped. Our
 * photos are a different shape, so some cards leave a black strip of card
 * showing above the image and others overflow. Let every photo fill its
 * holder instead of trusting six one-off rules.
 * ------------------------------------------------------------------ */

/* The holder is height:auto in the export, so its height follows whatever
 * shape the picture inside happens to be. With our photos that leaves some
 * cards shorter than their cell and a strip of black card showing above the
 * image. Pin the shape and let the photo crop to it. */
.img-hold {
  aspect-ratio: 3 / 2;
  height: auto;
  overflow: hidden;
  border-radius: inherit;
}

.img-hold img {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  inset: 0;
}

/* ------------------------------------------------------------------ *
 * Links
 *
 * The export leaves body links at the browser-ish blue it shipped with,
 * which is the one colour on the page that belongs to nobody.
 * ------------------------------------------------------------------ */

:root {
  --link-color--link-primary: var(--brand);
  --link-color--link-hover: var(--brand-hover);
  --base-color-system--link: var(--brand);
}

.text-center a,
.bold-text-6 a,
.insta a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.text-center a:hover,
.bold-text-6 a:hover {
  color: var(--brand-hover);
}

/* ------------------------------------------------------------------ *
 * Dead space under the FAQ
 *
 * The section reserves room the questions do not use, leaving a couple of
 * hundred pixels of empty page before the footer.
 * ------------------------------------------------------------------ */

.faq {
  padding-bottom: 4rem;
}

/* ------------------------------------------------------------------ *
 * Sentence case
 *
 * The export capitalises Every Word In These Headings, which was fine for
 * the original site's wording but turns ours into "Get A Free Quote" and
 * "Callback On Every Enquiry". The copy is already written with the right
 * capitalisation, so let it through unaltered.
 * ------------------------------------------------------------------ */

.heading-5,
.heading-5-copy,
.heading-5-copy-copy,
.text-14,
.text-18 {
  text-transform: none;
}

/* ------------------------------------------------------------------ *
 * The About section
 *
 * It reserves a full 1440px but holds one heading, one paragraph and a
 * picture, leaving several hundred pixels of empty dark at the bottom and
 * a small floating image. Tighten it and let the picture carry some weight.
 * ------------------------------------------------------------------ */

@media screen and (min-width: 992px) {
  .about-us {
    padding-bottom: 4rem;
  }

  .about_image_div {
    max-width: 760px;
    margin-inline: auto;
  }

  .about_image_div img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    display: block;
  }
}

/* ------------------------------------------------------------------ *
 * Small shared fixes
 * ------------------------------------------------------------------ */

/* A panel that sets its own display beats the browser's rule for
 * [hidden]. This has already bitten twice — the admin sign-in and the
 * video lightbox — so state it once, globally. */
[hidden] {
  display: none !important;
}

/* ------------------------------------------------------------------ *
 * The real logo
 *
 * The supplied artwork is one lockup containing the house, the wordmark
 * and the underline. The export's header puts a separate icon beside it,
 * which with this artwork is the same picture twice — so the icon goes and
 * the lockup is given room to be read.
 * ------------------------------------------------------------------ */

.navbar-2 .image,
.navbar-2-copy .image {
  display: none;
}

.navbar-2 .image-2 {
  width: auto;
  height: 42px;
  max-width: none;
}

@media screen and (max-width: 991px) {
  .navbar-2 .image-2 {
    height: 34px;
  }
}

/* the footer's "AND MANY MORE" tile uses the mark on its own */
.image-45 {
  width: auto;
  height: 44px;
}

/* which lockup shows, and where */
.logo-on-dark { display: none; }

@media screen and (max-width: 991px) {
  .logo-on-light { display: none; }
  .logo-on-dark { display: block; }
}

/* ------------------------------------------------------------------ *
 * The header strapline and the logo entrance
 *
 * A line of reassurance next to the mark, and both fading up on load in
 * step with the hero rather than after it. The header is the first thing
 * painted, so it should not be the last thing to arrive.
 * ------------------------------------------------------------------ */

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-stars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding-left: 14px;
  border-left: 1.5px solid rgba(47, 57, 68, .25);
}

.brand-stars svg {
  width: 17px;
  height: 17px;
  fill: var(--brand);
  display: block;
}

/* over the hero video the header is dark, so the divider lightens */
@media screen and (max-width: 991px) {
  .brand-stars { display: none; }
}

/* The header arrives as one, on exactly the same animation and timing as
 * the "500+ roofs completed" badge in the hero — heroIn, 0.34s, 0.26s
 * delay, same easing. The two sit on screen together, so anything else
 * reads as two separate things loading. If the badge's timing changes,
 * change it here too. */
.brand .image-2,
.header-tel,
.main-nav,
.main-nav .nav-link-2 {
  animation: heroIn .34s cubic-bezier(.16, 1, .3, 1) .26s both;
}

@media (prefers-reduced-motion: reduce) {
  .brand .image-2,
  .header-tel,
  .main-nav,
  .main-nav .nav-link-2,
  .brand-stars { animation: none; opacity: 1; }
}

/* ------------------------------------------------------------------ *
 * The phone number in the header
 *
 * Beside the quote button, so the two ways of getting in touch sit
 * together. Hidden on phones — the sticky bar already carries it there,
 * and the header has no room.
 * ------------------------------------------------------------------ */

.header-tel {
  display: none;
  align-items: center;
  gap: 8px;
  font-family: Gilroy, Arial, sans-serif;
  font-weight: 700;
  font-size: .95rem;
  color: var(--brand-dark);
  text-decoration: none;
  white-space: nowrap;
  padding: 10px 4px 10px 0;
  margin-right: 16px;
}

.header-tel::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: none;
  background: var(--brand);
  -webkit-mask: no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2Z"/></svg>');
  mask: no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2Z"/></svg>');
}

.header-tel:hover { color: var(--brand); }

@media screen and (min-width: 992px) {
  .header-tel { display: inline-flex; }
}

/* On a phone the header's right-hand slot is empty now the quote button
 * has gone, so the number lives there — labelled "Call us" rather than a
 * bare glyph, so it is obvious what it does. The digits will not fit
 * beside the burger and the lockup at 390px. */
@media screen and (max-width: 991px) {
  .header-tel {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px 9px 12px;
    margin: 0;
    min-height: 44px;
    border-radius: 999px;
    border: 1.5px solid rgba(255, 255, 255, .45);
    color: #fff;
    font-size: .82rem;
    line-height: 1.1;
    white-space: nowrap;
    flex: none;
  }

  .header-tel::before {
    background: #fff;
    width: 15px;
    height: 15px;
  }

  .navbar-2.is-stuck .header-tel {
    border-color: rgba(255, 255, 255, .35);
  }
}

/* "Call us" on a phone where the digits will not fit; the full number on
   desktop where they will. */
.tel-label { display: none; }

@media screen and (max-width: 991px) {
  .tel-label  { display: inline; }
  .tel-number { display: none; }
}

/* ------------------------------------------------------------------ *
 * The work section needs its own background
 *
 * Its headings are white, but the section was never given a dark colour.
 * The template relied on the card behind it: zoomed to 16x, that card
 * filled the viewport and acted as the backdrop, which is why the white
 * text read at all. With the pinned zoom gone (see apply-content.mjs for
 * why it had to go) the headings were left white on the light page.
 *
 * So the section now owns its background instead of borrowing one from an
 * animation. #141414 is the same near-black the export uses on the stuck
 * navbar, and measured off the old build's backdrop, which was rgb(20,20,20).
 * ------------------------------------------------------------------ */
.work-holder {
  background-color: #141414;
}

/* The review cards are scattered with absolute positioning and the lowest
 * five hang up to 144px past the bottom of their own section. .work-holder
 * comes after them in the DOM, so once it had a background of its own it
 * painted over them and they appeared sliced in half.
 *
 * Clipped to their section rather than lifted above it. Lifting was tried
 * and looked worse: the strays are the faded ones from the far edge of the
 * scatter, so they floated over the OUR WORK heading as translucent
 * rectangles. Clipping ends them on the boundary instead, which reads as
 * the scatter running under the next section.
 *
 * Safe now the card no longer zooms to 16x; that was the one thing in here
 * that ever needed to escape. */
.card_section {
  overflow: hidden;
}

/* ------------------------------------------------------------------ *
 * The About photo was coming out as a negative
 *
 * The export wraps the whole About block in .div-block-11, which carries
 * mix-blend-mode: difference. That is how the template gets its headings to
 * flip colour against whatever is behind them, and it works fine for text.
 * But a blend mode applies to the element's entire rendered subtree, and
 * the section's photograph is in that subtree, so it was being differenced
 * against the page too: blue sky came out orange, clay tiles came out cyan.
 * It read as an X-ray.
 *
 * The photo cannot opt out on its own, because a child cannot escape a
 * parent's blending. Turning the blend off on the wrapper is enough,
 * though, because the text inside carries its own mix-blend-mode:
 * difference (.ab, .about-us-text, .heading-about-us). Those now blend
 * against the page directly and still flip to dark on the light
 * background, exactly as before.
 * ------------------------------------------------------------------ */
.div-block-11 {
  mix-blend-mode: normal;
}

/* Turning the blend off means the text inside can no longer rely on being
 * inverted into legibility, so it gets real colours. These are the shades
 * the difference blend was producing against the page anyway, set directly:
 * a near-black heading and a mid grey body. The nested blends go too, or
 * they would invert against the page on their own. */
.div-block-11 .ab,
.div-block-11 .ab-copy,
.div-block-11 .heading-about-us,
.div-block-11 .about-but-head,
.div-block-11 .holder {
  mix-blend-mode: normal;
}

.div-block-11 .ab,
.div-block-11 .ab-copy,
.div-block-11 .text-2-copy {
  color: var(--neutral--black);
}

/* The heading's own text sits one level deeper, in .text-2-copy, and
 * carries its own difference blend. It has to be switched off explicitly or
 * the heading keeps inverting against the page on its own. */
.div-block-11 .text-2-copy {
  mix-blend-mode: normal;
}

.div-block-11 .about-us-text {
  mix-blend-mode: normal;
  color: #5b6470;
}

/* The hexagon watermark sat behind all of this. The blend used to knock it
 * back to almost nothing; without it, it reads as a hard grey shape across
 * the middle of the section. */
.div-block-11 .logo-hold {
  opacity: .05;
}

/* ------------------------------------------------------------------ *
 * The "View our work" card
 *
 * It was a flat dark rectangle with grommet-icons-projects.svg on it: four
 * empty outlined squares, left over from the EquiSpace template. The file
 * loads perfectly well, it just looks exactly like a broken-image icon, so
 * the card read as something that had failed to render.
 *
 * It is the way into the work section, so it now shows the work: a real
 * roof under a gradient dark enough to keep the label legible. The photo is
 * one the gallery build already produces, so it is regenerated by
 * `npm run media` along with everything else rather than being a stray file.
 * ------------------------------------------------------------------ */
.card-front {
  background-image:
    linear-gradient(rgba(18, 22, 26, .10) 0%, rgba(18, 22, 26, .30) 45%, rgba(18, 22, 26, .90) 100%),
    url("../img/gallery-roof-replacement-1.jpg");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  /* the label moves to the foot of the card, over the darkest part */
  justify-content: flex-end;
  padding: 0 0 26px;
  gap: 0;
}

/* the placeholder-looking glyph */
.card-front .grommet-iconsprojects {
  display: none;
}

.card-front .text-4 {
  letter-spacing: .02em;
}