/**
 * Best Kept Season landing page.
 *
 * Refactored from the static prototype in tmp/bks: the inline styles there
 * have been lifted into classes, and the hardcoded reason markup replaced
 * with rules that apply to the feed's generated articles.
 *
 * Scoped under #best-kept-season and .bks- prefixes so nothing leaks into the
 * surrounding site chrome, which is rendered by the theme.
 */

:root {
  --bks-accent: #e5326e;
  --bks-ink: #1a1a1a;
  --bks-black: #000;
  --bks-paper: #fff;
  --bks-indigo: #2b1a6b;
  --bks-muted: #c7c4c0;
  --bks--grey: #787878;

  /* The layout grid, in one place. The spine sits at --bks-spine and the text
     column starts at --bks-text-indent; the dots are positioned from the
     difference between the two, so moving either keeps them aligned. */
  --bks-spine: 18.02%;
  --bks-text-indent: 27.6%;
  --bks-gutter-right: 8%;
}

@keyframes bks-pulse {
  0% { box-shadow: 0 0 0 0 rgba(26, 26, 26, 0.35); }
  70% { box-shadow: 0 0 0 10px rgba(26, 26, 26, 0); }
  100% { box-shadow: 0 0 0 0 rgba(26, 26, 26, 0); }
}

@keyframes bks-rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------- Hero -- */
 #main {
    margin-top: -68px;
}
@media print, screen and (min-width: 48em) {
    #main {
        margin-top: -93px;
    }
}
#best-kept-season {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  min-height: 600px;
  width: 100%;
  overflow: hidden;
  color: #fff;
  text-align: center;
}
form a {
    font-weight: 700;
    text-decoration: underline;
}
/* ------------------------------------------------------ Hero mask shape -- */

/* The mask svg paints nothing itself; it only carries the <mask> that the
   masked element references. Absolute so its zero box cannot affect layout. */
#bks-masksvg {
  position: absolute;
}

/* Everything inside the hero is masked as one layer, so the photo, scrim and
   type are all cut by the same silhouette.

   mask-mode: alpha reads the path's opacity rather than its luminance, which is
   why the path is filled white. The -webkit- prefixes keep Safari working: it
   still needs mask-image on the prefixed property.

   Applied from script rather than unconditionally: the mask is only added once
   the JS has confirmed it can drive the shape, so a browser that never runs the
   script shows the hero unmasked instead of blank. */
.bks-hero--mask.bks-hero--mask--ready .bks-hero__masked {
  -webkit-mask-image: url(#bks-mask);
  mask-image: url(#bks-mask);
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  /* Geometry stated rather than left to the defaults.

     The masked element holds a child that overflows it (.bks-hero__media is
     inset -12% vertically for the parallax). Chrome resolves an objectBoundingBox
     mask against the element's own border box, Firefox against a box that takes
     the overflowing ink into account, so the shape lands lower there — the
     difference is exactly the 12% overhang.

     Pinning origin and clip to border-box, with an explicit position and size,
     makes both engines resolve the mask against the element's own box. */
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-origin: border-box;
  mask-origin: border-box;
  -webkit-mask-clip: border-box;
  mask-clip: border-box;
}

.bks-hero__masked {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Clips the parallax layer's 12% overhang to this box, so the element the mask
     is resolved against has no overflowing ink for an engine to take into
     account. The hero already clips at the same edges, so nothing that was
     previously visible is lost. */
  overflow: hidden;
}

/* No mask when the visitor has asked for less motion: the shape would still be
   applied but never animate, which reads as an unexplained crop. */
@media (prefers-reduced-motion: reduce) {
  .bks-hero--mask.bks-hero--mask--ready .bks-hero__masked {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* The background image and its parallax wrapper. Inset vertically so the
   parallax shift never exposes an edge. */
.bks-hero__media {
  position: absolute;
  inset: -12% 0;
  will-change: transform;
}

.bks-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Darkens the photo top and bottom so the white type stays legible over
   whatever the image happens to be. */
.bks-hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(12, 8, 6, 0.42) 0%,
    rgba(12, 8, 6, 0.1) 40%,
    rgba(12, 8, 6, 0.45) 100%
  );
}

.bks-hero__inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 3vw;
  padding: 0 24px;
  /* The hero is not interactive except for the button, so clicks fall
     through to the page behind. */
  pointer-events: none;
}

/**
 * Holding the content back until the photo has loaded.
 *
 * The heading, logo and button each run a staggered bks-rise on load. Left to
 * themselves they play against a blank background on a slow connection and are
 * finished before the photo turns up, so the entrance is never seen.
 *
 * The content is hidden until the JS adds .bks-hero--loaded, and the rise
 * animations below are paused rather than delayed, so the stagger starts from
 * the beginning at that moment. visibility rather than display keeps the
 * grid's layout resolved, so nothing reflows when it appears.
 *
 * The class is added on load or error, and immediately if the image is already
 * complete from cache — so a broken photo still shows the content rather than
 * hiding the hero for good.
 */
.bks-hero__inner {
  visibility: hidden;
}

.bks-hero--loaded .bks-hero__inner {
  visibility: visible;
}

/* Paused up front so the delays do not elapse while the photo is still on the
   wire. Running them only once loaded keeps the stagger intact. */
.bks-hero__heading,
.bks-hero__logo,
.bks-hero__cta {
  animation-play-state: paused;
}

.bks-hero--loaded .bks-hero__heading,
.bks-hero--loaded .bks-hero__logo,
.bks-hero--loaded .bks-hero__cta {
  animation-play-state: running;
}


.bks-hero__heading {
  font-size: 3vw;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  text-shadow: 0 0.4vw 2vw rgba(0, 0, 0, 0.28);
  animation: bks-rise 0.9s 0.25s both;
  margin: 0;
  color: #fff;
}

.bks-hero__logo {
  display: block;
  width: 55%;
  height: auto;
  animation: bks-rise 1s 0.45s both;
  filter: drop-shadow(0 0.4vw 2vw rgba(0, 0, 0, 0.3));
}

.bks-hero__cta {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  padding: 0.85vw 2.2vw;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  color: #fff;
  font-size: clamp(12px, 0.95vw, 16px);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  animation: bks-rise 0.9s 0.62s both;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.bks-hero__cta:hover,
.bks-hero__cta:focus {
  background: #fff;
  color: var(--bks-ink);
  border-color: #fff;
}

/* ------------------------------------------------- Airport ticker count -- */

#total-reasons {
  display: flex;
  gap: 0.6vw;
  /* The board is not built until the first total arrives, so that it appears
     already showing its starting value rather than a row of zeroes. Reserving
     the flap height here keeps the hero's grid from shifting when it lands.
     Mirrors --bks-flap-height on .bks-ticker__digit, which drops to a fixed
     86px under 800px — that override lives with the digit rules further down. */
  min-height: 12vw;
}

/**
 * One flap of the split-flap board.
 *
 * A real unit is a card split across the middle. When the digit changes the
 * top half of the OUTGOING digit hinges down from the centre line and lands
 * over the bottom half of the INCOMING one — so four layers are needed, not
 * one rotating face:
 *
 *   .bks-ticker__half--top       static, shows the new digit's top half
 *   .bks-ticker__half--bottom    static, shows the old digit's bottom half
 *   .bks-ticker__flap--top       animates 0 → -90deg, the old digit's top
 *   .bks-ticker__flap--bottom    animates 90deg → 0, the new digit's bottom
 *
 * The two flaps run back to back, each over half the duration, which is what
 * produces the fall-and-land rather than a card spinning end over end.
 */
.bks-ticker__digit {
  /* The inner glyph box is drawn at exactly this height so the two clipped
     halves line up into one character. Set as a variable because the
     breakpoint has to change both together. */
  --bks-flap-height: 12vw;
  /* Total time for one flip. The JS overrides this per unit while counting up
     so the board can tick fast without losing the animation. */
  --bks-flip-duration: 600ms;

  position: relative;
  width: 9.6vw;
  height: var(--bks-flap-height);
  /* Shared by the flaps so they rotate in the same 3D space. */
  perspective: 900px;
  border-radius: 4px;
  box-shadow: 0 1.2vw 3vw rgba(0, 0, 0, 0.35);
  font-size: 8.4vw;
  line-height: 1;
  color: var(--bks-ink);
}

/* Every layer is the same box; the halves differ only in which end they clip
   to and where their hinge is. */
.bks-ticker__half,
.bks-ticker__flap {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background: #fff;
  /* Hides the mirrored digit that would otherwise show through mid rotation. */
  backface-visibility: hidden;
}

.bks-ticker__half--top,
.bks-ticker__flap--top {
  top: 0;
  border-radius: 4px 4px 0 0;
  /* Hinged on the centre line, so it falls forward from there. */
  transform-origin: bottom center;
}

.bks-ticker__half--bottom,
.bks-ticker__flap--bottom {
  bottom: 0;
  border-radius: 0 0 4px 4px;
  transform-origin: top center;
}

/* The digit is drawn at full height inside a half height box, then shifted so
   each half shows its own portion of the same glyph. Without this the number
   would be centred within each half and read as two digits. */
.bks-ticker__digit-inner {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--bks-flap-height);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bks-ticker__half--top .bks-ticker__digit-inner,
.bks-ticker__flap--top .bks-ticker__digit-inner {
  top: 0;
}

.bks-ticker__half--bottom .bks-ticker__digit-inner,
.bks-ticker__flap--bottom .bks-ticker__digit-inner {
  bottom: 0;
}

/* Flaps sit above the static halves while they move, and are absent entirely
   until a change is being animated. */
.bks-ticker__flap {
  z-index: 2;
  will-change: transform;
  display: none;
}

/* The rising bottom flap has to finish above the falling top one: they occupy
   the same space at the handover, and the incoming half must win. */
.bks-ticker__flap--bottom {
  z-index: 3;
}

.bks-ticker__digit--flipping .bks-ticker__flap {
  display: block;
}

/* Each half takes half of --bks-flip-duration, which the count up shortens so
   every tick still animates rather than skipping the flip. */
.bks-ticker__digit--flipping .bks-ticker__flap--top {
  animation: bks-flip-top calc(var(--bks-flip-duration) / 2) ease-in forwards;
}

.bks-ticker__digit--flipping .bks-ticker__flap--bottom {
  /* Starts as the top flap finishes, so the two read as one continuous fall.

     "both" rather than "forwards" is the important part: during the delay an
     animation with only a forwards fill holds no transform at all, so this
     flap would sit flat at rotateX(0) and show the incoming digit for the
     whole first half of the flip. A backwards fill pins it at the keyframe
     start — folded back at 90deg, edge on and invisible — until it moves. */
  animation: bks-flip-bottom calc(var(--bks-flip-duration) / 2)
    calc(var(--bks-flip-duration) / 2) ease-out both;
}

/* The top flap falls away from the viewer. */
@keyframes bks-flip-top {
  from { transform: rotateX(0deg); }
  to { transform: rotateX(-90deg); }
}

/* The new bottom half swings up into place. */
@keyframes bks-flip-bottom {
  from { transform: rotateX(90deg); }
  to { transform: rotateX(0deg); }
}

/* The seam across the middle, above every layer including the flaps so the
   split stays visible throughout the fall. */
.bks-ticker__digit::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: rgba(0, 0, 0, 0.13);
  pointer-events: none;
  z-index: 4;
}

/* The live value is rendered as flaps, so the raw number is for screen
   readers only. */
#total-reasons--value {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------- Reasons feed -- */

.bks-feed {
  position: relative;
  z-index: 1;
  background: var(--bks-paper);
  padding: 0 0 2rem;
  margin-bottom: 2rem;
  /* No overflow rule here on purpose. The photos fill the article rather than
     breaking out with a 100vw box, so there is nothing to clip — and any
     overflow other than visible would make this a scroll container and stop
     them sticking. */
}

/* The list spans the full width and applies no indent of its own, so an item
   that wants to be full bleed simply is one. Each article pads itself in to
   the text column instead. */
.best-kept-season__list {
  padding: 3.4vw 0 0;
  position: relative;
}

/* The vertical spine the dots sit on.

   Drawn on the list rather than the section so it cannot run down past the
   status message and the load more button, and stopped short at the bottom so
   it ends on the last dot instead of trailing below it. The inset matches the
   last article's height below its own dot: the dot sits at 4.2vw from the
   article top, so everything after that is spine with nothing on it. */
.best-kept-season__list::before {
  content: '';
  position: absolute;
  left: var(--bks-spine);
  top: var(--bks-spine-head, 0);
  bottom: var(--bks-spine-tail, 0);
  width: 2px;
  background: var(--bks--grey);
  opacity: 1;
}

/* Reasons start muted and are brought to full contrast by the scroll
   handler as they reach the focus line. The horizontal padding is what puts
   the text in its column, aligned to the spine. */
.best-kept-season__item {
  position: relative;
  padding: 3rem var(--bks-gutter-right) 3rem var(--bks-text-indent);
  transition: color 0.55s ease, transform 0.55s ease;
}
.best-kept-season__item:first-child {


}
.best-kept-season__item .best-kept-season__content{
  transition: opacity 0.55s ease;
  opacity: .4;
}

.best-kept-season__item--active {
  color: var(--bks-black);
}

.best-kept-season__item--active .best-kept-season__content{
  opacity: 1;
}

.bks-dot {
  position: absolute;
  left: var(--bks-spine);
  top: 53px;
  width: 20px;
  height: 20px;
  margin-left: -9px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--bks-black);
  opacity: 1;
  transition: background 0.45s ease, opacity 0.45s ease, transform 0.45s ease;
}

/* Passed and active dots are filled; only the active one pulses. */
.bks-dot--passed {
  background: var(--bks-black);
  opacity: 1;
}

.bks-dot--active {
  background: var(--bks-black);
  opacity: 1;
  transform: scale(1.2);
  animation: bks-pulse 1.8s ease-out infinite;
}

.best-kept-season__name {
  margin: 0 0 0.45vw;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--bks-black);
}

.best-kept-season__tip {
  margin: 0;
  font-size: 24px;
  line-height: 1.32;
}

.best-kept-season__subtitle {
  margin-top: 1.4vw;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.best-kept-season__item--has-image .best-kept-season__tip {
  font-size: 32px;
}
.best-kept-season__item--has-image .best-kept-season__subtitle {
  font-size: 22px;
}
@media (max-width: 800px) {
  .best-kept-season__item {
    padding: 2rem var(--bks-gutter-right) 2rem var(--bks-text-indent);
  }  
  .best-kept-season__name {
    font-size: 20px;
  }

  .best-kept-season__tip {
    font-size: 20px;
  }

  .best-kept-season__subtitle {
    font-size: 14px;
  }
  .best-kept-season__item--has-image .best-kept-season__tip {
    font-size: 26px;
  }
  .best-kept-season__item--has-image .best-kept-season__subtitle {
    font-size: 18px;
  }  
}

/* An item with a feed image becomes a full bleed panel rather than a text
   row: the article becomes a tall scroll region and the photo inside it pins
   for the duration, so the text travels over a held image.

   200vh gives one viewport of scrolling while the picture is pinned. Nothing
   in the ancestor chain may set overflow other than visible, or the sticky
   child stops sticking. */
.best-kept-season__item--has-image {
  min-height: 200vh;
  /* No horizontal padding: the photo fills the article, and the text pads
     itself in below. The article already spans the full width now that the
     list has no indent, so no negative margin breakout is needed. */
  margin: 6vw 0;
  padding: 0;
  color: #fff;
  font-weight: bold;
  font-size: clamp(24px, 2.1vw, 42px);
}

.best-kept-season__item--has-image:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--bks-spine);
  width: 2px;
  background: #fff;
}

/* The pinned backdrop. One viewport tall inside a much taller article, which
   is what gives it something to stick against. Fills the article, which is
   already the full browser width. */
.best-kept-season__media {
  position: sticky;
  top: 0;
  height: 100vh;
  background-size: cover;
  background-position: center;
  /* Sits behind the text, which is lifted above it below. */
  z-index: 0;
}

/* Text scrolls over the held image. The negative pull is one viewport, so it
   starts at the top of the pinned photo rather than below it, and the
   horizontal padding puts it back in the text column. */
.best-kept-season__item--has-image .best-kept-season__content {
  position: relative;
  z-index: 1;
  margin-top: -100vh;
  padding: 45vh var(--bks-gutter-right) 55vh var(--bks-text-indent);
  /* Keeps the type readable wherever it happens to sit over the photo. */
  text-shadow: 0 0.2vw 1.5vw rgba(0, 0, 0, 0.6);
}

/* White against the photo, and lifted above the pinned backdrop. Stays
   absolutely positioned like every other dot — it scrolls with the article
   rather than pinning, so it still reads as a marker passing the spine. */
.best-kept-season__item--has-image .bks-dot {
  top: 46.4vh;
  background: #fff;
  border-color: #fff;
  z-index: 2;
}

/* .best-kept-season__item--has-image.best-kept-season__item--active {
  color: #fff;
} */

.best-kept-season__item--has-image {
  color: #fff;
}

.best-kept-season__item--has-image h2 {
  color: #fff;
}

.best-kept-season__status {
  padding-left: var(--bks-text-indent);
  padding-right: var(--bks-gutter-right);
  font-size: clamp(15px, 1.05vw, 19px);
  color: #5b5b66;
}

.best-kept-season__load-more {
  display: inline-flex;
  align-items: center;
  margin: 2vw 0 0 var(--bks-text-indent);
  padding: 18px 48px;
  border: 0;
  border-radius: 999px;
  background: var(--bks-accent);
  color: #fff;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.best-kept-season__load-more:hover:not([disabled]) {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.best-kept-season__load-more[disabled] {
  opacity: 0.6;
  cursor: default;
}

/* Narrow screens cannot carry the 27.6% indent: the spine and dots move to
   the left edge and the type drops to fixed sizes. */
@media (max-width: 800px) {
  #best-kept-season {
    height: auto;
    min-height: 100vh;
    padding: 96px 0;
  }

  .bks-hero__heading {
    font-size: 28px;
  }

  .bks-hero__logo {
    width: 72%;
  }

  .bks-hero__cta {
    padding: 14px 28px;
    font-size: 12px;
  }

  .bks-ticker__digit {
    --bks-flap-height: 86px;
    width: 68px;
    font-size: 58px;
  }

  /* Kept in step with the flap height above, so the space reserved for the
     board before it is built still matches what lands in it. */
  #total-reasons {
    min-height: 86px;
  }

  /* Retuning the three grid variables moves the spine, the dots, the text
     column, the status line and the button together — a percentage indent is
     unusable at this width. */
  :root {
    --bks-spine: 20px;
    --bks-text-indent: 48px;
    --bks-gutter-right: 20px;
  }

  .bks-dot {
    top: 35px;
  }

  .best-kept-season__name {
    font-size: 22px;
  }

  .best-kept-season__tip {
    font-size: 20px;
  }

  /* Shorter hold on a phone: 200vh of scrolling past one photo is a long way
     on a small screen, and sticky is expensive there. */
  .best-kept-season__item--has-image {
    min-height: 160vh;
    margin: 24px 0;
  }

  .best-kept-season__item--has-image .best-kept-season__content {
    padding-top: 40vh;
    padding-bottom: 45vh;
  }
  .best-kept-season__item--has-image .bks-dot {
    top: 40.9vh;
  }  
}

/* The scroll effects are decoration. Switch them off wholesale rather than
   animating anything at reduced speed. */
@media (prefers-reduced-motion: reduce) {
  .bks-hero__heading,
  .bks-hero__logo,
  .bks-hero__cta {
    animation: none;
  }

  .bks-dot--active {
    animation: none;
  }

  /* The JS already skips the flip, but stop the flaps animating in case the
     class is ever applied. */
  .bks-ticker__digit--flipping .bks-ticker__flap--top,
  .bks-ticker__digit--flipping .bks-ticker__flap--bottom {
    animation: none;
  }

  .best-kept-season__item,
  .bks-dot {
    transition: none;
  }

  /* Unpin the photo and collapse the hold. A held image with text travelling
     over it is the same class of effect this setting asks us to drop. The
     photo becomes a plain banner with the text beneath it. */
  .best-kept-season__item--has-image {
    min-height: 0;
    padding-bottom: 6vw;
  }

  .best-kept-season__media {
    position: static;
    height: 60vh;
  }

  /* Only the vertical values change: the horizontal padding is what holds the
     text in its column, so it has to survive. */
  .best-kept-season__item--has-image .best-kept-season__content {
    margin-top: 0;
    padding-top: 4vw;
    padding-bottom: 0;
  }

  .best-kept-season__item--has-image .bks-dot {
    top: 8vw;
  }
}

/* -------------------------------------------------------- Entry form --- */


#reasons-form {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 30px;
}
/* Keeps a validation message on its own row under a checkbox and its label,
   rather than squeezed alongside them in the flex row. */
.form__field--checkbox .reasons-form__error {
  flex-basis: 100%;
}

/**
 * Honeypot. Positioned off screen rather than display:none or
 * visibility:hidden, both of which are cheap for a bot to test for. The field
 * is also aria-hidden and tabindex="-1" in the markup, so nobody using a
 * keyboard or screen reader can land on it by accident.
 */
.reasons-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.reasons-form__count {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: #595959;
}

/* Over the limit. Colour alone is not the only signal — the wording changes
   to "N words over the limit" too. */
.reasons-form__count--over {
  color: #a51b00;
  font-weight: 700;
}

.reasons-form__error {
  margin: 0.25rem 0 0;
  color: #a51b00;
}

/* The JS sets aria-invalid on a rejected field. Scoped to the form rather
   than a field class so it survives the markup being restyled. */
#reasons-form__form [aria-invalid="true"] {
  border-color: #a51b00;
}

.reasons-form__message {
  margin-bottom: 1rem;
  padding: 0.75rem;
  border-left: 4px solid transparent;
}

.reasons-form__message--error {
  border-left-color: #a51b00;
  background-color: #fcf4f2;
  color: #a51b00;
}

.reasons-form__message--success {
  border-left-color: #325e1c;
  background-color: #f3faef;
  color: #325e1c;
}

/* The button itself is styled by the theme. Only the disabled state is set
   here, because the interaction gate ships it disabled and it would otherwise
   look clickable before it is. */
#reasons-form__form button[type="submit"][disabled] {
  opacity: 0.6;
  cursor: default;
}

.reasons-form__intro {
  padding: 2rem 30px;
}

.reasons-form__form-hold {
   padding: 2rem 30px;
  color: var(--bks-black);
}
@media screen and (max-width: 800px) {
  .reasons-form__form-hold {
     padding: 2rem 30px;
  }
}
.reasons-form__form-hold-frame {
  position: relative;
  max-width: 960px;
  margin-top: 30px;
}

.reasons-form__form-hold-frame::after {
  max-width: 1080px;
  border-radius: var(--border-radius);
  corner-shape: var(--corner-shape);
  background: #F7F7F7;
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: -1;
  margin: -60px -60px;
}

@media (max-width: 1200px) {
  .reasons-form__form-hold-frame::after {
    margin: -25px -30px;
  }
}

.reasons-form__form-hold form{
  color: var(--bks-black);
  max-width: 1100px;
}

.reasons-form__footer-note {
  padding: 2rem 0;
  text-align: center;
}

.reasons-form__form-hold label {
  color: var(--bks-black);
  font-size: unset;
}

.reasons-form__form-hold input[type="tel"],
.reasons-form__form-hold input[type="text"],
.reasons-form__form-hold input[type="email"],
.reasons-form__form-hold select,
.reasons-form__form-hold textarea {
  border-radius: var(--border-radius);
  corner-shape: var(--corner-shape);
}

.reasons-form__form-hold label .required {
  color: #CC285B;
}

.reasons-form__form-hold .form__field--checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.reasons-form__form-hold .form__field--checkbox input {
  margin-top: 3px;
}
.reasons-form__form-hold .form__field--checkbox label {
  margin: 0;
}

#reasons-modal {
  max-width: 600px;
}
#reasons-modal section {
  margin-bottom: 0;
  padding: 3rem;
  text-align: center;
  width: 100%;
}