/** Shopify CDN: Minification failed

Line 1215:2 Unexpected "{"
Line 1215:3 Expected identifier but found "%"
Line 1216:28 Unexpected bad string token
Line 1216:75 Unterminated string token
Line 1218:69 Unterminated string token
Line 1219:3 Expected identifier but found "%"

**/
/* START_SECTION:about-hero (INDEX:0) */
.ah__inner {
    display: grid;
    gap: 3.2rem;
    align-items: center;
  }
  .ah__eyebrow {
    display: inline-block;
    margin-bottom: 1.2rem;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .ah__heading {
    margin: 0 0 1.6rem;
    font-size: 4.6rem;
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.035em;
  }
  .ah__lead {
    font-size: 1.8rem;
    line-height: 1.55;
  }
  .ah__lead p {
    margin: 0;
  }
  .ah__lead p + p {
    margin-top: 1.2rem;
  }
  .ah__lead strong {
    color: rgb(20, 51, 4);
  }

  .ah__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-top: 2.4rem;
  }
  a.ah__button,
  a.ah__button:hover,
  a.ah__button:focus {
    /* base.css underlines anchors and loads after this stylesheet, so the
       override has to win on specificity rather than order. */
    text-decoration: none;
  }
  a.ah__button {
    display: inline-block;
    padding: 1.4rem 2.8rem;
    font-size: 1.5rem;
    font-weight: 700;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }
  a.ah__button--secondary {
    border: 1px solid #ded7c8;
    background: transparent;
  }

  .ah__media {
    overflow: hidden;
  }
  .ah__image {
    display: block;
    width: 100%;
    height: auto;
  }

  .ah__pledge {
    padding: 2.8rem;
    border: 1px solid #ded7c8;
  }
  .ah__pledge-title {
    margin: 0 0 1.2rem;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.01em;
  }
  .ah__pledge-text {
    font-size: 1.5rem;
    line-height: 1.6;
  }
  .ah__pledge-text p {
    margin: 0;
  }
  .ah__pledge-text p + p {
    margin-top: 1rem;
  }

  @media screen and (max-width: 989px) {
    .ah__inner {
      grid-template-columns: minmax(0, 1fr) !important;
      gap: 2.4rem;
    }
  }
  @media screen and (max-width: 749px) {
    .ah__heading {
      font-size: 3.2rem;
    }
    .ah__lead {
      font-size: 1.6rem;
    }
    .ah__pledge {
      padding: 2rem;
    }
    .ah__buttons {
      gap: 1rem;
    }
    a.ah__button {
      flex: 1 1 100%;
      text-align: center;
    }
  }
/* END_SECTION:about-hero */
/* START_SECTION:about-story (INDEX:1) */
.as__inner {
    display: grid;
    gap: 4rem;
    align-items: start;
  }
  .as__eyebrow {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .as__heading {
    margin: 0 0 1.8rem;
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
  }
  .as__prose {
    /* A measure this wide is comfortable for long-form; the grid track
       is already narrower than the page, so this only bites on very
       wide screens. */
    max-width: 62rem;
    font-size: 1.6rem;
    line-height: 1.7;
  }
  .as__prose p {
    margin: 0 0 1.4rem;
  }
  .as__prose p:last-child {
    margin-bottom: 0;
  }
  .as__prose strong {
    font-weight: 700;
  }

  .as__aside {
    /* Sticky so the commitments stay alongside the prose as it scrolls
       past on a tall desktop screen. */
    position: sticky;
    top: 2rem;
  }
  .as__card {
    padding: 2.8rem;
    border: 1px solid #ded7c8;
  }
  .as__card-heading {
    margin: 0 0 1.8rem;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.01em;
  }
  .as__list {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .as__item {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
  }
  .as__tick {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
  }
  .as__tick svg {
    display: block;
    width: 1.2rem;
    height: 1.2rem;
  }
  .as__item-body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
  }
  .as__item-title {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.4;
  }
  .as__item-text {
    font-size: 1.3rem;
    line-height: 1.55;
  }
  .as__card-note {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #ded7c8;
    font-size: 1.3rem;
    line-height: 1.55;
  }
  .as__card-note p {
    margin: 0;
  }

  .as__quote {
    margin: 4rem 0 0;
    padding: 3.6rem 4rem;
  }
  .as__quote-text {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.02em;
    text-indent: 0;
  }
  .as__quote-attrib {
    margin-top: 1.4rem;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  @media screen and (max-width: 989px) {
    .as__inner {
      grid-template-columns: minmax(0, 1fr) !important;
      gap: 2.8rem;
    }
    .as__aside {
      position: static;
    }
  }
  @media screen and (max-width: 749px) {
    .as__heading {
      font-size: 2.4rem;
    }
    .as__card {
      padding: 2rem;
    }
    .as__quote {
      margin-top: 2.8rem;
      padding: 2.4rem 2rem;
    }
    .as__quote-text {
      font-size: 1.9rem;
    }
  }
/* END_SECTION:about-story */
/* START_SECTION:announcement-marquee (INDEX:3) */
.marquee-bar {
    overflow: hidden;
    white-space: nowrap;
    padding: 0.8rem 0;
    font-size: 1.1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    max-height: 6rem;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .marquee-bar__inner-anim {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
  }
  html.header-condensed .marquee-bar {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
  }
  html.header-condensed .marquee-bar .marquee-bar__inner-anim {
    transform: translateY(-100%);
    opacity: 0;
  }
  .marquee-bar__viewport {
    overflow: hidden;
  }
  .marquee-bar__track {
    display: flex;
    width: max-content;
    animation-name: marquee-scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  .marquee-bar__set {
    display: flex;
    flex: none;
  }
  .marquee-bar__item {
    padding-right: 3.2rem;
  }
  /* --- One-at-a-time mode --------------------------------------------------
     The lines are stacked on top of each other so the bar is as tall as one
     line and never reflows as the message changes. The rotator itself is the
     positioning context and is sized by the tallest line, which is why the
     lines are absolute but the first one is not removed from the flow. */
  .marquee-bar__rotator {
    position: relative;
    display: block;
    text-align: center;
    padding: 0 1.6rem;
  }
  .marquee-bar__line {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.6rem;
    opacity: 0;
    /* A small lift as it goes and a small drop as it arrives: enough to read
       as a change of message rather than a flicker. */
    transform: translateY(0.4rem);
    transition-property: opacity, transform;
    transition-timing-function: ease;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .marquee-bar__line.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  /* Holds the bar open. Hidden from the eye and from screen readers, it exists
     only so the row has a height of its own. */
  .marquee-bar__rotator::before {
    content: '\00a0';
    display: block;
    visibility: hidden;
  }
  @media (prefers-reduced-motion: reduce) {
    .marquee-bar__line {
      transition: none;
      transform: none;
    }
  }

  @keyframes marquee-scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%);
    }
  }
/* END_SECTION:announcement-marquee */
/* START_SECTION:contact-faq (INDEX:19) */
.cfaq__head {
    max-width: 60rem;
    margin-bottom: 2.8rem;
  }
  .cfaq__heading {
    margin: 0 0 0.8rem;
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  .cfaq__sub {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.6;
  }

  .cfaq__list {
    /* A CSS multi-column list keeps the accordion balanced across two
       columns without a grid's fixed row heights, so an open answer
       pushes only the items below it. */
    column-gap: 2.4rem;
  }
  .cfaq__item {
    /* break-inside prevents a column boundary splitting one question
       from its answer. */
    break-inside: avoid;
    display: inline-block;
    width: 100%;
    margin-bottom: 1.2rem;
    padding: 0 2rem;
    border: 1px solid #ded7c8;
    border-radius: 12px;
    transition: border-color 0.15s ease;
  }
  .cfaq__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    padding: 1.8rem 0;
    cursor: pointer;
    list-style: none;
  }
  .cfaq__summary::-webkit-details-marker {
    display: none;
  }
  .cfaq__summary::marker {
    content: '';
  }
  .cfaq__question {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.4;
  }
  .cfaq__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    transition: transform 0.18s ease;
  }
  .cfaq__icon svg {
    width: 1.2rem;
    height: 1.2rem;
  }
  .cfaq__item[open] .cfaq__icon {
    transform: rotate(180deg);
  }
  .cfaq__answer {
    padding-bottom: 1.8rem;
    font-size: 1.4rem;
    line-height: 1.65;
  }
  .cfaq__answer > :first-child {
    margin-top: 0;
  }
  .cfaq__answer > :last-child {
    margin-bottom: 0;
  }
  .cfaq__answer a {
    color: inherit;
  }

  .cfaq__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.6rem 2.4rem;
    margin-top: 2.4rem;
    padding: 2.6rem 3.2rem;
  }
  .cfaq__cta-heading {
    margin: 0 0 0.4rem;
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.01em;
  }
  .cfaq__cta-text {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.55;
  }
  a.cfaq__cta-button,
  a.cfaq__cta-button:hover,
  a.cfaq__cta-button:focus {
    /* Same reason as elsewhere: base.css underlines anchors and loads
       after this compiled stylesheet. */
    text-decoration: none;
  }
  a.cfaq__cta-button {
    flex: 0 0 auto;
    display: inline-block;
    padding: 1.3rem 2.8rem;
    border-radius: 10px;
    font-size: 1.4rem;
    font-weight: 700;
  }

  @media screen and (max-width: 989px) {
    .cfaq__list {
      columns: 1 !important;
    }
  }
  @media screen and (max-width: 749px) {
    .cfaq__item {
      padding: 0 1.6rem;
    }
    .cfaq__cta {
      padding: 2rem;
    }
    a.cfaq__cta-button {
      width: 100%;
      text-align: center;
    }
  }
/* END_SECTION:contact-faq */
/* START_SECTION:custom-footer (INDEX:23) */
.tf {
    display: block;
  }
  .tf__top {
    display: grid;
    align-items: start;
    border-bottom: 1px solid;
  }
  /* The mark and the sentence side by side, so the band is one line deep on a
     desktop and two on a phone — it is an introduction, not a section. */
  .tf__band {
    padding-bottom: 2.4rem;
  }
  .tf__brand--band {
    display: flex;
    align-items: center;
    gap: 1.6rem;
  }
  .tf__brand--band .tf__logo,
  .tf__brand--band .tf__logo-text {
    flex: none;
  }
  .tf__brand--band .tf__blurb {
    /* No top margin: in the band it sits beside the mark, not under it. */
    margin: 0;
    /* Wider than the column version, which was sized for a narrow column. */
    max-width: 70ch;
  }
  .tf__brand--band .tf__badges {
    margin-top: 1.2rem;
  }
  @media screen and (max-width: 749px) {
    .tf__brand--band {
      align-items: flex-start;
      gap: 1.2rem;
    }
    .tf__brand--band .tf__blurb {
      max-width: none;
    }
  }
  .tf__logo {
    display: block;
    height: auto;
    max-width: 100%;
  }
  /* A transparent PNG or SVG can simply be flooded white. */
  .tf__logo--white {
    filter: brightness(0) invert(1);
  }
  .tf__logo--dark {
    filter: brightness(0);
  }
  /* For a JPG, which always carries an opaque background: invert it so the
     white surround becomes black and the artwork becomes light, then blend
     with screen, under which black is a no-op. The surround disappears and a
     clean light version of the mark is left on the footer colour. */
  .tf__logo--knockout {
    filter: grayscale(1) invert(1) brightness(1.5) contrast(1.15);
    mix-blend-mode: screen;
  }
  /* Tile (2026-09-29, owner): square logo on a small rounded light panel, with
     the name and sentence beside it, as on the Total Sheds footer. The panel
     colour is the "Logo panel colour" setting; the size is "Logo width".
     tune: 4px = space round the logo inside the tile; 14px = corner rounding;
     2rem = name size. */
  .tf__id {
    display: flex;
    /* Top-aligned so the name starts level with the top of the tile. */
    align-items: flex-start;
    gap: 1.6rem;
    min-width: 0;
  }
  .tf__logo--tile {
    flex: none;
    padding: 4px;
    border-radius: 14px;
    box-sizing: border-box;
  }
  .tf__id-text {
    min-width: 0;
  }
  .tf__name {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    /* line-height 1 plus a small lift removes the space above the capitals,
       so the top of the "E" lines up with the top of the tile.
       tune: -0.1em = lift; 0.4rem = gap from name to sentence. */
    line-height: 1;
    margin-top: -0.1em;
  }
  .tf__id .tf__blurb {
    margin: 0.4rem 0 0;
  }
  /* Owner, 2026-09-29: the sentence wraps after "treated and", but the badges
     stay where they were — so the sentence's box keeps its old width (which is
     what places the badges) and only the text inside it is narrowed.
     tune: 36em = longest line of the sentence; 70ch = space before the badges. */
  .tf__brand--band .tf__id .tf__blurb {
    width: 70ch;
    max-width: 100%;
  }
  /* The rich-text sentence arrives in its own paragraph, whose default top
     margin was most of the gap under the name. */
  .tf__id .tf__blurb > p {
    margin: 0;
    max-width: 36em;
  }
  /* Keeps the logo's real colours by giving it a light panel to sit on. */
  .tf__logo--plate {
    padding: 10px 14px;
    border-radius: 6px;
    box-sizing: content-box;
  }
  .tf__logo-text {
    display: block;
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
  }
  .tf__blurb {
    margin: 1.4rem 0 0;
    line-height: 1.6;
    opacity: 0.75;
    max-width: 34ch;
  }
  .tf__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1.8rem 0 0;
    padding: 0;
    list-style: none;
  }
  .tf__badge {
    padding: 0.5rem 0.9rem;
    border: 1px solid;
    border-radius: 100px;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.8;
  }
  .tf__heading {
    margin: 0 0 1.4rem;
    font-family: var(--font-body-family);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.3;
  }
  .tf__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.9rem;
  }
  .tf__list a,
  .tf__contact,
  .tf__policies a {
    color: inherit;
    text-decoration: none;
    opacity: 0.75;
    transition: opacity 0.15s ease, color 0.15s ease;
  }
  .tf__list a:hover,
  .tf__contact:hover,
  .tf__policies a:hover {
    opacity: 1;
  }
  .tf__contact {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
  }
  .tf__contact--strong {
    font-size: 1.9rem;
    font-weight: 700;
    opacity: 1;
  }
  /* A long email address is one unbroken token, so without this it
     refused to wrap and spilled over the next footer column. */
  .tf__contact > span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .tf__contact-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 10px;
    /* Each contact method gets its own colour so the three rows read as
       three different things at a glance. A single neutral tile made
       them blur into one block. The tint and the stroke come from the
       same hue, set per row below. */
    background: color-mix(in srgb, var(--tf-icon, #a8ce8e) 22%, transparent);
    border: 1px solid color-mix(in srgb, var(--tf-icon, #a8ce8e) 38%, transparent);
    color: var(--tf-icon, #a8ce8e);
    transition: background-color 0.15s ease;
  }
  .tf__contact:hover .tf__contact-icon {
    background: color-mix(in srgb, var(--tf-icon, #a8ce8e) 34%, transparent);
  }
  .tf__contact-icon svg {
    display: block;
    width: 1.7rem;
    height: 1.7rem;
  }
  .tf__contact--phone {
    --tf-icon: #8FCB6E;
  }
  .tf__contact--email {
    --tf-icon: #E8B44A;
  }
  /* The address needs about 214px of column. Rather than trimming the type
     until it just fits at one particular width, the column is a query
     container and the link swaps to the word "Email" whenever the column is
     too narrow to hold the address honestly. */
  .tf__col {
    container-type: inline-size;
  }
  .tf__contact--email > .tf__contact-text {
    font-size: 1.35rem;
    letter-spacing: -0.005em;
    overflow-wrap: normal;
  }
  .tf__contact-short {
    display: none;
  }
  @container (max-width: 15.5rem) {
    .tf__contact-full {
      display: none;
    }
    .tf__contact-short {
      display: inline;
    }
  }
  @supports not (container-type: inline-size) {
    /* Older engines get the same swap on viewport width instead. */
    @media screen and (max-width: 1100px) and (min-width: 750px) {
      .tf__contact-full {
        display: none;
      }
      .tf__contact-short {
        display: inline;
      }
    }
  }
  .tf__contact--hours {
    --tf-icon: #8FB8D9;
  }

  .tf__hours {
    margin-bottom: 0.6rem;
  }
  .tf__hours-toggle {
    margin-bottom: 0;
    cursor: pointer;
    list-style: none;
  }
  .tf__hours-toggle::-webkit-details-marker {
    display: none;
  }
  .tf__hours-toggle::marker {
    content: '';
  }
  .tf__hours-label {
    font-weight: 600;
  }
  .tf__hours-caret {
    width: 1rem;
    height: 1rem;
    margin-left: 0.2rem;
    transition: transform 0.18s ease;
  }
  .tf__hours[open] .tf__hours-caret {
    transform: rotate(180deg);
  }
  .tf__hours-list {
    margin: 1rem 0 0;
    padding: 1.2rem 1.4rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    list-style: none;
    display: grid;
    gap: 0.7rem;
  }
  .tf__hours-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.6rem;
    font-size: 1.3rem;
    line-height: 1.4;
  }
  .tf__hours-day {
    opacity: 0.75;
  }
  .tf__hours-time {
    font-weight: 600;
    white-space: nowrap;
  }
  .tf__rte {
    margin-top: 1rem;
    line-height: 1.6;
    opacity: 0.75;
  }
  .tf__rte p {
    margin: 0 0 0.8rem;
  }
  .tf__newsletter-text {
    margin: 0 0 1.4rem;
    line-height: 1.6;
    opacity: 0.75;
  }
  .tf__form {
    margin: 0;
  }
  /* Input and button share one bordered box so the field reads as a single
     control rather than a stray outline floating in the middle of the page. */
  .tf__field {
    display: flex;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 4px;
    overflow: hidden;
  }
  .tf__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.2rem 1.4rem;
    background: none;
    border: none;
    color: inherit;
    font-family: inherit;
    font-size: 1.4rem;
  }
  .tf__input::placeholder {
    color: currentColor;
    opacity: 0.55;
  }
  .tf__input:focus {
    outline: none;
  }
  .tf__field:focus-within {
    border-color: rgba(255, 255, 255, 0.5);
  }
  .tf__submit {
    flex: none;
    padding: 0 1.8rem;
    border: none;
    font-family: inherit;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background-color 0.15s ease;
  }
  .tf__form-note {
    margin: 0.9rem 0 0;
    font-size: 1.3rem;
    opacity: 0.8;
  }
  .tf__form-note--error {
    opacity: 1;
  }
  .tf__social {
    display: flex;
    gap: 1.6rem;
    margin: 1.8rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 1.3rem;
  }
  .tf__social a {
    color: inherit;
    text-decoration: none;
    opacity: 0.75;
  }
  .tf__social a:hover {
    opacity: 1;
  }
  .tf__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.6rem 2.4rem;
    padding-top: 2.2rem;
    font-size: 1.25rem;
  }
  .tf__bottom-left,
  .tf__bottom-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem 2rem;
  }
  .tf__copy {
    opacity: 0.7;
  }
  .tf__policies {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.8rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .tf__vat {
    opacity: 0.7;
  }
  .tf__payments {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .tf__payment-icon {
    width: 3.6rem;
    height: 2.3rem;
    display: block;
  }

  @media screen and (max-width: 989px) {
    .tf__top {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }
  @media screen and (max-width: 749px) {
    /* The wide wordmark, description and badges cannot share one row on a
       phone without reducing the description to a column a few words wide.
       Stack the three pieces so every line uses the available viewport. */
    .tf__brand--band {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 1.4rem;
    }
    .tf__brand--band .tf__logo {
      width: auto;
      max-width: min(18rem, 62vw);
    }
    .tf__brand--band .tf__blurb,
    .tf__brand--band .tf__badges {
      width: 100%;
      min-width: 0;
      margin: 0;
    }
    .tf__brand--band .tf__blurb {
      line-height: 1.55;
      overflow-wrap: anywhere;
    }
    .tf__top {
      grid-template-columns: minmax(0, 1fr) !important;
    }
    .tf__col,
    .tf__list,
    .tf__list li,
    .tf__list a {
      min-width: 0;
      max-width: 100%;
    }
    .tf__list a {
      overflow-wrap: anywhere;
    }
    .tf__bottom {
      justify-content: flex-start;
    }
  }
/* END_SECTION:custom-footer */
/* START_SECTION:custom-header (INDEX:24) */
.header-wrapper-2 {
    position: relative;
    /* Above anything a section can reach. The open mega menu is inside this
       element, so whatever number is here is the ceiling for the menu too —
       it cannot rise above its own parent's place in the stack however high
       its own z-index goes. */
    z-index: 100;
  }
  .header-wrapper-2--sticky {
    position: sticky;
    top: 0;
  }
  html.header-condensed .header-wrapper-2--sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  /* No transition on this margin. Condensing swaps the header from sticky to
     fixed, which takes it out of flow and drops the page by the header's
     height in a single frame; the margin here is the compensation for exactly
     that. Animating the compensation over 0.4s meant the content visibly
     jumped up and then eased back down while you were still scrolling — the
     jitter in the first moment of every scroll, on every page. Applied
     instantly in the same frame as the position swap, the two cancel out and
     nothing moves. */
  #MainContent {
    transition: none;
  }
  .header-wrapper-2--border {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  .header-2 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem 2.6rem;
  }
  .header-2__logo {
    flex: none;
    display: flex;
  }
  .header-2__logo-image {
    height: 4.2rem;
    width: auto;
    display: block;
  }
  /* Both logos are in the markup so neither has to be swapped in after paint.
     The mark is hidden everywhere by default and revealed only inside the
     mobile stylesheet's breakpoint — without this it stacked above the
     wordmark on desktop. */
  .header-2__logo-image--mobile {
    display: none;
  }
  .header-2__search-row {
    flex: 1 1 44rem;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1.8rem;
    max-width: var(--header-search-max-width, 76rem);
  }
  .header-2__search-form {
    flex: 1 1 auto;
    min-width: 20rem;
  }
  .header-2__search-form .field {
    background: var(--header-search-bg, #EDECE7);
    border-radius: var(--header-search-radius, 6px);
    overflow: hidden;
  }
  .header-2__search-form .field:before {
    box-shadow: none;
  }
  .header-2__search-form .field:after {
    border-radius: var(--header-search-radius, 6px);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
  }
  .header-2__search-form .search__input.field__input {
    background: transparent;
    border-color: transparent;
    border-radius: var(--header-search-radius, 6px);
    padding-top: var(--header-search-padding-y, 12px);
    padding-bottom: var(--header-search-padding-y, 12px);
    padding-left: 5rem;
    padding-right: 1.4rem;
    height: var(--header-search-btn-size, 41px);
    font-size: 1.3rem;
  }
  .header-2__search-form .search__button.field__button {
    position: absolute;
    left: 0.6rem;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    height: var(--header-search-btn-size, 41px);
    width: 4.2rem;
  }
  .header-2__search-form .search__button.field__button > .svg-wrapper {
    height: 2rem;
    width: 2rem;
  }
  .header-2__search-form .search__input.field__input::placeholder {
    opacity: 1;
    color: rgba(18, 18, 18, 0.55);
  }
  .header-2__rating {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    white-space: nowrap;
    font-size: 1rem;
  }
  .header-2__rating-stars {
    display: flex;
    gap: 0.2rem;
  }
  .header-2__icons {
    margin-left: auto;
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--header-icon-gap, 2rem);
  }
  a.header-2__icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    position: relative;
    text-decoration: none;
    text-align: center;
  }
  .header-2__icon-label {
    white-space: nowrap;
    font-weight: var(--header-icon-label-weight, 500);
  }
  .header-2__icon--cart .cart-count-bubble {
    top: -0.4rem;
    right: -0.6rem;
    bottom: auto;
    left: auto;
    background-color: #5B8C42;
    color: #fff;
  }
  summary.header-2__delivery-button {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    white-space: nowrap;
    border-radius: var(--header-postcode-radius, 8px);
    padding: 1rem 1.6rem;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    background: var(--header-postcode-bg, #F1EAD9);
    border: 1px solid rgba(0, 0, 0, 0.08);
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  summary.header-2__delivery-button:hover {
    border-color: #5B8C42;
    color: #5B8C42;
    text-decoration: none;
  }
  .header-2__delivery-button::-webkit-details-marker {
    display: none;
  }

  /* Icon presentation: strip the pill chrome so it sits in the icon row
     as a peer of Saved / Contact / Sign in rather than as a button. The
     selectors are tag-qualified to match the pill rules above, which are
     `summary.header-2__delivery-button` and would otherwise win. */
  .header-2__delivery--icon summary.header-2__delivery-button {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 0;
    font-size: 1.1rem;
    font-weight: var(--header-icon-label-weight, 500);
    text-align: center;
  }
  .header-2__delivery--icon summary.header-2__delivery-button:hover {
    color: #5b8c42;
  }
  .header-2__delivery--icon .svg-wrapper svg {
    width: 2rem;
    height: 2rem;
  }
  .header-2__delivery--icon .header-2__delivery-label {
    white-space: nowrap;
  }
  .header-2__delivery-modal.modal__content {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
  }
  .header-2__delivery-modal .modal-overlay {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
  }
  {%- comment -%}
    The modal inherited Dawn's generic dialog styling — square corners, a
    black button and an unstyled input — which looked nothing like the
    rest of the site. It now uses the theme's own palette and shapes.
  {%- endcomment -%}
  .header-2__delivery-modal-content {
    position: relative;
    width: 42rem;
    max-width: calc(100vw - 4rem);
    background: #fff;
    color: #26261f;
    border-radius: 14px;
    padding: 2.8rem;
    box-shadow: 0 18px 50px rgba(20, 51, 4, 0.18);
  }
  .header-2__delivery-modal-content h3 {
    margin: 0 0 0.8rem;
    padding-right: 3.2rem;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: #143304;
  }
  .header-2__delivery-modal-content p {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.55;
    color: #5a5a4a;
  }
  .header-2__delivery-modal-content input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ded7c8;
    border-radius: 10px;
    background: #fdfbf6;
    padding: 1.3rem 1.5rem;
    margin: 1.6rem 0 1.2rem;
    /* 16px so iOS does not zoom the page when the field takes focus. */
    font-size: 1.6rem;
    font-family: inherit;
    color: #26261f;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .header-2__delivery-modal-content input::placeholder {
    color: #a8a894;
  }
  .header-2__delivery-modal-content input:focus,
  .header-2__delivery-modal-content input:focus-visible {
    outline: none;
    border-color: #5b8c42;
    box-shadow: 0 0 0 3px rgba(91, 140, 66, 0.18);
  }
  .header-2__delivery-modal-content .button {
    display: block;
    width: 100%;
    min-height: 0;
    padding: 1.4rem 2rem;
    border: 0;
    border-radius: 10px;
    background: #143304;
    color: #fff;
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0;
    cursor: pointer;
    transition: background-color 0.15s ease;
  }
  .header-2__delivery-modal-content .button::after {
    /* Dawn draws a shadow ring on .button via a pseudo-element. */
    display: none;
  }
  .header-2__delivery-modal-content .button:hover {
    background: #0e2603;
  }
  .header-2__delivery-footnote {
    margin-top: 1.4rem !important;
    text-align: center;
    font-size: 1.2rem;
    color: #8a8a74 !important;
  }
  /* Square bordered close button in the corner, matching the mock-up
     rather than Dawn's floating cross. */
  .header-2__delivery-modal .modal__close-button {
    position: absolute;
    top: 1.6rem;
    right: 1.6rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 1px solid #ded7c8;
    border-radius: 8px;
    background: #fff;
    color: #5a5a4a;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  .header-2__delivery-modal .modal__close-button:hover {
    border-color: #5b8c42;
    color: #143304;
  }
  .header-2__delivery-modal .modal__close-button svg {
    width: 1.4rem;
    height: 1.4rem;
  }
  .header-2__nav-row {
    /* The nav is a band, so it is ruled on both edges. With only a top rule
       it ran into the page with nothing closing it off. */
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    position: relative;
  }
  .header-2__nav-inner {
    display: flex;
    align-items: center;
    gap: var(--header-nav-gap, 0.8rem);
  }
  .page-width.header-2__nav-inner {
    padding-left: 6.3rem;
  }
  .header-2__nav-inner .header__menu-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 1.4rem;
    font-weight: var(--header-nav-weight, 600);
    font-size: var(--header-nav-size, 1.2rem);
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .header-2__nav-inner .header__menu-item span,
  .header-2__nav-inner .header__menu-item:hover span,
  .header-2__nav-inner details[open] > .header__menu-item {
    text-decoration: none;
  }
  .header-2__nav-inner .header__menu-item .icon-caret {
    position: static;
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    margin-left: 0.4rem;
    opacity: 0.45;
    vertical-align: middle;
    transition: color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
  }
  .header-2__nav-inner .header__menu-item:hover {
    background: #F1EAD9;
  }
  .header-2__nav-inner .header__menu-item:hover .icon-caret {
    color: #5B8C42;
    opacity: 1;
  }
  .header-2__nav-inner details[open] > .header__menu-item,
  .header-2__nav-inner header-menu:hover .header__menu-item:not(:hover) {
    background: #0E2603;
    color: #F5F1E6;
  }
  .header-2__nav-inner details[open] > .header__menu-item .icon-caret,
  .header-2__nav-inner header-menu:hover .header__menu-item:not(:hover) .icon-caret {
    color: #9CC17E;
    opacity: 1;
    transform: rotate(180deg);
  }
  .mega-menu__panel-wrap {
    display: none;
  }
  .header-2__nav-inner details[open] > .mega-menu__panel-wrap,
  .header-2__nav-inner header-menu:hover .mega-menu__panel-wrap {
    display: block;
  }

  /* Touch-screen extras for the dropdown (2026-09-30, owner) — only when a
     finger opened it ([data-touch-open]); mouse users never see them.
     tune: backdrop colour/opacity below. */
  .mega-menu__touchbar {
    display: none;
  }
  .header-2__nav-inner details[data-touch-open] .mega-menu__touchbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    padding: 1.4rem 0 0.2rem;
  }
  .mega-menu__shop-all {
    font-size: 1.5rem;
    font-weight: 700;
    color: #143304;
    text-decoration: none;
  }
  .mega-menu__close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid #DED7C8;
    border-radius: 50%;
    background: #fff;
    color: #143304;
    cursor: pointer;
  }
  .mega-touch-backdrop {
    display: none;
  }
  .mega-touch-open .mega-touch-backdrop {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: var(--timber-header-h, 120px);
    z-index: 40;
    background: rgba(20, 30, 15, 0.38);
  }

  /* Mega menu */
  .header-2__nav-inner header-menu > details {
    position: static;
  }
  /* The panel is laid over the page rather than pushing it down, so a change
     of height can never move the content underneath either. */
  .mega-menu__panel-wrap {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    /* Edge to edge. It was capped to the page width and rounded, which left
       the panel floating as a card with the page showing down either side —
       the header above it runs the full width, so a panel that hangs from it
       has to as well. The inner grid is still held to the page width by its
       own padding, so the content stays in line with everything else. */
    background: rgb(var(--color-background));
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    /* The deals strip is the last thing in here and paints to the very bottom
       edge; without this its corners would show the panel's white behind. */
    overflow: hidden;
  }
  .mega-menu {
    display: grid;
    /* minmax(0, 1fr) rather than a bare 1fr — the same trap already written
       up in best-sellers.liquid. A bare 1fr keeps a min-content floor, so a
       long product name ("Timber Decking Boards 32mm x 125mm") refused to
       shrink and widened the whole grid past its container instead. With
       margin: 0 auto centring that over-wide grid, it then overflowed BOTH
       sides and .mega-menu__panel-wrap's overflow: hidden silently sliced
       it — the featured column off the right, the deals strip off the left.
       minmax(0, …) removes the floor so the column can actually shrink. */
    grid-template-columns: 21rem 1px minmax(0, 1fr) 21rem;
    grid-template-areas: "sidebar divider content featured";
    gap: 0 2.6rem;
    /* No bottom padding: the deals strip closes the panel itself, and padding
       under it was the white band below the strip. The room between the
       columns and the strip is set on the strip's own top margin instead, so
       it is a gap rather than a border of empty panel. */
    padding: 2.6rem 0 0;
    /* Every panel is the same height whatever it holds. They were sized by
       their own contents, so moving the cursor from a menu with three rows to
       one with two made the panel jump — and with it everything on the page
       below. The tallest menu sets the number; the rest simply have space at
       the foot. */
    min-height: 32rem;
    /* Holds the columns to the page width while the panel behind them runs the
       full width of the window. */
    max-width: var(--page-width);
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .mega-menu__tab-radio {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
  }
  .mega-menu__eyebrow {
    margin: 0 0 1.2rem;
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(var(--color-foreground), 0.5);
  }
  .mega-menu__sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
  }
  .mega-menu__tab-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 1.1rem 1.4rem;
    border-radius: 6px;
    font-size: 1.4rem;
    font-weight: 600;
    color: rgba(var(--color-foreground), 0.85);
    cursor: pointer;
  }
  .mega-menu__tab-label svg {
    flex-shrink: 0;
    opacity: 0.4;
  }
  .mega-menu__divider {
    grid-area: divider;
    background: rgba(0, 0, 0, 0.08);
  }
  .mega-menu__content {
    grid-area: content;
  }
  .mega-menu__panel-body {
    display: none;
  }
  .mega-menu__grid {
    display: grid;
    /* Same reason as the outer grid above: these two tracks are what the
       long product names actually sit in, so the min-content floor has to
       come off here too or the outer fix alone achieves nothing. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem 3.2rem;
  }
  .mega-menu__product {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1rem 1.2rem;
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    /* Every row the same height whatever the name. A title long enough to wrap
       used to push its own row taller than the one beside it, and the whole
       grid lost its alignment. */
    min-height: 5.6rem;
  }
  .mega-menu__product-text {
    min-width: 0;
  }
  .mega-menu__product-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mega-menu__product-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 6px;
    background: #F1EAD9;
    color: #2B3B1E;
  }
  .mega-menu__product-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }
  .mega-menu__product-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: rgb(var(--color-foreground));
  }
  .mega-menu__product-sub {
    /* One line, always. The straplines are short by design and a wrapped one
       would put the row out of step with the one beside it. */
    display: block;
    font-size: 1.2rem;
    line-height: 1.35;
    color: rgba(var(--color-foreground), 0.55);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mega-menu__product-group { min-width: 0; }
  .mega-menu__product--refined { min-height: 4.8rem; padding-bottom: 0.45rem; }
  .mega-menu__refinements {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0 1.2rem 0.75rem 6rem;
  }
  .mega-menu__refinement {
    display: inline-flex;
    align-items: center;
    min-height: 2.35rem;
    padding: 0.25rem 0.7rem;
    border: 1px solid rgba(43, 59, 30, 0.19);
    border-radius: 999px;
    color: rgb(43, 59, 30);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
  }
  .mega-menu__refinement:hover,
  .mega-menu__refinement:focus-visible {
    background: #173606;
    border-color: #173606;
    color: #fff;
  }
  .mega-menu__featured {
    grid-area: featured;
  }
  .mega-menu__featured-card {
    display: none;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
  }
  .mega-menu__featured-image {
    position: relative;
    display: block;
    /* Square (2026-09-30, owner): the product photos are square, so the whole
       product shows with nothing cropped. It was a 13.2rem-tall landscape box,
       which cut off the top of panels and both ends of gates.
       tune: 1 / 1 = shape of the photo box; 16rem = its size (was the full
       ~20.7rem card width, owner asked for it a bit smaller on 2026-09-30). */
    aspect-ratio: 1 / 1;
    width: 16rem;
    max-width: 100%;
    border-radius: 6px;
    background: repeating-linear-gradient(-42deg, #EFE7D6 0 11px, #E7DDC8 11px 22px);
    margin-bottom: 1.2rem;
    /* The box had a height but nothing holding the picture to it. Until now
       every featured card fell back to the striped placeholder, which has no
       size of its own and so never showed the omission; the moment a real
       photograph went in it rendered at its natural size and ran out of the
       column and down the panel. */
    overflow: hidden;
  }
  .mega-menu__featured-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
  }
  .mega-menu__featured-tag {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    padding: 0.4rem 0.9rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.85);
    font-size: 1.1rem;
    color: rgba(0, 0, 0, 0.55);
  }
  .mega-menu__featured-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
  }
  .mega-menu__featured-price {
    font-size: 1.3rem;
    color: rgba(var(--color-foreground), 0.65);
    margin-bottom: 0.8rem;
  }
  .mega-menu__featured-link {
    font-size: 1.3rem;
    font-weight: 600;
    color: #5B8C42;
  }
  .mega-menu__deals {
    /* Full-width footer row under all four columns. Without an explicit
       span it auto-places into the sidebar cell and its negative margin
       drags it across the product grid. */
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.6rem 5rem;
    /* Pulled out past the grid's own gutters so the band reaches both edges
       of the panel, and pushed down so it is not sitting under the last line
       of the featured column. */
    margin-top: 3.2rem;
    margin-bottom: 0;
    /* The standard full-bleed pair: pull out to the window's edges, then pad
       back in by the same amount plus the gutter, so the band spans the panel
       while its text stays in line with the columns above. */
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding-left: calc(50vw - 50% + 2rem);
    padding-right: calc(50vw - 50% + 2rem);
    background: #F1EAD9;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    text-decoration: none;
    color: inherit;
    font-size: 1.3rem;
  }
  .mega-menu__deals-label {
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(var(--color-foreground), 0.55);
  }
  .mega-menu__deals-badge {
    padding: 0.2rem 0.9rem;
    border-radius: 20px;
    background: #F3D9C6;
    color: #B4540E;
    font-size: 1.1rem;
    font-weight: 600;
  }
  .mega-menu__deals-text {
    color: rgba(var(--color-foreground), 0.75);
  }

  /* CSS-only tab switching, per radio index */
  #mega-tab-fencing-gates-0:checked ~ .mega-menu__sidebar label[data-tab="0"],
  #mega-tab-fencing-gates-1:checked ~ .mega-menu__sidebar label[data-tab="1"],
  #mega-tab-fencing-gates-2:checked ~ .mega-menu__sidebar label[data-tab="2"],
  #mega-tab-fencing-gates-3:checked ~ .mega-menu__sidebar label[data-tab="3"],
  #mega-tab-concrete-0:checked ~ .mega-menu__sidebar label[data-tab="0"],
  #mega-tab-concrete-1:checked ~ .mega-menu__sidebar label[data-tab="1"],
  #mega-tab-concrete-2:checked ~ .mega-menu__sidebar label[data-tab="2"],
  #mega-tab-concrete-3:checked ~ .mega-menu__sidebar label[data-tab="3"],
  #mega-tab-garden-outdoor-0:checked ~ .mega-menu__sidebar label[data-tab="0"],
  #mega-tab-garden-outdoor-1:checked ~ .mega-menu__sidebar label[data-tab="1"],
  #mega-tab-garden-outdoor-2:checked ~ .mega-menu__sidebar label[data-tab="2"],
  #mega-tab-garden-outdoor-3:checked ~ .mega-menu__sidebar label[data-tab="3"],
  #mega-tab-timber-0:checked ~ .mega-menu__sidebar label[data-tab="0"],
  #mega-tab-timber-1:checked ~ .mega-menu__sidebar label[data-tab="1"],
  #mega-tab-timber-2:checked ~ .mega-menu__sidebar label[data-tab="2"],
  #mega-tab-timber-3:checked ~ .mega-menu__sidebar label[data-tab="3"] {
    background: #0E2603;
    color: #F5F1E6;
  }
  .mega-menu__sidebar label[data-tab] svg {
    transition: opacity 0.15s ease, color 0.15s ease;
  }
  #mega-tab-fencing-gates-0:checked ~ .mega-menu__sidebar label[data-tab="0"] svg,
  #mega-tab-fencing-gates-1:checked ~ .mega-menu__sidebar label[data-tab="1"] svg,
  #mega-tab-fencing-gates-2:checked ~ .mega-menu__sidebar label[data-tab="2"] svg,
  #mega-tab-fencing-gates-3:checked ~ .mega-menu__sidebar label[data-tab="3"] svg,
  #mega-tab-concrete-0:checked ~ .mega-menu__sidebar label[data-tab="0"] svg,
  #mega-tab-concrete-1:checked ~ .mega-menu__sidebar label[data-tab="1"] svg,
  #mega-tab-concrete-2:checked ~ .mega-menu__sidebar label[data-tab="2"] svg,
  #mega-tab-concrete-3:checked ~ .mega-menu__sidebar label[data-tab="3"] svg,
  #mega-tab-garden-outdoor-0:checked ~ .mega-menu__sidebar label[data-tab="0"] svg,
  #mega-tab-garden-outdoor-1:checked ~ .mega-menu__sidebar label[data-tab="1"] svg,
  #mega-tab-garden-outdoor-2:checked ~ .mega-menu__sidebar label[data-tab="2"] svg,
  #mega-tab-garden-outdoor-3:checked ~ .mega-menu__sidebar label[data-tab="3"] svg,
  #mega-tab-timber-0:checked ~ .mega-menu__sidebar label[data-tab="0"] svg,
  #mega-tab-timber-1:checked ~ .mega-menu__sidebar label[data-tab="1"] svg,
  #mega-tab-timber-2:checked ~ .mega-menu__sidebar label[data-tab="2"] svg,
  #mega-tab-timber-3:checked ~ .mega-menu__sidebar label[data-tab="3"] svg {
    opacity: 1;
    color: #9CC17E;
  }
  .mega-menu__product {
    transition: background-color 0.15s ease;
  }
  .mega-menu__product:hover {
    background: #F1EAD9;
  }
  #mega-tab-fencing-gates-0:checked ~ .mega-menu__content [data-panel="0"],
  #mega-tab-fencing-gates-1:checked ~ .mega-menu__content [data-panel="1"],
  #mega-tab-fencing-gates-2:checked ~ .mega-menu__content [data-panel="2"],
  #mega-tab-fencing-gates-3:checked ~ .mega-menu__content [data-panel="3"],
  #mega-tab-concrete-0:checked ~ .mega-menu__content [data-panel="0"],
  #mega-tab-concrete-1:checked ~ .mega-menu__content [data-panel="1"],
  #mega-tab-concrete-2:checked ~ .mega-menu__content [data-panel="2"],
  #mega-tab-concrete-3:checked ~ .mega-menu__content [data-panel="3"],
  #mega-tab-garden-outdoor-0:checked ~ .mega-menu__content [data-panel="0"],
  #mega-tab-garden-outdoor-1:checked ~ .mega-menu__content [data-panel="1"],
  #mega-tab-garden-outdoor-2:checked ~ .mega-menu__content [data-panel="2"],
  #mega-tab-garden-outdoor-3:checked ~ .mega-menu__content [data-panel="3"],
  #mega-tab-timber-0:checked ~ .mega-menu__content [data-panel="0"],
  #mega-tab-timber-1:checked ~ .mega-menu__content [data-panel="1"],
  #mega-tab-timber-2:checked ~ .mega-menu__content [data-panel="2"],
  #mega-tab-timber-3:checked ~ .mega-menu__content [data-panel="3"] {
    display: block;
  }
  #mega-tab-fencing-gates-0:checked ~ .mega-menu__featured [data-featured="0"],
  #mega-tab-fencing-gates-1:checked ~ .mega-menu__featured [data-featured="1"],
  #mega-tab-fencing-gates-2:checked ~ .mega-menu__featured [data-featured="2"],
  #mega-tab-fencing-gates-3:checked ~ .mega-menu__featured [data-featured="3"],
  #mega-tab-concrete-0:checked ~ .mega-menu__featured [data-featured="0"],
  #mega-tab-concrete-1:checked ~ .mega-menu__featured [data-featured="1"],
  #mega-tab-concrete-2:checked ~ .mega-menu__featured [data-featured="2"],
  #mega-tab-concrete-3:checked ~ .mega-menu__featured [data-featured="3"],
  #mega-tab-garden-outdoor-0:checked ~ .mega-menu__featured [data-featured="0"],
  #mega-tab-garden-outdoor-1:checked ~ .mega-menu__featured [data-featured="1"],
  #mega-tab-garden-outdoor-2:checked ~ .mega-menu__featured [data-featured="2"],
  #mega-tab-garden-outdoor-3:checked ~ .mega-menu__featured [data-featured="3"],
  #mega-tab-timber-0:checked ~ .mega-menu__featured [data-featured="0"],
  #mega-tab-timber-1:checked ~ .mega-menu__featured [data-featured="1"],
  #mega-tab-timber-2:checked ~ .mega-menu__featured [data-featured="2"],
  #mega-tab-timber-3:checked ~ .mega-menu__featured [data-featured="3"] {
    display: flex;
  }
  /* 990px is the width the mega menu first appears at, and every rule above
     is base scope — the two 21rem side columns are the same absolute size
     there as at 1360px. The fixed cost is 539px (210 sidebar + 1 divider +
     210 featured + three 2.6rem gaps + 2rem padding each side), so at 990px
     the content column gets 451px, split into two product tracks with a
     32px gap: about 209px each before the icon takes ~40 of it. The minmax
     fix stops that overflowing, but it does not stop it being cramped —
     names wrap to three lines.

     Dropping the featured column returns 210px plus a gap to the products.
     It is a promotional tile rather than navigation, so it is the right
     thing to sacrifice first; the sidebar and the product list are what
     people actually opened the menu for.

     grid-template-areas has to be redeclared alongside grid-template-columns,
     not just left alone: the areas string is what defines the explicit grid,
     so a four-column string against three columns would keep a fourth
     implicit track and its gap even with the featured element hidden.

     To reverse: delete this block. To keep the featured tile instead, drop
     this and shrink the side columns (21rem -> 16rem) — that keeps all four
     columns but leaves every one of them tight rather than three roomy. */
  @media screen and (min-width: 990px) and (max-width: 1149px) {
    .mega-menu {
      grid-template-columns: 21rem 1px minmax(0, 1fr);
      grid-template-areas: "sidebar divider content";
    }
    .mega-menu__featured {
      display: none;
    }
  }
  @media screen and (max-width: 989px) {
    .mega-menu__panel-wrap {
      display: none;
    }
  }
  .header-2__deals-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    white-space: nowrap;
    padding: 0.6rem 1.5rem;
    border-radius: 6px;
    font-size: var(--header-nav-size, 1.2rem);
    font-weight: var(--header-nav-weight, 600);
  }
  .header-2__nav-links {
    display: flex;
    align-items: center;
    gap: 2.2rem;
    margin-left: auto;
    font-size: 1.3rem;
    font-weight: 500;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .header-2__nav-links a {
    color: inherit;
    text-decoration: none;
  }
  .header-2__nav-links a:hover {
    text-decoration: underline;
  }
  html.header-condensed .header-2__nav-links {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  @media screen and (max-width: 989px) {
    .header-2__rating,
    .header-2__icon-label {
      display: none;
    }
  }

  /* ------------------------------------------------------------------
     Phone layout.

     The desktop header is four stacked rows — utility bar, logo, search,
     nav — which on a phone eats most of the first screen before a single
     product appears. Here it collapses to one compact bar plus a slim
     search, and the category row becomes a swipeable strip instead of a
     wrapped block that gets clipped at the edge.
     ------------------------------------------------------------------ */
  @media screen and (max-width: 749px) {
    .header-2 {
      gap: 1rem 1.2rem;
      padding-top: 1rem;
      padding-bottom: 1rem;
      row-gap: 1rem;
    }
    .header-2__search-row {
      flex: 1 1 100%;
      order: 3;
    }
    .header-2__icons {
      gap: 1.4rem;
    }
    .header-2__icon {
      gap: 0;
    }

    /* The category row scrolls sideways rather than being cut off. The
       negative margin lets it bleed to both edges, so the last item is
       visibly half-cut — the cue that tells a thumb there is more. */
    .header-2__nav-row {
      overflow: hidden;
    }
    .page-width.header-2__nav-inner {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      overflow-x: auto;
      overflow-y: hidden;
      flex-wrap: nowrap;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      scroll-padding-inline: 1.5rem;
    }
    .page-width.header-2__nav-inner::-webkit-scrollbar {
      display: none;
    }
    .header-2__nav-inner > * {
      flex: 0 0 auto;
    }
    .header-2__nav-links {
      display: none;
    }
    .header-2__delivery-button {
      padding: 0.9rem 1.2rem;
      font-size: 1.1rem;
    }
  }
/* END_SECTION:custom-header */
/* START_SECTION:mobile-tab-bar (INDEX:64) */
.mtb {
    display: none;
  }

  @media screen and (max-width: 989px) {
    .mtb {
      display: block;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 40;
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .mtb__list {
      display: flex;
      align-items: stretch;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .mtb__item {
      flex: 1 1 0;
      min-width: 0;
    }
    .mtb__link {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1px;
      height: var(--mtb-height, 62px);
      text-decoration: none;
      /* The whole cell is the target, not just the glyph. */
      width: 100%;
    }
    .mtb__icon {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      /* Sized so the active pill has room to sit behind the glyph without
         changing the icon's position when it appears. */
      /* Only as tall as the glyph needs. The bar stays short by removing the
         padding around the icon, not by shrinking the icon. */
      width: 44px;
      height: 36px;
      border-radius: 999px;
      transition: background-color 0.15s ease;
    }

    /* One tab is promoted to a raised button, the way an app promotes its
       primary action. It sits proud of the bar rather than inside it, which
       is the whole point — a filled circle in the row would just read as a
       fifth icon that happens to be coloured.

       The lift is a negative margin, not absolute positioning, so the circle
       still occupies its cell and the five tabs stay evenly spaced. The bar
       has no overflow clipping, so the part that pokes above simply shows. */
    .mtb__link--featured .mtb__icon {
      width: 58px;
      height: 58px;
      margin-top: -22px;
      border-radius: 50%;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    }
    .mtb__link--featured .mtb__label {
      font-weight: 700;
    }
    /* The pill that marks the current tab would fight the filled circle. */
    .mtb__link--featured.mtb__link--current .mtb__icon {
      background: inherit;
    }
    .mtb__label {
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.1px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
    .mtb__count {
      position: absolute;
      top: -5px;
      right: 0;
      min-width: 16px;
      height: 16px;
      padding: 0 4px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 700;
      line-height: 16px;
      text-align: center;
    }
    .mtb__count--empty {
      display: none;
    }
  }
/* END_SECTION:mobile-tab-bar */
/* START_SECTION:resource-guides (INDEX:86) */
.resource-guides__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.6rem;
    margin-bottom: 1.6rem;
  }
  .resource-guides__eyebrow {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
  }
  .resource-guides__heading {
    margin: 0;
    font-size: 2.2rem;
    letter-spacing: -0.02em;
  }
  .resource-guides__view-all {
    font-size: 1.3rem;
    font-weight: 600;
    text-decoration: none;
  }
  .resource-guides__grid {
    display: grid;
    gap: 1.4rem;
  }
  .resource-guides__card {
    display: flex;
    flex-direction: column;
    background: rgb(var(--color-background));
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
  }
  .resource-guides__card:hover {
    border-color: rgb(var(--color-button));
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  }
  .resource-guides__image-wrap {
    height: 12rem;
    background: repeating-linear-gradient(-42deg, #EFE7D6 0 11px, #E7DDC8 11px 22px);
  }
  .resource-guides__placeholder {
    height: 100%;
  }
  .resource-guides__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  /* Two classes deep to beat base.css's own `.icon { fill: … }`, which the
     compiled section stylesheet loads before and would otherwise lose to. */
  .resource-guides__card .resource-guides__icon svg {
    width: 3.6rem;
    height: 3.6rem;
    /* The asset icons are a mix of stroked and filled paths, so both are set
       to the accent rather than assuming one or the other. */
    fill: #3F6B2A;
    stroke: #3F6B2A;
    stroke-width: 0.2;
  }
  .resource-guides__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .resource-guides__card-body {
    padding: 1.3rem 1.5rem 1.6rem;
  }
  .resource-guides__card-tag {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .resource-guides__card-title {
    margin: 0.7rem 0 0.6rem;
    font-size: 1.5rem;
    line-height: 1.28;
  }
  .resource-guides__card-text {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.5;
    opacity: 0.75;
  }

  .resource-guides__card--interactive {
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    padding: 0;
    width: 100%;
  }
  .resource-guides__card--interactive.is-open {
    border-color: rgb(var(--color-button));
  }
  .resource-guides__image-wrap {
    position: relative;
  }
  .resource-guides__tool-flag {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    background: rgba(20, 51, 4, 0.92);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .resource-guides__card-cue {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.1rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: rgb(var(--color-button));
  }
  .resource-guides__chev {
    transition: transform 0.2s ease;
  }
  .is-open .resource-guides__chev {
    transform: rotate(180deg);
  }

  .resource-guides__panel,
  .resource-guides__tabpanel {
    margin-top: 1.4rem;
    padding: 2rem 2.2rem;
    background: rgb(var(--color-background));
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 6px;
  }
  .resource-guides__panel[hidden],
  .resource-guides__tabpanel[hidden] {
    display: none;
  }
  .resource-guides__rte {
    font-size: 1.35rem;
    line-height: 1.65;
    max-width: 70ch;
  }
  .resource-guides__rte > *:first-child {
    margin-top: 0;
  }
  .resource-guides__rte > *:last-child {
    margin-bottom: 0;
  }
  .resource-guides__panel-cta {
    display: inline-block;
    margin-top: 1.4rem;
    font-size: 1.3rem;
    font-weight: 700;
    text-decoration: none;
    color: rgb(var(--color-button));
  }

  /* Calculator */
  .rg-calc__fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1.2rem 1.6rem;
  }
  .resource-guides__rte + .rg-calc {
    margin-top: 1.8rem;
    display: block;
  }
  .rg-calc__field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 1.2rem;
    font-weight: 600;
  }
  .rg-calc__input {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 4px;
    padding-right: 1rem;
  }
  .rg-calc__input:focus-within {
    border-color: rgb(var(--color-button));
  }
  .rg-calc__input input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.9rem 1rem;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: 700;
    color: inherit;
  }
  .rg-calc__input input:focus {
    outline: none;
  }
  .rg-calc__input em {
    font-style: normal;
    font-size: 1.15rem;
    font-weight: 600;
    opacity: 0.6;
  }
  .rg-calc__out {
    display: grid;
    gap: 0.2rem;
    margin-top: 1.8rem;
    padding-top: 1.6rem;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
  }
  .rg-calc__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.6rem;
    padding: 0.55rem 0;
    font-size: 1.3rem;
  }
  .rg-calc__row span {
    opacity: 0.72;
  }
  /* The answer the customer actually came for. */
  .rg-calc__row--key {
    font-size: 1.7rem;
    font-weight: 800;
    color: rgb(var(--color-button));
  }
  .rg-calc__row--key span {
    opacity: 1;
    font-size: 1.4rem;
    font-weight: 700;
    color: inherit;
  }

  .resource-guides {
    /* The tablist carries a 22px top margin. With no padding above it that
       margin collapses out through the container, so the coloured band
       started 22px late and the page background showed through as a white
       strip. flow-root keeps the margin inside the band. */
    display: flow-root;
  }
  .resource-guides__tablist {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.2rem;
  }
  .resource-guides__link-pill[aria-selected='true'] {
    background: rgb(var(--color-button));
    border-color: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
  }
  .resource-guides__link-pill {
    font-family: inherit;
    cursor: pointer;
    font-size: 1.3rem;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    padding: 1rem 1.6rem;
    text-decoration: none;
    color: inherit;
  }
  .resource-guides__link-pill:hover {
    border-color: rgb(var(--color-button));
  }
  /* Pill cards at every width (2026-09-30, owner: match Total Sheds' "Good to know"
     row). This row layout used to start below 990px only; desktop kept tall cards
     with a striped placeholder on top. Desktop keeps its columns side by side;
     below 990px they stack. tune: the min-width: 990px block for desktop sizing. */
    /* Three stacked cards with a 120px striped placeholder each is most of a
       screen spent on decoration that carries no information. Below desktop
       width the card turns on its side: a small marker, the title and its
       one line of explanation, and an arrow saying it goes somewhere. This
       used to be a phone-only (max-width: 749px) treatment with a 2-column
       striped-placeholder grid from 750-989px; the 2-column version is gone
       and the row layout now starts at 989px instead. TEMP: trying this out
       at 750-989px per Rio's request 2026-09-14 — revert by restoring the
       749px breakpoint below if it doesn't look right. */
    .resource-guides__card {
      flex-direction: row;
      align-items: center;
      gap: 1.3rem;
      padding: 1.4rem 1.4rem 1.4rem 1.5rem;
      border-radius: 1.4rem;
      border-color: rgba(0, 0, 0, 0.1);
      background: rgba(20, 51, 4, 0.035);
    }
    .resource-guides__image-wrap {
      flex: 0 0 auto;
      width: 4.2rem;
      height: 4.2rem;
      border-radius: 50%;
      overflow: hidden;
      /* Below 749px timber-mobile.css swaps the striped-placeholder gradient
         for a flat green tint and shrinks the icon so it sits inside its own
         margin, since the disc is the icon's ground now and needs no ground
         of its own. This row layout starts at 989px, so the same two rules
         are repeated here rather than widening timber-mobile.css's own
         749px query (mobile CSS there is signed off and not to be touched). */
      background: rgba(100, 153, 73, 0.14);
    }
    .resource-guides__card .resource-guides__icon svg {
      width: 20px;
      height: 20px;
    }
    .resource-guides__card-body {
      padding: 0;
      flex: 1 1 auto;
      min-width: 0;
    }
    .resource-guides__card-title {
      margin: 0 0 0.3rem;
      font-size: 1.45rem;
    }
    .resource-guides__card-text {
      font-size: 1.2rem;
      line-height: 1.4;
    }
    /* The tag duplicates what the title already says at this size, and the
       "Interactive" flag has nowhere to sit once the image is a 42px disc. */
    .resource-guides__card-tag,
    .resource-guides__tool-flag {
      display: none;
    }
    /* Every row ends in the same affordance, whether it navigates or opens a
       panel underneath. The cue keeps its chevron and drops its label. */
    .resource-guides__card::after {
      content: '→';
      flex: 0 0 auto;
      font-size: 1.6rem;
      line-height: 1;
      opacity: 0.45;
    }
    .resource-guides__card--interactive::after {
      content: '↓';
    }
    .resource-guides__card--interactive.is-open::after {
      content: '↑';
    }
    /* The cue's own row of text sits below the copy and pushes the row two
       lines taller; the arrow on the right already says the same thing. */
    .resource-guides__card-cue {
      display: none;
    }
  @media screen and (max-width: 989px) {
    .resource-guides__grid {
      grid-template-columns: 1fr !important;
      gap: 1rem !important;
    }
  }
  @media screen and (min-width: 990px) {
    .resource-guides__card {
      gap: 1.6rem;
      padding: 1.8rem 2rem 1.8rem 1.8rem;
      border-radius: 2.4rem;
    }
    .resource-guides__image-wrap {
      width: 5.2rem;
      height: 5.2rem;
    }
    .resource-guides__card .resource-guides__icon svg {
      width: 22px;
      height: 22px;
    }
    .resource-guides__card-title {
      font-size: 1.6rem;
      font-weight: 600;
    }
    .resource-guides__card-text {
      font-size: 1.3rem;
    }
  }
/* END_SECTION:resource-guides */
/* START_SECTION:social-gallery (INDEX:90) */
.social-gallery {
    /* The header's margin would otherwise escape the band and drag the
       painted background down with it. */
    display: flow-root;
  }
  .social-gallery__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.2rem 2rem;
    flex-wrap: wrap;
    margin-bottom: 1.6rem;
  }
  .social-gallery__heading {
    margin: 0;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }
  .social-gallery__handle {
    font-size: 1.4rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }
  .social-gallery__handle:hover {
    text-decoration: underline;
  }
  /* Fixed-size thumbnails in a left-aligned row, not a grid stretched across
     the page. As a four-column grid each photo became 298px on a wide screen
     — these are proof shots sitting under a heading, and at that size they
     read as the main event. Wrapping means more than four blocks simply flow
     onto a second line. */
  /* One row, always. These are proof shots: eight of them in a line reads as
     a strip of evidence, and the same eight wrapped onto a second row of two
     reads as a grid someone forgot to fill. So the row never wraps, the photos
     share the width between them, and when the window gets too narrow for the
     share to stay respectable the last photo drops out of the row rather than
     onto a line of its own. Four is the floor — below that the phone rail
     takes over, which is a different thing again. */
  /* A grid with a set number of columns, not a row of fixed-width photos.

     Fixed widths were the mistake: eight photos at the size the merchant set,
     plus the gaps, comes to more than the 1200px the page is ever allowed to
     be, so the row ran off the side. The breakpoints meant to prevent that
     were measuring the window, which keeps growing after the container has
     stopped — so on a wide screen they never fired.

     Columns solve both. The row is always exactly full, the photos are as
     large as the space allows rather than a number typed in a setting, and
     nothing can overflow because the track count is what is being set. */
  swipe-rail.social-gallery__rail {
    display: block;
  }
  .social-gallery__grid {
    --sg-gap: 1.2rem;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--sg-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    cursor: grab;
  }
  .social-gallery__grid::-webkit-scrollbar {
    display: none;
  }
  .social-gallery__grid.is-dragging {
    cursor: grabbing;
  }
  .social-gallery__grid > .social-gallery__photo {
    flex: 0 0 calc((100% - (var(--sg-cols, 6) - 1) * var(--sg-gap)) / var(--sg-cols, 6));
    scroll-snap-align: start;
  }
  .social-gallery__image {
    -webkit-user-drag: none;
    user-select: none;
  }
  .social-gallery__photo {
    position: relative;
    display: block;
    width: auto;
    max-width: 100%;
    overflow: hidden;
    background: repeating-linear-gradient(-42deg, #efe7d6 0 11px, #e7ddc8 11px 22px);
    text-decoration: none;
    color: inherit;
  }
  .social-gallery__placeholder {
    display: block;
    height: 100%;
  }
  /* Absolute rather than height: 100% — the wrapper's height comes from
     aspect-ratio, which is indefinite, so a percentage height would resolve
     to auto and a tall photo would stretch the row. */
  .social-gallery__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .social-gallery__caption {
    position: absolute;
    left: 0.8rem;
    right: 0.8rem;
    bottom: 0.8rem;
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
    color: #143304;
  }

  @media screen and (max-width: 749px) {
    /* Sized off the reference, measured rather than guessed: their thumbnails
       are square at 22% of the viewport with an 8px gap, which shows three in
       full and about three-quarters of the fourth. Ours sits 1.15x above that
       by choice, which trades some of the fourth photo's peek for a larger
       image. These are proof shots, not products — a rail of two big squares
       showed a quarter of the row. */
    .social-gallery__grid {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
      gap: 8px;
      margin-left: -16px;
      margin-right: -16px;
      padding: 0 16px 4px;
      scroll-snap-type: x proximity;
      scroll-padding-left: 16px;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .social-gallery__grid::-webkit-scrollbar {
      display: none;
    }
    /* The rail scrolls, so nothing needs hiding here — put back anything the
       desktop breakpoints above took out. */
    .social-gallery__photo:nth-child(n + 5) {
      display: block;
    }
    .social-gallery__grid > .social-gallery__photo {
      /* Exactly four across, no peek: the screen less its gutters, less the
         three gaps between them, quartered. The row still scrolls, so photos
         five onward are a swipe away — it is the first screenful that is
         being fixed at four. */
      flex: 0 0 calc((100vw - 32px - 24px) / 4);
      scroll-snap-align: start;
      border-radius: 12px;
    }
    .social-gallery__heading {
      font-size: 1.55rem;
    }
    .social-gallery__header {
      margin-bottom: 1.2rem;
      gap: 0.4rem 1.2rem;
    }
    /* The heading takes the room and the handle sits against the right edge
       beside it, rather than the two sharing a line only when both happen to
       be short. */
    .social-gallery__heading {
      flex: 1 1 60%;
    }
    .social-gallery__handle {
      font-size: 1.3rem;
    }
  }
/* END_SECTION:social-gallery */
/* START_SECTION:stats-bar (INDEX:91) */
@media screen and (max-width: 749px) {
    .stats-bar__item {
      /* Value over label reads better in a narrow column than value beside
         a label that then wraps under it anyway. */
      flex-direction: column;
      align-items: flex-start;
      gap: 0.2rem;
    }
    .stats-bar__label {
      line-height: 1.25;
    }
  }

  div.stats-bar__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1.6rem 2.8rem;
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
  }
  .stats-bar__item {
    display: flex;
    align-items: baseline;
    gap: 1rem;
  }
  .stats-bar__value {
    font-size: 2.4rem;
    font-weight: 800;
    color: #F5F1E1;
  }
  .stats-bar__label {
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    color: #9BB98A;
  }
/* END_SECTION:stats-bar */
/* START_SECTION:utility-bar (INDEX:95) */
.utility-bar-2 {
    font-size: 1.2rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    max-height: 6rem;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease;
  }
  div.utility-bar-2__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.4rem 2rem;
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
  }
  html.header-condensed .utility-bar-2 {
    max-height: 0;
    border-bottom-color: transparent;
    pointer-events: none;
  }
  html.header-condensed .utility-bar-2__inner-anim {
    transform: translateY(-100%);
    opacity: 0;
  }
  .utility-bar-2__links {
    display: flex;
    gap: 2.2rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
  }
  .utility-bar-2__links a {
    color: inherit;
    text-decoration: none;
  }
  .utility-bar-2__links a:hover {
    text-decoration: underline;
  }
  .utility-bar-2__contact {
    margin: 0;
    white-space: normal;
  }
  .utility-bar-2__hours {
    margin-left: 0.8rem;
    opacity: 0.85;
  }
  @media screen and (max-width: 749px) {
    .utility-bar-2__hours {
      display: none;
    }
  }
/* END_SECTION:utility-bar */
/* START_SECTION:value-props (INDEX:96) */
.value-props__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2.4rem;
  }
  .value-props__heading-row {
    margin: 0;
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: rgb(20, 51, 4);
  }
  .value-props__heading-stat {
    font-size: 1.2rem;
    opacity: 0.7;
  }
  .value-props__grid {
    display: grid;
    gap: 3.4rem;
    padding-bottom: 3.4rem;
  }
  .value-props__grid--divider {
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  }
  .value-props__item {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    /* The soft card was only on mobile; on desktop these were bare columns of
       text with nothing separating one claim from the next. The tint is what
       makes each one read as its own thing at a glance. */
    background: rgba(20, 51, 4, 0.045);
    border-radius: 14px;
    padding: 1.5rem 1.6rem 1.6rem;
    text-decoration: none;
    color: inherit;
  }
  /* The whole tile is the button, so it has to look like one under a finger
     and a cursor. */
  .value-props__item--link {
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
  }
  .value-props__item--link:hover {
    background: rgba(20, 51, 4, 0.085);
  }
  .value-props__item--link:active {
    transform: translateY(1px);
  }
  .value-props__icon {
    display: inline-block;
  }
  .value-props__icon svg {
    display: block;
    width: 3rem;
    height: 3rem;
  }
  .value-props__heading {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.25;
    color: rgb(20, 51, 4);
  }
  .value-props__text {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.4;
    color: rgb(90, 90, 74);
  }
  .value-props__text p {
    margin: 0;
  }
  @media screen and (max-width: 989px) {
    .value-props__grid {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }

  @media screen and (max-width: 749px) {
    /* On a phone these stop being a row of copy and become four tiles: the
       card edge is what tells a thumb where one claim ends and the next
       begins, which the bare two-column text layout never did. Stays two up
       all the way down to 320px — a single column would push the last claim
       most of a screen below the fold. */
    .value-props__grid {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 1.2rem !important;
      padding-bottom: 2.4rem !important;
    }
    .value-props__item {
      background: rgba(20, 51, 4, 0.045);
      border-radius: 1.2rem;
      padding: 1.2rem 1.1rem;
      gap: 0.6rem;
    }
    .value-props__icon svg {
      width: 2.2rem !important;
      height: 2.2rem !important;
    }
    .value-props__heading {
      font-size: 1.4rem;
      line-height: 1.25;
    }
    .value-props__text {
      font-size: 1.2rem;
      line-height: 1.45;
    }
    .value-props__heading-row {
      font-size: 1.9rem;
    }
  }

  @media screen and (max-width: 359px) {
    /* Below an iPhone SE the two columns are 110px wide and every heading
       breaks across three lines. One column reads. */
    .value-props__grid {
      grid-template-columns: 1fr !important;
    }
  }
/* END_SECTION:value-props */