/*
 * Narrow, intentional layout corrections.
 *
 * This file sits after the legacy responsive rules so that these fixes remain
 * easy to audit without disturbing the established section, paper-cut, or
 * animation behaviour elsewhere on the page.
 */

/*
 * WHY cards use a fixed-ratio paper asset.  On the two-column layouts the
 * legacy grid stretched the middle row, pinning the title near the centre and
 * the copy at the very bottom.  Keep the three content pieces together and
 * centre that group inside the safe area of the paper instead.
 */
@media (min-width: 701px) {
  .why .reason-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 1.1vw, 16px);
  }

  .why .reason-card > img,
  .why .reason-card h3,
  .why .reason-card p {
    flex: 0 0 auto;
    align-self: center;
  }

  .why .reason-card > img {
    width: clamp(54px, 5vw, 70px);
    height: clamp(54px, 5vw, 70px);
    object-fit: contain;
  }

  .why .reason-card h3 { margin: 0; }

  .why .reason-card p {
    /* A shared copy field keeps icons and titles aligned across a row even
       when one description needs fewer lines than the others. */
    min-block-size: calc(7 * 1.45em);
  }
}

/* The supplied contribution-step artwork contains the complete torn paper
   shape in its lower half.  At narrow widths the former fixed card height
   clipped its upper torn edge.  Let each card reserve the matching natural
   height so both torn edges remain intact. */
@media (min-width: 621px) and (max-width: 900px) {
  .cost-steps article {
    min-height: clamp(172px, calc(33vw - 19px), 212px);
  }
}

@media (max-width: 620px) {
  .cost-steps article {
    min-height: max(135px, calc(33vw - 12px));
  }
}

/* Mobile hero: keep the copy closer to the header and let the photo section
   end after the CTA clearance instead of retaining an unused fixed-height
   area above the headline. */
@media (max-width: 620px) {
  .hero { min-height: 0; }

  .hero-content {
    padding-top: clamp(58px, 10vh, 72px);
    padding-bottom: calc(var(--paper-cut-depth) + 32px);
  }
}

/* The legacy 1440px hero was a fixed-height photo.  Its copy is taller than
   that canvas on large desktop displays, so the lower paper edge could cover
   the paragraph.  Let the section grow with its existing content instead. */
@media (min-width: 1440px) {
  .hero {
    height: auto;
    min-height: 647px;
    /* The torn overlay contains transparent pixels.  Once the content makes
       the desktop hero taller than the image's natural scaled height, those
       pixels otherwise expose the sand page background.  Cover keeps the
       photograph continuous behind the complete paper edge. */
    background-size: cover;
    background-position: center;
  }

  .hero-content {
    padding-top: clamp(48px, 2.7vw, 58px);
    padding-bottom: calc(var(--hero-paper-cut-cover) + 32px);
  }

  /* The desktop cost section previously began directly beneath its torn
     entrance, which placed its heading under the decorative crop. */
  .costs {
    height: auto;
    min-height: 996px;
    padding: clamp(116px, 7.5vw, 140px) 0 clamp(80px, 5vw, 100px);
  }
}

/* Hero-to-benefits transition: it must have exactly one owner at every
   viewport.  The supplied paper asset is transparent above the green tear;
   drawing it on the hero lets that transparency reveal the photograph.  The
   next section is a solid green field, so no sand/white page background can
   flash through while a desktop window crosses a responsive breakpoint. */
.hero {
  position: relative;
  isolation: isolate;
  background-image:
    linear-gradient(90deg, rgb(8 19 16 / .82), rgb(8 19 16 / .45) 48%, rgb(8 19 16 / .16)),
    url("../images/backgrounds/hero-ruhrgebiet-sunset.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (max-width: 620px) {
  .hero { background-position: center, 68% center; }
}

.hero::after {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  inset: auto 0 0 !important;
  display: block !important;
  height: var(--hero-paper-cut-cover) !important;
  pointer-events: none !important;
  background: url("../images/backgrounds/green-paper-cut.webp") center top / 100% auto no-repeat !important;
}

.hero > .shell { position: relative; z-index: 2; }

.benefit-band {
  background-color: var(--green) !important;
  background-image: none !important;
}

/* The hero actions are part of the composition at every viewport.  Keeping
   them in flow across the navigation breakpoint prevents the hero from
   changing height for a frame while a window is being resized. */
.hero .button-row { display: flex !important; }

/* Tablet navigation hand-off: keep the header's desktop geometry intact.
   The menu stays fixed to the viewport, so its lower torn edge cannot travel
   with the page while the navigation is open. */
@media (min-width: 621px) and (max-width: 1100px) {
  .site-header {
    position: relative;
    height: 115px;
    min-height: 115px;
    padding-top: 31px;
    flex-wrap: nowrap;
    align-content: normal;
    row-gap: 0;
  }

  .main-nav,
  .main-nav.is-open {
    position: fixed !important;
    z-index: 1200 !important;
    inset: 0 auto 0 calc(-1 * var(--side)) !important;
    order: initial;
    overflow: hidden !important;
  }

  .main-nav { display: none !important; }
  .main-nav.is-open { display: flex !important; }
}

/* On phones the hero actions use the same intrinsic button sizing as every
   other CTA.  The former two-column grid stretched both labels into oversized
   bars that did not match the footer and section buttons. */
@media (max-width: 620px) {
  .hero .button-row {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
  }

  .hero .button-row .button {
    flex: 0 0 auto;
    width: auto;
  }
}


/*
 * Once two cards would become too narrow, the existing accessible accordion
 * takes over.  Its expanded copy is a true sand-paper sheet, masked with the
 * same supplied torn silhouette as the desktop cards, so it reads as a piece
 * of paper pulled out from beneath the green tab.
 */
@media (max-width: 700px) {
  .reason-accordion {
    gap: clamp(16px, 4vw, 20px);
    margin-top: clamp(32px, 8vw, 40px);
  }

  .accordion-panel {
    /* The panel has to reserve space for the lower torn edge.  Previously
       the panel animation measured only the text box, then clipped the
       decorative lower crop, exposing a straight sand line. */
    --accordion-paper-edge: clamp(38px, 9vw, 56px);
    margin-top: -10px;
    margin-inline: calc(var(--side) * -1);
    padding-bottom: 0;
    background: transparent;
    color: var(--ink);
    border-radius: 0;
  }

  .accordion-item.is-open .accordion-panel {
    /* Included in scrollHeight, so the torn edge remains visible throughout
       the native height animation instead of being cut off at its baseline. */
    padding-bottom: var(--accordion-paper-edge);
  }

  .accordion-panel-inner {
    /* The panel is a real horizontal paper strip: the supplied source draws
       its two proportional torn edges; the sand field only carries copy.
       The lower source crop stays *inside* the opening panel, which avoids
       the former rectangular end line on every narrow viewport. */
    position: relative;
    isolation: isolate;
    margin: var(--accordion-paper-edge) 0 0;
    padding: clamp(20px, 5.5vw, 26px) calc(var(--side) + 12px);
    background: var(--sand);
  }

  /* The light field is deliberately built from a solid centre and two
     proportional crops of the supplied sand cut.  Unlike a full portrait
     card mask, its torn edges keep their original shape at every height. */
  .accordion-panel-inner::before,
  .accordion-panel-inner::after {
    content: "";
    position: absolute;
    z-index: 0;
    right: 0;
    left: 0;
    height: var(--accordion-paper-edge);
    pointer-events: none;
    background-color: var(--green);
    background-image: url("../images/backgrounds/green-paper-banner.webp");
    background-repeat: no-repeat;
    background-size: 100% auto;
  }

  .accordion-panel-inner::before {
    top: calc(-1 * var(--accordion-paper-edge));
    background-position: center top;
  }

  .accordion-panel-inner::after {
    /* One-pixel overlap removes antialiased seams between the central field
       and its lower paper edge without scaling the artwork vertically. */
    bottom: calc(-1 * var(--accordion-paper-edge) + 1px);
    background-position: 38% top;
    background-size: 116% auto;
    transform: scaleY(-1);
  }

  .accordion-panel-inner > p {
    position: relative;
    z-index: 1;
  }
}

/* Contribution steps: keep the paper silhouette intact on tablet and desktop
   while giving the number and copy a calmer, more generous inset. */
.cost-steps strong { color: var(--paper); }

.cost-steps article {
  height: auto;
  min-height: 230px;
  flex-basis: auto;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 28px;
  padding: 60px clamp(48px, 4vw, 60px) 52px;
}

@media (max-width: 620px) {
  .cost-steps article {
    min-height: max(170px, calc(33vw - 12px));
  }

  .cost-steps strong { font-size: clamp(42px, 9.3vw, 50px); }
  .cost-steps h3 { font-size: clamp(25px, 5.6vw, 30px); }
  .cost-steps p { font-size: clamp(12px, 2.4vw, 13px); }
}

/* On full desktop the wider paper artwork needs a little more breathing room
   between cards.  The legacy overlap was designed for the former asset and
   made the new torn edges collide. */
@media (min-width: 1080px) {
  .cost-steps article:not(:last-child) { margin-bottom: -24px; }
}

/* WHY BUDMEISTER — one shared, editorial accordion layout.
   The phone list is the approved visual direction.  It remains a vertical
   icon-and-label sequence at every width, while the scale and spacing grow
   fluidly for tablet and desktop. */
.why {
  --why-icon-size: clamp(92px, 9vw, 132px);
  --why-row-gap: clamp(38px, 5.4vw, 72px);
  --why-label-gap: clamp(24px, 2.6vw, 36px);
  height: auto;
  min-height: 0;
  padding: clamp(180px, 14vw, 226px) 0 clamp(110px, 9vw, 144px);
}

.why .split-heading { display: block; }

.why .split-heading h2 {
  color: var(--orange);
  font-size: clamp(68px, 6.25vw, 90px);
  line-height: .82;
}

.why .split-heading p {
  max-width: min(100%, 1050px);
  margin-top: clamp(28px, 3vw, 40px);
  padding: 0;
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.28;
}

.why .reason-grid { display: none !important; }

.why .reason-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--why-row-gap);
  margin-top: clamp(86px, 8vw, 126px);
}

.why .accordion-heading { margin: 0; }

.why .accordion-item {
  position: relative;
  isolation: isolate;
}

.why .accordion-trigger {
  display: grid;
  grid-template-columns: var(--why-icon-size) minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  min-height: var(--why-icon-size);
  gap: var(--why-label-gap);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--paper);
  font-family: "Bebas Neue", Impact, sans-serif;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.why .accordion-trigger:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 8px;
}

.why .accordion-icon {
  width: var(--why-icon-size);
  height: var(--why-icon-size);
  object-fit: contain;
}

.why .accordion-trigger span {
  min-width: 0;
  color: var(--orange);
  font-size: clamp(42px, 4.1vw, 58px);
  line-height: .92;
}

.why .accordion-chevron {
  width: clamp(26px, 2.3vw, 34px);
  height: clamp(26px, 2.3vw, 34px);
  color: var(--paper);
  transition: transform .25s ease;
}

.why .accordion-item.is-open .accordion-chevron { transform: rotate(180deg); }

.why .accordion-panel {
  /* One uninterrupted paper strip spans the accordion width.  The supplied
     artwork is cropped at its natural ratio for the top and bottom so the
     torn silhouette stays intact instead of revealing a straight edge. */
  --accordion-paper-edge: clamp(36px, 7vw, 128px);
  overflow: hidden;
  max-height: 0;
  /* Break out of the centred desktop shell as well.  On phones this resolves
     to the same side bleed as before, while tablet and desktop become a
     single uninterrupted paper strip from viewport edge to viewport edge. */
  margin: 0 calc(50% - 50vw);
  padding-bottom: 0;
  background: transparent;
  color: var(--ink);
  border-radius: 0;
  transition: max-height .3s ease, padding-bottom .3s ease;
}

.why .accordion-item.is-open .accordion-panel {
  padding-bottom: var(--accordion-paper-edge);
}

.why .accordion-panel-inner {
  position: relative;
  isolation: isolate;
  margin: var(--accordion-paper-edge) 0 0;
  padding: clamp(26px, 3.2vw, 44px) calc(var(--side) + clamp(24px, 2.6vw, 44px));
  background: var(--sand);
  color: var(--ink);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.4;
}

.why .accordion-panel-inner::before,
.why .accordion-panel-inner::after {
  content: "" !important;
  position: absolute;
  z-index: 0;
  right: 0;
  left: 0;
  height: var(--accordion-paper-edge);
  pointer-events: none;
  background-color: var(--green);
  background-image: url("../images/backgrounds/green-paper-banner.webp");
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.why .accordion-panel-inner::before {
  top: calc(-1 * var(--accordion-paper-edge));
  background-position: center top;
}

.why .accordion-panel-inner::after {
  /* Overlap the panel padding by two pixels so no straight seam can show
     beneath the torn lower edge at any zoom level. */
  bottom: calc(-1 * var(--accordion-paper-edge));
  height: calc(var(--accordion-paper-edge) + 2px);
  /* Crop the asset's outer pixels from the lower edge.  Those pixels contain
     a flat export boundary; using the inner tear removes the hard lower-left
     and lower-right stops at every breakpoint. */
  background-size: 116% auto;
  background-position: center bottom;
  transform: none;
}

.why .accordion-panel-inner > p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--ink);
}

@media (max-width: 700px) {
  .why {
    --why-icon-size: clamp(76px, 16vw, 88px);
    --why-row-gap: clamp(58px, 12vw, 76px);
    --why-label-gap: clamp(20px, 4vw, 24px);
    padding: clamp(104px, 23vw, 140px) 0 clamp(88px, 16vw, 112px);
  }

  .why .split-heading h2 { font-size: clamp(40px, 12vw, 52px); }

  .why .split-heading p {
    margin-top: 28px;
    font-size: clamp(15px, 3.4vw, 18px);
  }

  .why .reason-accordion { margin-top: clamp(76px, 15vw, 102px); }

  .why .accordion-trigger span {
    font-size: clamp(28px, 7.5vw, 34px);
    line-height: .95;
  }

  .why .accordion-chevron { width: 24px; height: 24px; }

  .why .accordion-panel {
    --accordion-paper-edge: clamp(36px, 10vw, 52px);
  }

  .why .accordion-panel-inner {
    margin-top: var(--accordion-paper-edge);
    margin-left: 0;
    padding: clamp(24px, 7vw, 34px) calc(var(--side) + clamp(24px, 7vw, 34px));
    font-size: 14px;
  }
}

/* The wider tablet strip scales the source artwork up.  Reserve its complete
   lower crop so the torn edge never ends halfway through the image. */
@media (min-width: 701px) and (max-width: 1100px) {
  .why .accordion-panel {
    --accordion-paper-edge: clamp(76px, 10vw, 104px);
  }
}

/* Tablet and desktop use the same three-part paper construction as the
   approved phone layout: an unbroken sand centre and the two original torn
   source edges.  Keeping the source's vertical scale independent from the
   panel height prevents the paper silhouette from becoming shallow or flat
   on very wide screens. */
@media (min-width: 701px) {
  .why .accordion-panel {
    --accordion-paper-edge: clamp(76px, 7vw, 146px);
    padding-bottom: 0;
    background: transparent;
    -webkit-mask: none;
    mask: none;
  }

  .why .accordion-item.is-open .accordion-panel {
    padding-bottom: var(--accordion-paper-edge);
  }

  .why .accordion-panel-inner {
    margin: var(--accordion-paper-edge) 0 0;
    padding: clamp(30px, 3.2vw, 48px) calc(var(--side) + clamp(24px, 2.6vw, 44px));
    /* Bring the outgoing torn edge closer to the copy without changing the
       separately aligned paper slice that prevents a straight seam. */
    padding-bottom: clamp(56px, 3.2vw, 68px);
    background: var(--sand);
  }

  .why .accordion-panel-inner::before,
  .why .accordion-panel-inner::after {
    content: "" !important;
    /* Preserve the vertical character of the 1,440 × 600 paper artwork even
       when the panel spans an ultrawide desktop. */
    background-size: 100% clamp(430px, 42vw, 600px);
  }

  .why .accordion-panel-inner::before { background-position: center top; }

  .why .accordion-panel-inner::after {
    background-size: 116% clamp(500px, 49vw, 696px);
    /* Start the lower slice inside the asset's fully opaque paper area.  If
       it starts at the export's outer pixel, transparent corners expose the
       central box end as a straight horizontal line. */
    background-position: center calc(100% + clamp(28px, 2vw, 46px));
  }
}

/* The entrance tear of the following green section extends upward.  Reserve
   its full depth below the About content so it only ever sits in sand-colour
   breathing room, never across the lower edge of the photo or paragraph. */
.about {
  height: auto;
  min-height: 0;
  padding-bottom: calc(var(--paper-cut-cover) + clamp(24px, 2vw, 36px));
}

.about-grid { min-height: 490px; }

@media (max-width: 900px) {
  .about-grid { min-height: 0; }
}

/* Give the About introduction the same generous reading measure as the
   other compact sections. The existing grid gap remains the sole distance to
   the photo, so the image follows the shorter copy without changing that
   visual rhythm. */
@media (min-width: 621px) and (max-width: 1079px) {
  .about .section-copy,
  .about .section-copy p { max-width: 56ch; }
}

@media (max-width: 620px) {
  .about .section-copy,
  .about .section-copy p { max-width: 38ch; }
}

/* Compact layouts use the full readable shell width for the About copy, just
   like the membership introduction.  The grid's existing gap still controls
   the precise breathing room between the last text line and the photograph. */
@media (max-width: 1079px) {
  .about .section-copy,
  .about .section-copy p { max-width: none; }
}

/* The preceding CSC paper edge now reaches well into the Join photograph.
   Keep the complete Join copy beneath that edge instead of letting its
   heading float across the green tear.  The photo keeps covering the taller
   content-driven section. */
.join-hero {
  height: auto;
  min-height: 612px;
  padding-top: max(84px, calc(var(--paper-cut-cover) + 40px));
  padding-bottom: max(84px, calc(var(--paper-cut-cover) + 44px));
  background-color: var(--sand);
  background-image: none;
}

/* The planning photograph uses the alpha silhouette of the original Join artwork
   as an exact mask. This keeps its existing crop and torn lower edge intact
   at every breakpoint while changing only the image content. */
.join-photo {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  pointer-events: none;
  background: url("../images/backgrounds/join-membership-planning.png") center / cover no-repeat;
  -webkit-mask: url("../images/backgrounds/join-background.png") center / cover no-repeat;
  mask: url("../images/backgrounds/join-background.png") center / cover no-repeat;
}

/* Keep the original About photograph's paper silhouette and layout. */
.image-disclosure {
  position: absolute;
  z-index: 3;
  right: 10%;
  bottom: 14%;
  max-width: calc(100% - 32px);
  padding: 1px 2px;
  border-radius: 1px;
  background: rgb(8 19 16 / .6);
  color: #f4ecdc;
  font: 400 0.5rem/1.25 Arial, sans-serif;
  letter-spacing: 0;
  text-align: left;
}

.image-disclosure--hero {
  position: static;
  display: table;
  margin: 18px 0 0;
}

.image-disclosure--join {
  right: var(--side);
  bottom: calc(var(--paper-cut-cover) + 8px);
}

.photo-frame--about img {
  object-fit: cover;
  object-position: center;
  -webkit-mask: url("../images/photos/about-garden.webp") center / 100% 100% no-repeat;
  mask: url("../images/photos/about-garden.webp") center / 100% 100% no-repeat;
}

@media (max-width: 1439px) {
  .photo-frame--about img {
    position: absolute;
    inset: 0;
    height: 100%;
  }
}

/* Reuse the original membership artwork solely as the silhouette. The former
   Join photograph fills that exact torn-paper shape, so the established
   section geometry and its irregular edge remain unchanged. */
.photo-frame--member img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
  transform: none;
  -webkit-mask: url("../images/photos/membership-garden.webp") center / 100% 100% no-repeat;
  mask: url("../images/photos/membership-garden.webp") center / 100% 100% no-repeat;
}

/* Keep section content below the deepest visible part of the larger paper
   transitions.  These clearances are intentionally smaller than the full
   asset crop: they follow the actual torn silhouette rather than adding a
   rectangular empty band. */
:root { --paper-cut-content-clearance: clamp(112px, 8vw, 168px); }

.about { padding-top: var(--paper-cut-content-clearance); }

.varieties {
  padding-top: max(60px, var(--paper-cut-content-clearance));
}

.costs {
  padding-top: max(160px, calc(var(--paper-cut-content-clearance) + 32px));
}

.csc {
  height: auto;
  min-height: 590px;
  padding-top: max(130px, var(--paper-cut-content-clearance));
}

/* Desktop density: the sections keep their paper-edge clearance at the top,
   but no longer reserve a second, oversized empty field beneath the content. */
@media (min-width: 1080px) {
  .benefit-band {
    height: auto;
    min-height: 0;
    /* The row is visually centred between the two torn edges. */
    padding-top: clamp(92px, 5vw, 108px);
    padding-bottom: clamp(42px, 3vw, 56px);
  }

  .about {
    /* Shift the complete content block slightly down without enlarging the section. */
    padding-top: calc(var(--paper-cut-content-clearance) + 12px);
    padding-bottom: clamp(40px, 2.8vw, 56px);
  }

  .membership {
    height: auto;
    min-height: 0;
    /* The photo clears the incoming cut by the same visible amount as the outgoing cut. */
    padding-top: max(calc(var(--paper-cut-content-clearance) + 48px), clamp(192px, 11.2vw, 228px));
    padding-bottom: clamp(12px, 1vw, 20px);
  }

  .csc {
    min-height: 0;
    /* Match the visible top and bottom breathing room around the paper edge. */
    padding-top: calc(var(--paper-cut-content-clearance) + 36px);
    padding-bottom: clamp(20px, 1.5vw, 28px);
  }

  .varieties {
    /* Keep the heading clear of the deep incoming sand-paper edge. */
    padding-top: calc(var(--paper-cut-content-clearance) + 72px);
    padding-bottom: 94px;
  }

  .contact {
    /* Bring the copy and form onto the same visual baseline as the other sections. */
    padding-top: 44px;
  }
}

/* CTA in the membership paper card: uses the shared orange button treatment. */
.price-card__cta {
  margin-top: clamp(30px, 2.5vw, 42px);
}

@media (max-width: 900px) {
  .price-card__cta {
    margin-top: clamp(34px, 6vw, 48px);
  }
}

.cost-steps article {
  /* Keep the number and its copy on one shared top baseline. */
  align-items: start;
}

/* Small optical adjustment for the transparent top of the supplied paper art. */
.cost-steps article > strong,
.cost-steps article > div {
  transform: translateY(16px);
}

/* The narrow paper cards have less lower visual area, so their content needs
   a slightly higher optical centre than tablet and desktop. */
@media (max-width: 620px) {
  .cost-steps article > strong,
  .cost-steps article > div {
    transform: translateY(0);
  }
}

/* The menu's lower paper is a single supplied sand sheet.  Its lower edge is
   placed outside the viewport, leaving only the intended torn upper edge
   visible — never a rectangular sand fill or a clipped second tear. */
@media (max-width: 1100px) {
  .main-nav,
  .main-nav::before,
  .main-nav::after {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  .main-nav,
  .main-nav.is-open {
    background: var(--green) !important;
  }

  .main-nav.is-open::after {
    bottom: -48px;
    height: calc(var(--interactive-paper-edge) + 48px);
    background-color: transparent !important;
    background-image: url("../images/backgrounds/green-paper-banner.webp");
    background-position: 42% top;
    background-size: 112% auto;
    transform: none;
  }
}

/* The compact-desktop hand-off keeps the same readable contribution strips
   as the tablet view.  At this width the source sheet is much taller than
   the card; preserving its intrinsic height cropped away the upper tear and
   made adjacent cards overlap. */
@media (min-width: 1080px) and (max-width: 1219px) {
  .cost-steps { max-width: 690px; }

  .cost-steps article {
    min-height: 0;
    aspect-ratio: 3508 / 1280;
    background-position: center bottom;
    background-size: 100% auto;
  }

  .cost-steps article:not(:last-child) {
    margin-bottom: clamp(12px, 1.8vw, 20px);
  }
}

/* The paper layer belongs to the complete document rather than the viewport:
   it therefore scrolls with every section and sits above photos, type and
   paper edges alike. It never participates in hit-testing. */
body { position: relative; }

html::before { content: none; }

/* A contrast layer supplies the raw fibre-and-fleck character on imagery and
   green paper: unlike `screen`, it contains both dark and light grain. */
body::before {
  content: "";
  position: absolute;
  z-index: 4501;
  inset: 0;
  min-height: 100%;
  pointer-events: none;
  background-image: url("../images/textures/paper-grain.jpg"), url("../images/textures/grain.svg");
  background-position: center top, 0 0;
  background-size: max(100%, 1200px) auto, 160px 160px;
  background-repeat: repeat-y, repeat;
  background-blend-mode: multiply;
  mix-blend-mode: overlay;
  opacity: .48;
  filter: grayscale(1) contrast(1.8);
}

body::after {
  content: "";
  position: absolute;
  z-index: 4500;
  inset: 0;
  min-height: 100%;
  pointer-events: none;
  background-image: url("../images/textures/paper-grain.jpg"), url("../images/textures/grain.svg");
  background-position: center top, 0 0;
  background-size: max(100%, 1200px) auto, 220px 220px;
  background-repeat: repeat-y, repeat;
  background-blend-mode: multiply;
  mix-blend-mode: multiply;
  opacity: .34;
  filter: grayscale(1) contrast(1.38);
}

/* The age gate uses the same document-level grain rather than a second
   approximation.  Keeping the existing two layers above the entry overlay
   guarantees identical colour, texture scale and contrast at every width. */
html:not(.age-confirmed) body::before { z-index: 5002; }
html:not(.age-confirmed) body::after { z-index: 5001; }
html:not(.age-confirmed) .age-gate::before,
html:not(.age-confirmed) .age-gate::after {
  content: none !important;
  display: none !important;
}

/* Keep the contact form's intended paper-field proportions fixed. */
.contact-form textarea { resize: none; }

/* Centre the THC icon-and-label group in the coloured information panel on
   narrow strain cards. */
@media (max-width: 620px) {
  .strain-strength { transform: translateY(0); }
}

/* Desktop accordion sublines use the display type and share the exact left
   alignment of the icon column above them. */
@media (min-width: 1101px) {
  .why .accordion-panel-inner {
    padding-left: max(var(--side), calc((100vw - var(--shell)) / 2));
  }

  .why .accordion-panel-inner > p {
    font-family: "Bebas Neue", Impact, sans-serif;
    /* Keep the supporting copy visibly secondary to the orange title, while
       giving it the same confident display presence.  The measure also
       creates deliberate, readable line breaks on wide desktop panels. */
    max-width: 68ch;
    font-size: clamp(30px, 2.5vw, 40px);
    line-height: .98;
  }
}

/* The supplied artwork begins halfway down its transparent canvas. Map
   that midpoint to the card top, independently of the content height. */
@media (max-width: 620px) {
  .cost-steps {
    gap: 28px;
  }

  .cost-steps article {
    min-height: 190px;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 16px;
    height: auto;
    aspect-ratio: auto;
    padding: 40px 30px 40px;
    background-position: center bottom;
    background-size: 100% 200%;
  }

  .cost-steps article:not(:last-child) {
    margin-bottom: 0;
  }

  .cost-steps h3 {
    line-height: .96;
  }

  .cost-steps p {
    margin-top: 9px;
    font-size: clamp(12px, 3.45vw, 13px);
    line-height: 1.36;
  }
}

/* Compact project-status notice above the hero. */
.contact-trap { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%); pointer-events: none; }
@media (max-width: 700px) {
  .contact-form input, .contact-form textarea { font-size: 16px; }
}
.build-notice {
  position: static;
  z-index: 3;
  display: grid;
  place-items: center;
  min-height: 36px;
  padding: 7px var(--side);
  color: var(--paper);
  background: var(--orange);
  text-align: center;
}

.build-notice p {
  max-width: var(--shell);
  font-size: 13px;
  line-height: 1.35;
}

/* Added information keeps the established typographic hierarchy. */
.price-card__note {
  width: min(100%, 385px) !important;
  margin-top: clamp(20px, 2vw, 28px) !important;
  color: var(--ink);
  font-family: "Iosevka Charon Mono", ui-monospace, monospace !important;
  font-size: clamp(13px, 1.15vw, 15px) !important;
  line-height: 1.4 !important;
  text-align: left;
}

.join-steps {
  display: grid;
  gap: 11px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.join-steps li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  font-size: 17px;
  line-height: 1.3;
}

.join-steps b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--paper);
  background: var(--orange);
  border-radius: 50%;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
}

@media (max-width: 620px) {
  .build-notice {
    min-height: 48px;
    padding-block: 8px;
  }

  .build-notice p {
    font-size: 12px;
  }

  .price-card.paper-card {
    /* Reserve room for the artwork's transparent tail and torn lower edge,
       including when the note wraps onto extra lines on narrow phones. */
    height: auto;
    aspect-ratio: auto;
    padding-bottom: clamp(80px, 23vw, 96px);
  }

  .price-card__note {
    width: min(100%, 270px) !important;
    font-size: 12px !important;
  }

  .join-steps {
    gap: 9px;
    margin-top: 20px;
  }

  .join-steps li {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    font-size: 14px;
  }

  .join-steps b {
    width: 30px;
    height: 30px;
    font-size: 22px;
  }
}