/* ==========================================================================
   CLUB AMBIANCE — free sign-up (/membership)
   Port of the "Inschrijving Gratis" handoff, whose markup carried every rule
   as an inline style. Everything is lifted into classes here; the values are
   the handoff's own. Loaded AFTER tiers.css, which supplies the base look
   (cream page, Futura, .serif, header/footer chrome).

   Two families of fixed sizes from the design tool are deliberately dropped:
   the offer card's height:788px and the submit button's height:37px. Both
   fight their own content, so the card flows and the button keeps its
   min-height instead.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PITCH HERO
   -------------------------------------------------------------------------- */
.sg-pitch{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  align-items:stretch;
  min-height:520px;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.sg-pitch__copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:64px 52px 60px;
  max-width:760px;
  margin-left:auto;
  width:100%;
}
.sg-pitch__eyebrow{
  margin:0 0 18px;
  font-size:12px;font-weight:700;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--ink);
}
.sg-pitch__copy h1{
  margin:0;
  font-weight:600;
  font-size:clamp(34px,4.4vw,58px);
  line-height:1.08;
  letter-spacing:0;
  max-width:22ch;
  text-wrap:balance;
}
.sg-pitch__lead{
  margin:22px 0 0;
  font-size:clamp(16px,1.7vw,19px);
  line-height:1.55;
  color:#3a3a37;
  max-width:46ch;
  text-wrap:pretty;
}
.sg-pitch__points{
  list-style:none;margin:26px 0 0;padding:0;
  display:flex;flex-direction:column;gap:12px;
}
.sg-pitch__points li{display:flex;align-items:flex-start;gap:12px}
.sg-pitch__points svg{flex:0 0 auto;margin-top:2px}
.sg-pitch__points span{font-size:15.5px;line-height:1.45;color:var(--ink)}

.sg-pitch__btns{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:34px;
}
.sg-btn-ink,
.sg-btn-line{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:56px;border-radius:40px;
  font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
}
.sg-btn-ink{
  gap:10px;padding:0 34px;background:var(--ink);color:#fff;
  transition:transform .15s cubic-bezier(.22,.61,.36,1);
}
.sg-btn-ink:hover{transform:translateY(-1px);color:#fff}
.sg-btn-line{
  padding:0 30px;background:transparent;color:var(--ink);
  border:1px solid var(--ink);transition:background .15s,color .15s;
}
.sg-btn-line:hover{background:var(--ink);color:#fff}
.sg-pitch__note{margin:18px 0 0;font-size:13.5px;color:var(--soft)}

.sg-pitch__img{position:relative;min-height:400px}
.sg-pitch__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* --------------------------------------------------------------------------
   CHECKOUT — offer card + form
   -------------------------------------------------------------------------- */
.sg-main{padding:56px 0 90px;scroll-margin-top:20px}
.sg-main__in{
  max-width:1180px;margin:0 auto;padding:0 40px;
  display:grid;grid-template-columns:minmax(340px,.85fr) 1fr;
  gap:56px;align-items:start;
}

.sg-offer{
  background:#fff;border:1px solid var(--line);border-radius:30px;
  padding:40px 36px 36px;box-shadow:0 14px 40px -30px rgba(0,0,0,.4);
  color:var(--ink);max-width:436px;
}
.sg-offer__eyebrow{
  margin:0;font-size:11.5px;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;
}
.sg-offer h2{margin:10px 0 0;font-weight:600;font-size:44px;line-height:1}
.sg-offer__badge{
  display:inline-flex;align-items:center;margin:18px 0 0;
  padding:9px 18px;background:var(--ink);border-radius:40px;
}
.sg-offer__badge span{
  font-size:11.5px;font-weight:800;letter-spacing:1.8px;
  text-transform:uppercase;color:#fff;
}
.sg-price{margin:16px 0 2px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.sg-price__old{
  font-family:"Domaine Display",Georgia,serif;font-weight:600;font-size:34px;
  line-height:1;color:var(--soft);
  text-decoration:line-through;text-decoration-thickness:2px;
}
.sg-price__new{
  font-family:"Domaine Display",Georgia,serif;font-weight:600;font-size:56px;
  line-height:1;
}
.sg-price__per{font-size:15px;color:var(--soft)}
.sg-offer__note{margin:8px 0 0;font-size:13.5px;font-weight:600}
.sg-offer__desc{margin:14px 0 0;font-size:14px;line-height:1.55;color:var(--soft);max-width:38ch}
.sg-rule{height:1px;background:var(--line);margin:24px 0}
.sg-receive{
  margin:0 0 16px;font-size:12.5px;font-weight:800;letter-spacing:1.8px;
  text-transform:uppercase;
}
.sg-perks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.sg-perks li{display:flex;align-items:flex-start;gap:12px}
.sg-perks svg{flex:0 0 auto;margin-top:2px}
.sg-perks span{font-size:14.5px;line-height:1.4}
.sg-cancel{margin:0;font-size:13px;color:var(--soft)}

/* --------------------------------------------------------------------------
   FORM COLUMN
   -------------------------------------------------------------------------- */
.sg-col{max-width:560px;width:100%}
.sg-col h1{
  margin:12px 0 0;font-weight:600;
  font-size:clamp(38px,5vw,60px);line-height:1.02;text-align:center;
}
.sg-intro{
  margin:16px auto 0;font-size:15.5px;line-height:1.6;color:#4a4a48;
  text-align:center;max-width:46ch;
}

.sg-form{margin-top:34px;display:flex;flex-direction:column;gap:14px}
.sg-form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.ca-field{
  width:100%;font-family:inherit;font-size:15px;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:15px 16px;outline:none;transition:border-color .15s;
}
.ca-field:focus{border-color:var(--ink)}
.ca-field::placeholder{color:#a8a49b}
.ca-field.is-invalid{border-color:#b3261e}

select.ca-field{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  min-height:56px;padding:15px 44px 15px 16px;cursor:pointer;line-height:1.2;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 16px center;
}
/* Until a type is chosen the select shows its placeholder option, which must
   read like a placeholder rather than a value. */
select.ca-field.is-empty{color:#a8a49b}

.sg-phone{display:flex;gap:10px}
.sg-phone .ca-field--dial{flex:0 0 auto;width:158px;font-size:16px;padding:15px 38px 15px 14px}
.sg-phone .ca-field--tel{flex:1;min-width:0}

.sg-field-error{display:block;margin-top:6px;font-size:12.5px;color:#b3261e}

/* Call-back slot picker */
.sg-contact{margin-top:6px}
.sg-contact__label{
  margin:0 0 4px;font-size:12px;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;
}
.sg-contact__hint{margin:0 0 12px;font-size:13.5px;line-height:1.5}
.sg-contact__slots{display:flex;flex-wrap:wrap;gap:8px}
.sg-slot{
  padding:11px 17px;border-radius:40px;border:1px solid var(--line);
  background:#fff;color:var(--ink);cursor:pointer;
  font-family:inherit;font-size:14px;transition:background .15s,color .15s,border-color .15s;
}
.sg-slot.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}

.sg-captcha{margin-top:6px;display:flex;flex-direction:column;align-items:center;gap:6px}

.sg-submit{
  align-self:center;margin-top:8px;min-height:54px;padding:0 40px;
  background:var(--ink);color:#fff;border:none;border-radius:40px;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;transition:transform .15s cubic-bezier(.22,.61,.36,1);
}
.sg-submit:hover{transform:translateY(-1px)}
.sg-note{margin:18px 0 0;font-size:13px;line-height:1.55;color:var(--soft);text-align:center}

/* --------------------------------------------------------------------------
   SUCCESS STATE — replaces the form once the lead is stored
   -------------------------------------------------------------------------- */
.sg-done{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:420px;text-align:center;
}
.sg-done__icon{
  width:64px;height:64px;border-radius:50%;background:var(--ink);
  display:flex;align-items:center;justify-content:center;
}
.sg-done h1{
  margin:26px 0 0;font-weight:600;
  font-size:clamp(28px,3vw,36px);line-height:1.1;max-width:22ch;
}
.sg-done__body{margin:16px 0 0;font-size:16px;line-height:1.6;color:#3a3a37;max-width:40ch}
.sg-done__note{margin:20px 0 0;font-size:13.5px;line-height:1.55;color:#55524d;max-width:38ch}
/* The number sits under the question, on its own line and big enough to tap */
.sg-done__tel{
  display:inline-block;margin:6px 0 0;font-size:21px;font-weight:700;
  letter-spacing:.01em;color:var(--ink);text-decoration:none;
  border-bottom:2px solid rgba(30,29,27,.18);padding-bottom:2px;
}
.sg-done__tel:hover{border-bottom-color:var(--ink)}

/* --------------------------------------------------------------------------
   RESPONSIVE — the handoff collapses both grids below 920px
   -------------------------------------------------------------------------- */
@media (max-width:920px){
  .sg-pitch{grid-template-columns:1fr}
  .sg-pitch__copy{padding:48px 24px 44px;max-width:none;margin-left:0}
  .sg-pitch__img{min-height:280px}
  .sg-main{padding:40px 0 64px}
  .sg-main__in{grid-template-columns:1fr;gap:36px;padding:0 24px}
  .sg-offer{max-width:none}
  .sg-col{max-width:none}
}

@media (max-width:560px){
  .sg-form__row{grid-template-columns:1fr}
  .sg-phone{flex-wrap:wrap}
  .sg-phone .ca-field--dial{width:100%}
  .sg-offer{padding:32px 24px 28px}
  .sg-offer h2{font-size:36px}
  .sg-price__new{font-size:46px}
  .sg-submit{align-self:stretch;padding:0 24px}
}