/* Caprice des Dieux — layout of the "70 years of memorable moments" campaign.
   The stylesheet is complete and self-sufficient: the template does not load the
   theme's CSS, so everything, the reset included, has to be here. */

:root {
  --cdd70-navy: #1a5296;
  --cdd70-blue: #2e77be;
  --cdd70-blue-dark: #23629f;
  --cdd70-cream: #fdf8ec;
  --cdd70-gold: #daab49;
  --cdd70-muted: #9aa8b6;
  --cdd70-input-text: #1c3d63;
  /* The red a refused field is outlined in — the same one .cdd70-status.is-error
     writes its sentence in, so the message under the button and the fields it is
     about are visibly one statement. */
  --cdd70-error: #c3372f;

  /* The footer has its own palette — it is a copy of the ilovecheese.be footer,
     not a campaign element, so it deliberately does not inherit Caprice des
     Dieux's navy and gold. */
  --cdd70-footer-gold: #f0c450;
  --cdd70-footer-bar: #e5e5e5;

  --cdd70-card-width: 1380px;
  --cdd70-container-width: 1140px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Part of the reset, and load-bearing: the thank-you screen is in the DOM from
   the first render and stays out of the way on the `hidden` attribute alone. The
   browser's own [hidden] rule is the weakest one there is, so this restates it
   at a specificity nothing here can lose to. */
[hidden] {
  display: none !important;
}

html {
  background: #ffffff;
}

body.cdd70-page {
  margin: 0;
  padding: 0;
  background: #ffffff;
  color: var(--cdd70-navy);
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------ language switcher --- */

/* The template does not call get_header(), so the switcher from WPML's bar
   never reaches this page — we render our own. It sits OVER the banner (whose
   top part is sky, so light pills stay readable) rather than over the card,
   where it would collide with the logo sticking out above its edge. */
.cdd70-page {
  position: relative;
}

.cdd70-langs {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 2;
}

.cdd70-langs ul {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cdd70-langs__item {
  display: block;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--cdd70-navy);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
}

.cdd70-langs__item:hover,
.cdd70-langs__item:focus-visible {
  background: #ffffff;
}

.cdd70-langs__item.is-current {
  background: var(--cdd70-navy);
  color: #ffffff;
}

/* --------------------------------------------------------------- banner --- */

/* The banner is a <picture> in the template, and it is deliberately NOT cropped
   at any width: the slogan and the year ovals are part of the artwork, so
   anything cut off is campaign copy nobody gets to read. Hence no aspect-ratio
   and no background-size games — the image fills the width, keeps its own
   proportions, and its height is the height of the whole section.

   The <picture> element itself is inline by default; making it a block keeps it
   from adding the inline-layout line-height gap under the banner. */
.cdd70-hero {
  display: block;
}

.cdd70-hero__img {
  display: block;
  width: 100%;
  height: auto;
  /* The yellow from the lower part of the banner: the img already reserves its
     box through the width/height attributes, and this keeps that box from
     flashing white before the file lands. */
  background-color: #e9b944;
}

/* ----------------------------------------------------------------- card --- */

.cdd70-form-section {
  /* 70px at the top - the 50px the logo sticks out above the card = 20px of gap
     from the banner, exactly as in the mockup. */
  padding: 70px 24px 110px;
}

.cdd70-card {
  position: relative;
  /* On desktop the card is fluid — 70% of the screen width, but never more than
     --cdd70-card-width. The ceiling only kicks in above ~1970px; below that
     (the mockup's 1920px included) the 70% wins. */
  width: 70vw;
  max-width: var(--cdd70-card-width);
  margin: 0 auto;
  /* The horizontal padding is a custom property because one element has to
     cancel it: the lid artwork on the thank-you screen is drawn to run to the
     card's edges. Keeping the number in one place is what stops the two from
     drifting apart at a breakpoint. */
  --cdd70-card-pad-x: 120px;
  /* The bottom padding is smaller than the top one, because .cdd70-status still
     sits below the button (it reserves height so the message does not shift the
     layout). */
  padding: 112px var(--cdd70-card-pad-x) 44px;
  background: var(--cdd70-cream);
  border-radius: 28px;
}

.cdd70-card__deco {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.cdd70-card__confetti {
  position: absolute;
  top: 0;
  width: 230px;
  height: auto;
}

.cdd70-card__confetti--left {
  left: 0;
}

.cdd70-card__confetti--right {
  right: 0;
}

/* Positioned with left/margin-left rather than transform: translate(-50%) —
   animations.js animates the logo along the Y axis with GSAP, and GSAP
   overwrites the whole transform, which would break the centring. */
.cdd70-card__logo {
  position: absolute;
  top: -50px;
  left: 50%;
  margin-left: -75px;
  width: 150px;
  height: auto;
  z-index: 2;
}

.cdd70-card__inner {
  position: relative;
  z-index: 1;
}

/* -------------------------------------------------------------- heading --- */

.cdd70-title {
  margin: 0;
  text-align: center;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 500;
  color: var(--cdd70-navy);
  text-transform: uppercase;
  line-height: 1.12;
}

.cdd70-title__small,
.cdd70-title__big {
  display: block;
}

.cdd70-title__small {
  font-size: 36px;
  letter-spacing: 0.045em;
}

.cdd70-title__big {
  font-size: 50px;
  font-weight: 700;
  letter-spacing: 0.015em;
}

/* The "2" in "POUR 2 à CAPRI" / "VOOR 2 NAAR CAPRI" — the span lives in the
   dictionaries. In em, so it scales with every breakpoint's title size
   without a rule of its own; line-height 0 keeps the taller digit from
   pushing the line apart. */
.cdd70-title__num {
  font-variant-numeric: lining-nums;
}

.cdd70-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 26px auto 0;
  max-width: 440px;
}

.cdd70-divider__line {
  flex: 1 1 auto;
  height: 1px;
  background: var(--cdd70-gold);
}

.cdd70-divider__heart {
  flex: none;
  width: 22px;
  height: auto;
}

.cdd70-lead {
  margin: 26px auto 0;
  max-width: 820px;
  text-align: center;
  font-size: 18px;
  line-height: 1.55;
  color: var(--cdd70-navy);
}

.cdd70-lead strong {
  font-weight: 700;
}

.cdd70-lead-small {
  margin: 22px auto 0;
  text-align: center;
  font-size: 14px;
  color: var(--cdd70-navy);
}

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

.cdd70-form {
  margin-top: 40px;
}

.cdd70-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 26px;
}

.cdd70-field {
  min-width: 0;
}

.cdd70-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cdd70-navy);
}

.cdd70-label--upper {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.cdd70-star {
  color: var(--cdd70-navy);
}

.cdd70-control {
  position: relative;
}

.cdd70-control input,
.cdd70-control select,
.cdd70-control textarea {
  width: 100%;
  margin: 0;
  padding: 14px 16px 14px 46px;
  border: 1px solid var(--cdd70-blue);
  border-radius: 9px;
  background: #ffffff;
  color: var(--cdd70-input-text);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
}

.cdd70-control input::placeholder,
.cdd70-control textarea::placeholder {
  color: var(--cdd70-muted);
}

.cdd70-control input:focus,
.cdd70-control select:focus,
.cdd70-control textarea:focus {
  outline: none;
  border-color: var(--cdd70-blue-dark);
  box-shadow: 0 0 0 3px rgba(46, 119, 190, 0.18);
}

/* A field the check refused — set and removed by cdd70.js (the form carries
   novalidate, so :invalid is not the signal here; the year <select> is :invalid
   from the first render on purpose, see below).

   It has to come after the :focus rule above and repeat it, because the two
   selectors weigh the same and the last one wins: without the :focus variant the
   outline would flip back to blue on the very field the cursor was just sent
   to. */
.cdd70-control input.is-invalid,
.cdd70-control select.is-invalid,
.cdd70-control textarea.is-invalid {
  border-color: var(--cdd70-error);
  box-shadow: 0 0 0 3px rgba(195, 55, 47, 0.12);
}

.cdd70-control input.is-invalid:focus,
.cdd70-control select.is-invalid:focus,
.cdd70-control textarea.is-invalid:focus {
  border-color: var(--cdd70-error);
  box-shadow: 0 0 0 3px rgba(195, 55, 47, 0.22);
}

.cdd70-control input.is-invalid::placeholder,
.cdd70-control textarea.is-invalid::placeholder {
  color: rgba(195, 55, 47, 0.55);
}

.cdd70-control__icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 19px;
  height: 19px;
  color: var(--cdd70-blue);
  pointer-events: none;
}

.cdd70-control__chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--cdd70-blue);
  pointer-events: none;
}

.cdd70-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  cursor: pointer;
}

/* Until a year is picked, the selected option is the disabled placeholder, so
   the select is :invalid — hence the same grey as the placeholders next to it.
   The form has novalidate, but that does not switch the pseudo-class off. */
.cdd70-select:invalid {
  color: var(--cdd70-muted);
}

.cdd70-select option {
  color: var(--cdd70-input-text);
}

/* The "why" field: on desktop the label and the character counter share a
   single line. */
.cdd70-field--why {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label maxchars"
    "control control";
  align-items: baseline;
  column-gap: 20px;
}

.cdd70-field--why .cdd70-label {
  grid-area: label;
}

.cdd70-maxchars {
  grid-area: maxchars;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cdd70-gold);
}

.cdd70-control--textarea {
  grid-area: control;
}

.cdd70-control--textarea textarea {
  min-height: 118px;
  padding: 16px 18px 32px 46px;
  resize: vertical;
  display: block;
}

.cdd70-control__icon--quote {
  top: 22px;
  transform: none;
  width: 20px;
  height: 20px;
  color: #c9d4de;
}

.cdd70-counter {
  position: absolute;
  right: 14px;
  bottom: 10px;
  font-size: 11px;
  color: var(--cdd70-gold);
  pointer-events: none;
}

.cdd70-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 10px 0 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--cdd70-navy);
}

.cdd70-note svg {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--cdd70-blue);
}

/* --------------------------------------------------------- consent + button --- */

.cdd70-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-top: 36px;
}

.cdd70-consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--cdd70-navy);
  cursor: pointer;
}

.cdd70-consent a {
  color: inherit;
  text-decoration: underline;
}

.cdd70-checkbox {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 19px;
  height: 19px;
  margin: 0;
  border: 1.5px solid var(--cdd70-blue);
  border-radius: 4px;
  background: #ffffff;
  cursor: pointer;
  position: relative;
}

.cdd70-checkbox:checked {
  background: var(--cdd70-blue);
  border-color: var(--cdd70-blue);
}

.cdd70-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 5.5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.cdd70-checkbox:focus-visible {
  outline: 2px solid var(--cdd70-blue-dark);
  outline-offset: 2px;
}

/* The consent box is the one "field" with no border of its own to redden — the
   box IS the border, so it takes the ring instead. */
.cdd70-checkbox.is-invalid {
  border-color: var(--cdd70-error);
  box-shadow: 0 0 0 3px rgba(195, 55, 47, 0.16);
}

.cdd70-required {
  margin: 9px 0 0;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--cdd70-navy);
}

/* One pill, two elements: the form's submit <button> and the <a> on the
   thank-you screen. Sharing the rule is what keeps them identical — the mockup
   draws the same button in both places. */
.cdd70-submit {
  flex: none;
  min-width: 290px;
  padding: 19px 46px;
  border: none;
  border-radius: 999px;
  background: var(--cdd70-blue);
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.cdd70-submit:hover {
  background: var(--cdd70-blue-dark);
}

.cdd70-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.cdd70-status {
  margin: 18px 0 0;
  min-height: 20px;
  font-size: 14px;
  text-align: right;
}

.cdd70-status.is-success {
  color: #1f7a4d;
  font-weight: 600;
}

.cdd70-status.is-error {
  color: #c3372f;
  font-weight: 600;
}

/* --------------------------------------------------- thank-you screen --- */

/* The second .cdd70-card__inner — what the card holds once the entry is in
   Mailchimp. It reuses the card, the confetti and the logo above it, so only
   the block below is new. */

.cdd70-thanks {
  /* The card's own bottom padding is cut short because .cdd70-status reserves
     height under the button; here the button IS the last thing, so the space
     has to come back. */
  padding-bottom: 24px;
  text-align: center;
}

.cdd70-thanks__title {
  margin: 0;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 50px;
  font-weight: 700;
  letter-spacing: 0.015em;
  line-height: 1.12;
  color: var(--cdd70-navy);
  text-transform: uppercase;
}

/* It receives focus after the swap (see showThanks() in cdd70.js), and a
   heading is not a control — the browser's focus ring on it reads as a glitch,
   so it is dropped. Nothing is lost: the scroll and the announcement are what
   that focus is for, and every real control keeps its own ring. */
.cdd70-thanks__title:focus {
  outline: none;
}

.cdd70-thanks__lead {
  margin: 26px auto 0;
  max-width: 720px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--cdd70-navy);
}

.cdd70-thanks__lead strong {
  font-weight: 700;
}

/* Same rule as the banner: the artwork carries the vintage years and a quote,
   so it is shown whole at every width — width:100% + height:auto, never a
   background with cover.

   It runs the full width of the CARD, not of the text column: both files are
   composed with their outer lids cut off by the file's own edge, so stopping at
   the padding would leave them sliced and floating. The negative margin reads
   the card's padding out of a custom property, which is what keeps the bleed
   exact at all three breakpoints. */
.cdd70-thanks__figure {
  display: block;
  margin: 34px calc(-1 * var(--cdd70-card-pad-x)) 0;
}

.cdd70-thanks__img {
  display: block;
  width: 100%;
  height: auto;
}

/* The artwork's lower half is empty (soft shadows under the lids), so the button
   is pulled up into it instead of sitting below a band of white. The pull is
   only correct next to the figure: with no artwork delivered the <picture> is
   not printed at all (cdd70_img_data( …, false )), and an unconditional negative
   margin would drag the button over the lead paragraph. */
.cdd70-thanks__actions {
  margin: 26px 0 0;
}

.cdd70-thanks__figure + .cdd70-thanks__actions {
  margin-top: -90px;
}

/* Shares .cdd70-submit's pill, but it is an <a>: it needs the box and the
   underline reset a <button> gets for free. */
.cdd70-thanks__cta {
  display: inline-block;
  width: 100%;
  max-width: 620px;
  min-width: 0;
  text-align: center;
  text-decoration: none;
}

/* -------------------------------------------------------- recipes gallery --- */

/* A slider (Glide.js) with recipes pulled from ilovecheese.be. From the CDN we
   take only glide.core (the track + slide positioning); the whole presentation
   is done here. */

.cdd70-recipes {
  padding: 64px 0 8px;
}

.cdd70-recipes__wrap {
  /* The gallery is wider than the form card (1380px) — the mockup shows the
     slides at nearly the full width of the screen. */
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 24px;
}

.cdd70-recipes__title {
  margin: 0 0 28px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 42px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--cdd70-navy);
  text-align: left;
}

/* A safeguard in case glide.core from the CDN never arrives: without this the
   slide list falls apart into the theme's/browser's bullets and indentation. */
.cdd70-recipes .glide__slides {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* glide.core gives slides height: 100%, which on a track of automatic height
   collapses the link — its height comes from its own aspect-ratio, not from the
   slide. Auto height lets the image set the row's height. */
.cdd70-recipes .glide__slide {
  display: flex;
  height: auto;
}

/* The slide is a bare image-link: no card body, no hover effect. The frame is
   fixed, because photos from the listing come in different aspect ratios —
   without it slides in one row would have different heights. */
.cdd70-recipe {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
}

/* Keyboard focus is not a hover effect: without an outline of our own the link
   has no content of its own to show a focus ring around. */
.cdd70-recipe:focus-visible {
  outline: 2px solid var(--cdd70-blue);
  outline-offset: 3px;
}

.cdd70-recipe__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cdd70-recipes__arrows {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

.cdd70-recipes__slider--static .cdd70-recipes__arrows {
  display: none;
}

.cdd70-recipes__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--cdd70-blue);
  border-radius: 999px;
  background: #ffffff;
  color: var(--cdd70-blue);
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.cdd70-recipes__arrow:hover {
  background: var(--cdd70-blue);
  color: #ffffff;
}

.cdd70-recipes__arrow svg {
  width: 20px;
  height: 20px;
}

/* ---------------------------------------------------------------- footer --- */

/* The selectors are anchored in .content-info / .bottom-bar, because the classes
   from the original (.container, .row, .brand) are generic enough that bare
   rules would one day reach the rest of the page. */

.content-info {
  background: #ffffff;
  /* A large gap at the top and a small one at the bottom — the logo is the
     tallest element in the row and in the mockup it almost touches the grey
     bar. */
  padding: 56px 0 20px;
}

.content-info .container,
.bottom-bar .container {
  max-width: var(--cdd70-container-width);
  margin: 0 auto;
  padding: 0 15px;
}

.content-info ul,
.bottom-bar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.content-info a,
.bottom-bar a {
  color: #000000;
  text-decoration: none;
}

.content-info a:hover,
.bottom-bar a:hover {
  color: var(--cdd70-footer-gold);
}

/* The logo, the "Suivez-nous" block and the menu sit in one row. */
.content-info .col-lg-7 {
  display: flex;
  align-items: center;
  gap: 34px;
}

.content-info .brand {
  margin: 0;
  flex: none;
}

.content-info .brand img {
  display: block;
  width: 127px;
  height: auto;
}

.content-info .social-network-wrapper h2 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cdd70-footer-gold);
}

.social-network-nav ul {
  display: flex;
  align-items: center;
  gap: 20px;
}

.social-network-nav a {
  display: block;
}

/* One height for all three icons; the width follows from their own viewBoxes
   (which differ — the paths are 1:1 from Font Awesome). */
.social-network-nav svg {
  display: block;
  width: auto;
  height: 26px;
}

/* The menu aligns to the row of icons, not to the centre of the whole
   "Suivez-nous" block — hence the drop of roughly half the height of the heading
   above the icons. */
.nav-footer {
  margin-top: 18px;
}

.ilovecheese-footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 27px;
  font-size: 14px;
  line-height: 1.4;
}

.bottom-bar {
  background: var(--cdd70-footer-bar);
  padding: 14px 0;
}

.ilovecheese-bottom-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 38px;
  max-width: var(--cdd70-container-width);
  margin: 0 auto;
  font-size: 12px;
  line-height: 1.4;
}

/* ---------------------------------------------------------------- mobile --- */

@media (max-width: 1200px) {
  .cdd70-card {
    /* Below 1200px, 70vw would already be unnaturally narrow (the form's two
       columns have nowhere to fit) — the card goes back to the section's full
       width. */
    width: auto;
    --cdd70-card-pad-x: 56px;
    padding: 100px var(--cdd70-card-pad-x) 36px;
  }

  .cdd70-title__small {
    font-size: 30px;
  }

  .cdd70-title__big {
    font-size: 40px;
  }

  .cdd70-thanks__title {
    font-size: 40px;
  }
}

@media (max-width: 900px) {
  .cdd70-langs {
    top: 12px;
    right: 12px;
  }

  .cdd70-langs__item {
    padding: 5px 11px;
    font-size: 12px;
  }

  .cdd70-form-section {
    padding: 56px 14px 60px;
  }

  .cdd70-card {
    --cdd70-card-pad-x: 22px;
    padding: 82px var(--cdd70-card-pad-x) 24px;
    border-radius: 22px;
  }

  .cdd70-card__logo {
    top: -40px;
    margin-left: -60px;
    width: 120px;
  }

  .cdd70-card__confetti {
    width: 140px;
  }

  .cdd70-title__small {
    font-size: 19px;
  }

  .cdd70-title__big {
    font-size: 26px;
  }

  .cdd70-divider {
    margin-top: 20px;
    max-width: 260px;
    gap: 14px;
  }

  .cdd70-lead {
    margin-top: 20px;
    font-size: 15px;
  }

  .cdd70-lead-small {
    margin-top: 18px;
    font-size: 13px;
  }

  .cdd70-form {
    margin-top: 28px;
  }

  /* The mobile mockup moves the character counter below the field. */
  .cdd70-field--why {
    margin-top: 18px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "control"
      "maxchars";
  }

  .cdd70-maxchars {
    margin-top: 8px;
  }

  .cdd70-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    margin-top: 26px;
  }

  .cdd70-submit {
    width: 100%;
    min-width: 0;
  }

  .cdd70-status {
    text-align: center;
  }

  .cdd70-thanks {
    padding-bottom: 12px;
  }

  .cdd70-thanks__title {
    font-size: 30px;
  }

  .cdd70-thanks__lead {
    margin-top: 20px;
    font-size: 15px;
  }

  /* Only the top margin changes — the bleed itself follows --cdd70-card-pad-x,
     which this breakpoint has already narrowed to 22px. Which of the two files
     is being bled makes no difference: the <source media> in the template
     switches lower down, at 540px, so everything from a tablet down to a phone
     held sideways gets the landscape artwork bled to a 22px-padded card. */
  .cdd70-thanks__figure {
    margin-top: 26px;
  }

  /* A percentage, not the px of the desktop rule: this range is 540px wide and
     the artwork scales across all of it, so a fixed pull that clears the lids at
     900px lands on top of them at 541px. Percentage margins resolve against the
     container's width, which is what the image's height follows too. */
  .cdd70-thanks__figure + .cdd70-thanks__actions {
    margin-top: -8%;
  }

  .cdd70-recipes {
    padding: 44px 0 4px;
  }

  .cdd70-recipes__wrap {
    padding: 0 16px;
  }

  /* 42px is the size from the desktop mockup — on a phone a heading that size
     breaks onto three lines and pushes the first slide below the fold. */
  .cdd70-recipes__title {
    margin-bottom: 20px;
    font-size: 28px;
  }

  .cdd70-recipes__arrows {
    justify-content: center;
    margin-top: 18px;
  }

  /* The footer row does not fit on a narrow screen — the logo, the icons and
     the menu land one below another, centred. */
  .content-info {
    padding: 40px 0 28px;
  }

  .content-info .col-lg-7 {
    flex-direction: column;
    align-items: center;
    gap: 22px;
    text-align: center;
  }

  .content-info .social-network-wrapper {
    text-align: center;
  }

  .social-network-nav ul {
    justify-content: center;
  }

  .nav-footer {
    margin-top: 0;
  }

  .ilovecheese-footer-nav {
    justify-content: center;
    gap: 10px 22px;
  }

  .ilovecheese-bottom-nav {
    gap: 8px 20px;
  }
}

/* The form's two columns survive down to the phones: a tablet — in either
   orientation — has room for the four short fields two to a row exactly as the
   desktop mockup draws them, and stacking them there only made the card longer.
   They go one per row below 768px, the same width the hero swaps to its
   portrait artwork at. */
@media (max-width: 767px) {
  .cdd70-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* Below this width the screen is a phone held upright, and that is the only
   place the portrait artwork is used — the <source media> in the template
   carries the same number, and so does the recipes slider's last breakpoint
   (assets/js/recipes.js). A phone held sideways is ~568px and up, which is
   deliberately on the other side of the line: the landscape lids read better
   there than one lid scaled to a short, wide box. */
@media (max-width: 540px) {
  /* The portrait file is half empty below the lids where the landscape one is
     roughly a third, so the button is pulled up correspondingly further. */
  .cdd70-thanks__figure + .cdd70-thanks__actions {
    margin-top: -50%;
  }
}

/* Google injects this badge itself (fixed, bottom-right) when reCAPTCHA is
   configured; it must stay above the card/confetti stacking context or it
   ends up hidden behind them. */
.grecaptcha-badge {
  z-index: 50000;
}