/* --------------------------------------------------------------------------
   Block editor compatibility.

   site.css was written for the hand built static markup. The pages are now made
   of core blocks, so this file maps the block wrappers onto the same look. It is
   loaded after site.css and only ever adds; nothing in site.css is overridden
   for the header, footer or navigation.
   -------------------------------------------------------------------------- */

/* --- generic block layout ------------------------------------------------- */
.entry > .wp-block-group.alignfull,
.wp-site-blocks > .wp-block-group.alignfull,
main > .wp-block-group.alignfull,
main > .wp-block-cover.alignfull {
  margin-inline: calc(50% - 50vw);
  max-width: 100vw;
}

main > .wp-block-group,
main > .wp-block-cover {
  margin-block: 0;
}

/* the theme's own section rhythm, applied to block groups */
main > .wp-block-group.section {
  padding-block: clamp(3.4rem, 6vw, 5.6rem);
}

main > .wp-block-group > .wp-block-group__inner-container,
main > .wp-block-group > :where(:not(.alignfull)) {
  max-width: 1200px;
  margin-inline: auto;
}

/* --- hero ----------------------------------------------------------------- */
.wp-block-cover.hero--simple {
  padding-block: clamp(96px, 15vw, 190px);
}
.wp-block-cover.hero--simple .wp-block-cover__inner-container {
  max-width: 44rem;
  text-align: center;
}
.wp-block-cover.hero--simple h1 {
  text-shadow: 0 2px 22px rgba(20, 22, 8, .5);
  margin-bottom: .6rem;
}
.wp-block-cover.hero--simple p {
  text-shadow: 0 1px 14px rgba(20, 22, 8, .5);
  max-width: 30em;
  margin-inline: auto;
}
.wp-block-cover.hero--simple .wp-block-buttons { margin-top: 1.8rem; }

/* --- trust strip ---------------------------------------------------------- */
.wp-block-group.trust { padding-block: clamp(24px, 3vw, 38px); }
.wp-block-group.trust .wp-block-columns { gap: 1rem; align-items: start; }
.wp-block-group.trust .wp-block-column {
  text-align: center;
  padding-inline: .6rem;
  /* the four items must sit on one baseline even when a heading wraps */
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.wp-block-group.trust h3 {
  font-family: var(--font-cond, 'Barlow Condensed', sans-serif);
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  line-height: 1.15;
  margin: 0;
  min-height: 2.3em;                 /* one or two lines, same height either way */
  display: flex;
  align-items: center;
  justify-content: center;
}
.wp-block-group.trust p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, .74);
}

/* --- section headings ----------------------------------------------------- */
main .wp-block-group .eyebrow {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  font-size: .82rem;
  margin-bottom: .5rem;
  /* the brand leaf green is only 3.3:1 on cream at this size, which fails AA for
     small text. This darker leaf keeps the colour family and clears 4.5:1 on
     white, off-white and cream alike. */
  color: #5C6626 !important;
}
main .on-dark .eyebrow,
main .section--dark .eyebrow { color: var(--gold, #e5b117) !important; }
main .wp-block-group > h2 { margin-bottom: .7rem; }

/* --- three-up card rows --------------------------------------------------- */
main .wp-block-columns { gap: clamp(1.2rem, 2.4vw, 2rem); }
main .wp-block-columns .wp-block-column > .wp-block-image { margin-bottom: .9rem; }
main .wp-block-columns .wp-block-column > .wp-block-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
}
main .wp-block-columns .wp-block-column h3 { margin: 0 0 .4rem; }
main .wp-block-columns .wp-block-column p { margin: 0 0 .6rem; }

/* "Learn more" on the service cards.

   These were inheriting body colour at weight 400, so they read as a sentence
   rather than a link and Jake could not pick them out. He suggested yellow, but
   the brand gold is about 1.9:1 on white, which fails AA badly for text this
   size. The gold goes on the underline instead, where it is the thing that
   catches the eye, and the words themselves take the darker leaf that already
   clears 4.5:1 elsewhere on the site. */
main .wp-block-column a.link-more,
main a.link-more {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 700;
  color: #5C6626;
  padding-block: .35rem;              /* clears the 24px tap target on its own */
  border-bottom: 2px solid var(--gold, #e5b117);
  line-height: 1.3;
  transition: color .15s ease, border-color .15s ease, gap .15s ease;
}
main a.link-more::after {
  content: "";
  width: .5em;
  height: .5em;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  rotate: 45deg;
  translate: 0 1px;
}
main a.link-more:hover,
main a.link-more:focus-visible {
  color: var(--olive, #363815);
  border-color: var(--olive, #363815);
  gap: .65rem;
}

/* The white bands on every inner page.

   page.php wraps the editor content in <section class="section">, and .section
   pads 56-110px top and bottom. Every block group inside already brings its own
   section padding, so the wrapper's was extra: a white band between the hero and
   the first block, and -- below the full bleed CTA -- a white stripe between two
   dark sections just above the footer. The home page has no wrapper, which is why
   it was the one page without the gap.

   Only dropped where a block group is actually at that edge. A page that opens
   on plain text, like the privacy policy, keeps the padding it needs. */
main > .section:has(> .wrap > .entry > .wp-block-group:first-child) { padding-top: 0; }
main > .section:has(> .wrap > .entry > .wp-block-group:last-child)  { padding-bottom: 0; }

/* --- inclusions checklist ------------------------------------------------- */
ul.inclusions {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .85rem;
}
ul.inclusions li {
  position: relative;
  padding-left: 2rem;
  line-height: 1.5;
}
ul.inclusions li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background: var(--leaf, #859037);
  /* a tick, drawn with a mask so it inherits the brand colour */
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 72% no-repeat,
           linear-gradient(#000 0 0);
          mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 72% no-repeat,
           linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* Contact page opening hours.

   ul.inclusions carries margin:0 so the tick lists on the service pages sit tight
   under their headings. On the contact page that put "Opening hours" straight on
   top of "Monday to Friday", and "Sunday" straight on top of the line below it,
   which is what Jake asked to open up. Scoped to .hours so nothing else moves. */
ul.inclusions.hours { margin-block: 1.25rem 1.6rem; }
ul.inclusions.hours + p { margin-top: 0; }

/* --- promise cards -------------------------------------------------------- */
.wp-block-columns.promise-cols .wp-block-column {
  background: #fff;
  border: 1px solid rgba(54, 56, 21, .12);
  border-radius: 18px;
  padding: 1.6rem 1.5rem;
}
.wp-block-columns.promise-cols h3 { margin-top: 0; }

/* --- CTA band ------------------------------------------------------------- */
.wp-block-group.cta-band { padding-block: clamp(3rem, 5vw, 4.4rem); }
.wp-block-group.cta-band h2 { margin-top: 0; }

/* --- Contact Form 7 ------------------------------------------------------- */
.dawson-form .f-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.dawson-form .f-field { margin: 0 0 1rem; }
.dawson-form label {
  display: block;
  font-weight: 600;
  font-size: .93rem;
  margin-bottom: .35rem;
  color: var(--ink, #22240d);
}
.dawson-form .req { color: #b3261e; }
.dawson-form input[type=text],
.dawson-form input[type=tel],
.dawson-form input[type=email],
.dawson-form select,
.dawson-form textarea {
  width: 100%;
  padding: .78rem .9rem;
  border: 1px solid rgba(54, 56, 21, .22);
  border-radius: 11px;
  background: #fff;
  font: inherit;
  color: inherit;
}
.dawson-form input:focus-visible,
.dawson-form select:focus-visible,
.dawson-form textarea:focus-visible {
  outline: 3px solid var(--gold, #e5b117);
  outline-offset: 1px;
  border-color: transparent;
}
.dawson-form .f-submit { margin: 1.2rem 0 .5rem; }
.dawson-form input[type=submit] { cursor: pointer; }
.dawson-form .f-note {
  font-size: .88rem;
  color: var(--muted, #6e7357);
  margin: 0;
}
.wpcf7-response-output {
  margin: 1rem 0 0 !important;
  padding: .85rem 1rem !important;
  border-radius: 11px !important;
  border-width: 1px !important;
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--leaf, #859037) !important;
  background: rgba(133, 144, 55, .1);
}
.wpcf7-not-valid-tip { font-size: .85rem; }

@media (max-width: 700px) {
  .dawson-form .f-row { grid-template-columns: 1fr; gap: 0; }
  .wp-block-group.trust h3 { min-height: 0; }
}

/* --- build credit --------------------------------------------------------- */
/* Deliberately quiet: same size as the legal line, lower contrast than the
   links beside it, no accent colour, no hover flourish. It should read as a
   footnote, not as advertising on the client's site. */
.footer-bottom .f-credit {
  color: rgba(230, 230, 191, .42);
  text-decoration: none;
}
.footer-bottom .f-credit:hover,
.footer-bottom .f-credit:focus-visible {
  color: rgba(230, 230, 191, .72);
  text-decoration: underline;
}

/* --- back to top ---------------------------------------------------------- */
/* Sits above the mobile action bar rather than on top of it, and stays clear of
   the iOS home indicator. Hidden until there is actually something to scroll
   back up to, so it never covers content on a short page. */
.to-top {
  position: fixed;
  right: clamp(14px, 3vw, 26px);
  bottom: clamp(14px, 3vw, 26px);
  z-index: 60;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--olive, #363815);
  color: var(--cream, #e6e6bf);
  box-shadow: 0 6px 20px rgba(20, 22, 8, .28);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease, background .18s ease;
}
.to-top[hidden] { display: none; }
.to-top.is-on { opacity: 1; transform: none; }
.to-top:hover { background: var(--leaf, #859037); }
.to-top:focus-visible { outline: 3px solid var(--gold, #e5b117); outline-offset: 3px; }
.to-top svg { width: 21px; height: 21px; }

@media (max-width: 860px) {
  /* clear the fixed Call / Text / Free quote bar */
  .to-top { bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 12px); }
}

@media (prefers-reduced-motion: reduce) {
  .to-top { transition: opacity .01s; transform: none; }
}

/* --- very narrow phones (Galaxy Fold, 280px) ------------------------------ */
/* At 280px the header's phone link, quote button and burger together are wider
   than the screen, which pushed the whole document sideways. The quote button is
   the one to drop: the sticky Call / Text / Free quote bar at the bottom of the
   screen already carries it, so nothing is lost. */
@media (max-width: 380px) {
  .nav-cta .btn { display: none; }
  .site-header .wrap { padding-inline: 12px; }
  .brand img { height: 38px; }
}

/* Belt and braces: nothing may widen the page, whatever the content. */
html, body { overflow-x: hidden; max-width: 100%; }

/* --- tap targets ---------------------------------------------------------- */
/* WCAG 2.5.8 asks for 24x24 CSS pixels. Inline links inside cards and lists were
   coming out at 19-20px, so they get vertical padding on touch pointers only,
   which leaves the desktop layout untouched. */
@media (pointer: coarse) {
  main .wp-block-column p a,
  main .wp-block-column h3 a,
  main .inclusions a,
  .footer-top a,
  .footer-bottom a,
  .crumbs a,
  .crumbs span,
  .drawer-nav a,
  main .wp-block-group > p a {
    display: inline-block;
    padding-block: 6px;
    min-height: 24px;
  }
  .drawer nav a { padding-block: 12px; min-height: 44px; display: flex; align-items: center; }
  /* The rule above turns every footer link into a padded inline-block so small
     text links clear 24px. The social icons are already 40px circles, and on
     them it cancelled the flex centring and pushed each glyph 9.5px left and
     3.5px up -- invisible with a mouse, obvious on Jake's phone. */
  .footer-top .f-social a { display: inline-flex; padding: 0; min-height: 0; }
  .action-bar a { min-height: 48px; }
}

/* --- breathing room on phones --------------------------------------------- */
@media (max-width: 700px) {
  /* the tick list is a two column grid on desktop, which on a phone squeezed the
     bold label into a three line column beside its own description */
  ul.inclusions { grid-template-columns: 1fr; gap: 1.15rem; }
  ul.inclusions li { display: block; }
  ul.inclusions li strong,
  ul.inclusions li b {
    display: block;
    margin-bottom: .15rem;
  }
}

/* --- the drawer should not touch the edge of the screen ------------------- */
.drawer-panel {
  border-radius: 18px 0 0 18px;
}
@media (max-width: 700px) {
  .drawer-panel {
    width: min(86vw, 380px);
    padding-inline: 22px;
  }
  .drawer nav a { padding-inline: 2px; }
}

/* --- breadcrumbs ---------------------------------------------------------- */
/* site.css styles .crumbs as a flat flex row. The theme outputs a semantic <ol>,
   which is the better markup, so the list styling is reset here instead of
   dropping back to loose <a> and <span> tags. */
.crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
}
.crumbs li { display: flex; align-items: center; gap: .45rem; }
.crumbs li + li::before { content: "/"; opacity: .45; }
.crumbs [aria-current="page"] { opacity: .72; }

/* Sections that want a narrower reading column. Previously these were built as
   non-full-width groups, which WordPress constrained twice over and left sitting
   off to the left of the page. */
main > .wp-block-group.section--narrow > * {
  max-width: var(--wp--style--global--content-size, 1080px);
  margin-inline: auto;
}

/* --- lists on dark sections ----------------------------------------------- */
/* .inclusions inherits ink-coloured text from the light sections, which on the
   olive "Why Dawson" band left the labels almost invisible. It also inherits a
   two column grid, which inside an already-narrow split column broke the bold
   labels one word per line. Both are fixed here rather than in site.css so the
   light sections are untouched. */
.on-dark ul.inclusions,
.section--dark ul.inclusions {
  grid-template-columns: 1fr;
  gap: 1.15rem;
}
.on-dark ul.inclusions li,
.section--dark ul.inclusions li {
  display: block;
  color: rgba(255, 255, 255, .88);
}
.on-dark ul.inclusions li strong,
.on-dark ul.inclusions li b,
.section--dark ul.inclusions li strong,
.section--dark ul.inclusions li b {
  display: block;
  margin-bottom: .15rem;
  color: #fff;
}
.on-dark ul.inclusions li::before,
.section--dark ul.inclusions li::before {
  background: var(--gold, #e5b117);
}

/* the same band's intro paragraph and any loose text */
.on-dark p, .section--dark p { color: rgba(255, 255, 255, .86); }
.on-dark h2, .on-dark h3,
.section--dark h2, .section--dark h3 { color: #fff; }

/* --- centre the page hero and the closing band ---------------------------- */
/* The rest of the site is centred, so the breadcrumb / title band and the CTA
   band were the two places still reading left. Centring them makes every page
   line up on one axis. */
.page-hero .wrap > * { margin-inline: auto; }
.page-hero .crumbs { justify-content: center; }
.page-hero h1,
.page-hero > .wrap > p { text-align: center; }
.page-hero h1 { max-width: 22ch; }
.page-hero > .wrap > p { max-width: 60ch; }
.page-hero .btn-row { justify-content: center; }

.cta-band .wrap,
.wp-block-group.cta-band > * { text-align: center; }
.wp-block-group.cta-band h2 { margin-inline: auto; max-width: 20ch; }
.wp-block-group.cta-band p { margin-inline: auto; max-width: 52ch; }
.wp-block-group.cta-band .wp-block-buttons { justify-content: center; }

/* site.css line 515 pins the hero wrap left with margin-inline:0. The rest of
   the site is centred, so it is overridden here rather than edited there. */
.page-hero .wrap { margin-inline: auto; }

/* --- call to action buttons ----------------------------------------------- */
/* Client asked for the "Get a free quote" text to be larger and bolder. Applied
   to every .btn so the header, hero, footer and sticky bar stay consistent. */
.btn {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: .01em;
}
.btn--lg { font-size: 1.18rem; }
.wp-block-button__link { font-size: 1.1rem; font-weight: 800; }
.wp-block-cover.hero--simple .wp-block-button__link {
  font-size: 1.2rem;
  padding-block: 1rem;
  padding-inline: 2rem;
}
@media (max-width: 520px) {
  .btn { font-size: 1.05rem; }
  .wp-block-cover.hero--simple .wp-block-button__link { font-size: 1.12rem; }
}

/* --- eyebrow: a rule on BOTH sides, centred -------------------------------- */
/* site.css draws one gold dash before the label. The client wants it flanked. */
main .wp-block-group .eyebrow.is-centred::after,
.page-hero .eyebrow::after {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--gold, #e5b117);
  flex: none;
  border-radius: 2px;
}
main .wp-block-group .eyebrow.is-centred {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
}

/* --- suburb pages: air between the intro and the ticked list --------------- */
main .wp-block-group.section > p + .wp-block-columns,
main .wp-block-group.section > p + ul.inclusions,
main .wp-block-group.section > h2 + ul.inclusions {
  margin-top: clamp(1.6rem, 3vw, 2.6rem);
}

/* --- eyebrow: a rule on BOTH sides, centred -------------------------------- */
/* site.css draws one gold dash before the label. The client wants it flanked. */
main .wp-block-group .eyebrow.is-centred::after,
.page-hero .eyebrow::after {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--gold, #e5b117);
  flex: none;
  border-radius: 2px;
}
main .wp-block-group .eyebrow.is-centred {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
}

/* --- suburb pages: air between the intro and the ticked list --------------- */
main .wp-block-group.section > p + .wp-block-columns,
main .wp-block-group.section > p + ul.inclusions,
main .wp-block-group.section > h2 + ul.inclusions {
  margin-top: clamp(1.6rem, 3vw, 2.6rem);
}

/* --- hero on phones -------------------------------------------------------- */
/* The wide hero photo in a portrait box showed only 39% of it, which is why it
   read as over cropped on a phone. A portrait crop of the same photo is swapped
   in as a background so the deck, the lawn and the grass tree all stay in frame.
   The <img> is hidden rather than removed so the block still validates. */
@media (max-width: 780px) {
  .wp-block-cover.hero--simple {
    background-image: url("https://dawsonlandscaping.com.au/wp-content/uploads/2026/09/hero-home-v4-mobile-768x1024.webp");
    background-size: cover;
    background-position: center;
  }
  .wp-block-cover.hero--simple > .wp-block-cover__image-background { display: none; }
}

/* --- lighter overlay ------------------------------------------------------- */
/* The photo is dark enough on its own through the middle. This lifts the wash so
   the garden shows properly, and keeps just enough behind the text to stay
   readable. Contrast is measured, not guessed: see build/finalcheck.py. */
.wp-block-cover.hero--simple .wp-block-cover__background {
  background: linear-gradient(
    180deg,
    rgba(26, 28, 12, .30) 0%,
    rgba(26, 28, 12, .22) 38%,
    rgba(26, 28, 12, .52) 100%
  ) !important;
  opacity: 1 !important;
}
.wp-block-cover.hero--simple h1 { text-shadow: 0 2px 18px rgba(16, 18, 6, .78); }
.wp-block-cover.hero--simple p  { text-shadow: 0 1px 14px rgba(16, 18, 6, .82); }

/* --- hero height on desktop ------------------------------------------------ */
/* The cover block carries an inline min-height:560px, so a plain rule could not
   change it and object-fit kept trimming the photo. Overriding it lets the hero
   take the picture's own 16:9, which is why almost nothing is cut now. The vh
   cap stops it swallowing a big monitor. */
@media (min-width: 781px) {
  .wp-block-cover.hero--simple {
    /* WordPress writes `min-height:560px; aspect-ratio:unset` inline on a cover
       block, so both need !important or the ratio never applies. */
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    /* max-height alone would shrink the WIDTH to keep the ratio, leaving gaps
       either side on a wide monitor. Pinning the width keeps it full bleed and
       lets the cap trim a little height instead. */
    width: 100% !important;
    max-height: 84vh;
    padding-block: clamp(48px, 6vw, 96px);
  }
}

/* --- no overlay ------------------------------------------------------------- */
/* The client wants the photograph's own colour, with nothing tinted over it, so
   the cover's dim layer is switched off entirely. Legibility is carried by the
   type itself: a tight dark shadow on the letterforms, which darkens only the
   pixels immediately around each stroke and leaves the garden untouched. */
.wp-block-cover.hero--simple .wp-block-cover__background {
  background: none !important;
  opacity: 0 !important;
}
.wp-block-cover.hero--simple h1 {
  text-shadow:
    0 1px 3px rgba(10, 12, 4, .95),
    0 2px 12px rgba(10, 12, 4, .85),
    0 0 42px rgba(10, 12, 4, .6);
}
.wp-block-cover.hero--simple p {
  text-shadow:
    0 1px 3px rgba(10, 12, 4, .95),
    0 2px 10px rgba(10, 12, 4, .88),
    0 0 34px rgba(10, 12, 4, .6);
}

/* --- ticked lists: one column ---------------------------------------------- */
/* site.css lays .inclusions out as a two column grid. With items of unequal
   length that produces rows of different heights and an orphan in the last row,
   which is the uneven bullet spacing on the project pages. A single column keeps
   the rhythm even. Where the design genuinely wants two columns, the home page
   and Our Promise put two separate lists inside block columns, so those still
   read as two columns. */
main ul.inclusions {
  grid-template-columns: 1fr !important;
  gap: .8rem !important;
}
main ul.inclusions li {
  display: block;
  break-inside: avoid;
}
main ul.inclusions li strong,
main ul.inclusions li b {
  display: block;
  margin-bottom: .1rem;
}

/* --- one left edge ---------------------------------------------------------- */
/* site.css gives .inclusions its own max-width:1000px and centres it, so on a
   wide screen the list sat 120px left of every heading and paragraph beside it.
   Everything in a section now shares the content width, so they line up. */
main ul.inclusions {
  max-width: var(--wp--style--global--content-size, 1080px) !important;
  margin-inline: auto !important;
  width: 100%;
}
/* inside a block column the list should fill the column, not the page */
main .wp-block-column ul.inclusions {
  max-width: none !important;
}

/* --- the logo watermark in the closing band -------------------------------- */
/* The CTA band watermark.

   The artwork is Jake's own file at full strength and the fade happens here, in
   CSS, after the browser has drawn it. That order matters: a pre-faded file loses
   its hairlines when it is scaled down, and a tree missing the ground line under
   its trunk reads as one that has been cut off. Fade last, and every stroke
   survives.

   Anchored left where he wants it, sized by height with headroom to spare so the
   band's overflow can never reach it, at the artwork's own proportions. */
.wp-block-group.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* ::after, not ::before. site.css already owns ::before for the gold corner glow,
   and that rule carries border-radius:50%. Sharing the element meant the mark was
   being clipped to an ellipse -- which took the corners off the canopy and both
   ends off the ground line, and is the whole reason it kept looking cut. Every
   artwork change was fixing something that was never broken. */
.wp-block-group.cta-band::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  /* var(--dawson-mark) carries a filemtime query from inc/assets.php, so a new
     watermark is a new URL and the CDN cannot keep serving the old one. */
  background: var(--dawson-mark, url("../img/mark-cream.png")) center / contain no-repeat;

  /* height first, width follows the artwork, so it can never be clipped */
  /* Whole pixels everywhere. 6vw put the box on a fractional x, and 1088/1001
     made it 271.7px wide, so the browser resampled a 272px image into a box it
     did not quite fit and the thinnest strokes -- the ground line under the
     trunk -- blurred away. 272x250 at a fixed left draws the file 1:1. */
  height: min(66%, 250px);
  aspect-ratio: 272 / 250;
  width: auto;

  left: 88px;
  top: 50%;
  translate: 0 -50%;
  opacity: .15;
}

@media (max-width: 1040px) {
  .wp-block-group.cta-band::after { left: 40px; }
}

@media (max-width: 820px) {
  .wp-block-group.cta-band::after {
    /* Still left, just tucked in and a shade lighter, because the copy runs the
       full width of a phone and has to stay the thing you read first. */
    height: 175px;
    width: 190px;
    left: 12px;
    opacity: .12;
  }
}