:root{
    --terracotta:#B5623E;
    --terracotta-deep:#a34024;
    --olive:#8F9779;
    --olive-deep:#6f7659;
    --cream:#FAF6EC;
    --sand:#f1e9d4;
    --sand-deep:#e6dcc0;
    --ink:#2c2620;
    --ink-soft:#5a5145;
    --serif:'Fraunces',Georgia,serif;
    --sans:'DM Sans',system-ui,sans-serif;
  }

  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--sans);
    background:var(--cream);
    color:var(--ink);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  /* grain overlay */
  body::after{
    content:"";
    position:fixed;inset:0;
    pointer-events:none;z-index:9999;
    opacity:.035;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  ::selection{background:var(--terracotta);color:var(--cream)}

  h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:-.01em}

  .wrap{max-width:1260px;margin:0 auto;padding:0 32px}
  .eyebrow{
    font-family:var(--sans);font-size:.72rem;font-weight:600;
    letter-spacing:.22em;text-transform:uppercase;color:var(--terracotta);
    display:inline-flex;align-items:center;gap:.7em;
  }
  .eyebrow::before{content:"";width:28px;height:1px;background:var(--terracotta);opacity:.6}

  /* ---------- NAV ---------- */
  .site-header{
    position:fixed;top:0;left:0;right:0;z-index:1000;
    display:flex;align-items:center;justify-content:space-between;
    padding:20px 60px;
    transition:background .4s ease,padding .4s ease,box-shadow .4s ease;
  }
  .site-header.scrolled{background:rgba(250,246,236,.94);backdrop-filter:blur(12px);padding:12px 60px;box-shadow:0 1px 0 rgba(44,38,32,.08)}
  .site-logo{display:inline-flex;align-items:center;text-decoration:none;line-height:1}
  .site-logo-img{display:block;width:156px;height:auto}
  .logo{font-family:var(--serif);font-size:1.5rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none;font-weight:500}
  .logo span{color:var(--terracotta)}
  .nav-links{display:flex;gap:26px;align-items:center}
  .nav-links a{
    text-decoration:none;color:var(--ink-soft);font-size:.9rem;font-weight:500;
    position:relative;transition:color .25s;
  }
  .nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1.5px;background:var(--terracotta);transition:width .3s}
  .nav-links a:hover{color:var(--ink)}
  .nav-links a:hover::after{width:100%}
  .nav-cta{
    background:var(--terracotta);color:var(--cream)!important;
    padding:13px 22px;border-radius:999px;font-weight:600!important;transition:background .25s,transform .25s;
  }
  .nav-cta::after{display:none}
  .nav-cta:hover{background:var(--terracotta-deep);transform:translateY(-2px)}
  .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:transparent;border:0;padding:8px;margin-right:-8px}
  .burger span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .25s}
  .site-header.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .site-header.menu-open .burger span:nth-child(2){opacity:0}
  .site-header.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* ---------- HERO ---------- */
  .hero{
    position:relative;min-height:100vh;display:flex;align-items:center;
    padding:160px 0 80px;
    background:var(--cream);
    overflow:hidden;
  }
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;width:100%}
  .hero-copy{position:relative;z-index:3}
  .hero h1{
    font-size:clamp(3rem,6.5vw,5.6rem);
    margin:26px 0 0;color:var(--ink);
  }
  .hero h1 em{font-style:italic;color:var(--terracotta)}
  .hero .lead{
    font-size:1.18rem;color:var(--ink-soft);max-width:30em;margin:28px 0 38px;line-height:1.7;
  }
  .hero-actions{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
  .btn{
    display:inline-flex;align-items:center;gap:.6em;text-decoration:none;font-weight:600;font-size:.95rem;
    padding:var(--df-button-padding-y, 15px) var(--df-button-padding-x, 30px);border-radius:var(--df-button-radius, 999px);transition:transform .25s,background .25s,box-shadow .25s;
  }
  .btn-primary{background:var(--terracotta);color:var(--cream);box-shadow:0 60px 30px -60px rgba(181,98,62,.6)}
  .btn-primary:hover{background:var(--terracotta-deep);transform:translateY(-3px);box-shadow:0 16px 36px -12px rgba(181,98,62,.7)}
  .btn-ghost{color:var(--ink);border:1.5px solid rgba(44,38,32,.2)}
  .btn-ghost:hover{border-color:var(--terracotta);color:var(--terracotta);transform:translateY(-3px)}
  .btn .arr{transition:transform .25s}
  .btn:hover .arr{transform:translateX(4px)}

  /* hero collage */
  .hero-art{position:relative;height:560px}
  .hero-art .ph{
    position:absolute;border-radius:18px;overflow:hidden;
    background:var(--sand-deep);box-shadow:0 30px 60px -25px rgba(44,38,32,.45);
    background-size:cover;background-position:center;
  }
  .ph1{width:62%;height:78%;top:0;right:0;z-index:2}
  .ph2{width:50%;height:52%;bottom:0;left:0;z-index:3;border:6px solid var(--cream)}
  .ph3{width:30%;height:34%;top:8%;left:2%;z-index:1;border:5px solid var(--cream)}
  .leaf{position:absolute;z-index:4;color:var(--olive);opacity:.9}
  .leaf-1{top:-26px;left:38%;width:70px;animation:sway 6s ease-in-out infinite}
  .badge{
    position:absolute;bottom:7%;right:-14px;z-index:5;
    background:var(--cream);border-radius:50%;width:118px;height:118px;
    display:grid;place-items:center;text-align:center;
    box-shadow:0 18px 60px -16px rgba(44,38,32,.4);
    animation:spinSlow 26s linear infinite;
  }
  .badge svg{width:100%;height:100%;position:absolute;inset:0}
  .badge .dot{font-family:var(--serif);font-size:1.7rem;color:var(--terracotta);position:relative}
  @keyframes spinSlow{to{transform:rotate(360deg)}}
  @keyframes sway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(8deg)}}

  .scroll-hint{
    position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
    font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
    display:flex;flex-direction:column;align-items:center;gap:8px;
  }
  .scroll-hint .line{width:1px;height:34px;background:var(--ink-soft);opacity:.4;animation:drop 1.8s ease-in-out infinite}
  @keyframes drop{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

  /* ---------- VALUES ---------- */
  .values{background:var(--sand);padding:96px 0;position:relative}
  .values .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start}
  .values h2{font-size:clamp(2rem,3.4vw,2.9rem);color:var(--ink);margin-top:18px}
  .values .intro{color:var(--ink-soft);margin-top:18px;font-size:1.05rem}
  .value-list{display:grid;gap:28px}
  .value-item{display:flex;gap:22px;align-items:flex-start;padding-bottom:28px;border-bottom:1px solid rgba(44,38,32,.1)}
  .value-item:last-child{border-bottom:none;padding-bottom:0}
  .value-num{font-family:var(--serif);font-size:1.4rem;color:var(--terracotta);min-width:42px}
  .value-item h3{font-size:1.4rem;margin-bottom:6px}
  .value-item p{color:var(--ink-soft);font-size:1rem}

  /* ---------- SPACE ---------- */
  .space{padding:160px 0;background:var(--cream)}
  .space .wrap{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
  .space-img{
    position:relative;border-radius:22px;overflow:hidden;height:520px;
    background:var(--sand-deep) center/cover;
    box-shadow:0 60px 80px -60px rgba(44,38,32,.5);
  }
  .space-img .tag{
    position:absolute;left:22px;bottom:22px;background:rgba(250,246,236,.94);
    padding:14px 20px;border-radius:14px;backdrop-filter:blur(6px);
  }
  .space-img .tag strong{font-family:var(--serif);display:block;font-size:1.05rem}
  .space-img .tag span{font-size:.85rem;color:var(--ink-soft)}
  .space h2{font-size:clamp(2.1rem,3.6vw,3.1rem);margin:18px 0 22px}
  .space p{color:var(--ink-soft);font-size:1.06rem;margin-bottom:18px}
  .space-feats{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;margin:30px 0 34px}
  .feat{display:flex;gap:11px;align-items:center;font-size:.96rem;font-weight:500}
  .feat svg{color:var(--olive-deep);flex-shrink:0}

  /* ---------- EVENTS ---------- */
  .events{padding:160px 0;background:var(--olive);color:var(--cream);position:relative}
  .events .eyebrow{color:var(--sand)}
  .events .eyebrow::before{background:var(--sand)}
  .events-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;margin-bottom:54px}
  .events h2{font-size:clamp(2.1rem,3.8vw,3.2rem);color:var(--cream);margin-top:16px}
  .events-head a{color:var(--cream);text-decoration:none;font-weight:600;font-size:.92rem;border-bottom:1.5px solid rgba(250,246,236,.4);padding-bottom:3px;transition:border-color .25s}
  .events-head a:hover{border-color:var(--cream)}
  .event-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
  .card{
    background:var(--cream);border-radius:20px;overflow:hidden;color:var(--ink);
    display:flex;flex-direction:column;transition:transform .35s,box-shadow .35s;
  }
  .card:hover{transform:translateY(-8px);box-shadow:0 30px 50px -24px rgba(0,0,0,.45)}
  .card-img{height:190px;background:var(--sand-deep) center/cover;position:relative}
  .card-date{
    position:absolute;top:14px;left:14px;background:var(--cream);
    border-radius:12px;padding:8px 12px;text-align:center;line-height:1;box-shadow:0 6px 16px -8px rgba(0,0,0,.4)
  }
  .card-date .d{font-family:var(--serif);font-size:1.5rem;color:var(--terracotta);display:block}
  .card-date .m{font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft);margin-top:3px}
  .card-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
  .card-meta{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--olive-deep);font-weight:600;margin-bottom:var(--df-card-meta-gap, 20px)}
  .card h3{font-size:1.32rem;line-height:1.2;margin-bottom:12px}
  .card p{font-size:.92rem;color:var(--ink-soft);flex:1}
  .card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding-top:18px;border-top:1px solid rgba(44,38,32,.1)}
  .card-price{font-family:var(--serif);font-size:1.25rem;color:var(--ink)}
  .card-link{font-size:.88rem;font-weight:600;color:var(--terracotta);text-decoration:none;display:inline-flex;align-items:center;gap:5px}
  .card-link .arr{transition:transform .25s}
  .card-link:hover .arr{transform:translateX(4px)}

  /* ---------- TESTIMONIALS ---------- */
  .testi{padding:160px 0;background:var(--cream)}
  .testi-head{text-align:center;margin-bottom:60px}
  .testi-head h2{font-size:clamp(2rem,3.6vw,3rem);margin-top:16px}
  .testi-head .eyebrow{justify-content:center}
  .testi-grid{columns:3;column-gap:26px}
  .quote{
    background:var(--sand);border-radius:18px;padding:30px;margin-bottom:26px;
    break-inside:avoid;border:1px solid rgba(44,38,32,.06);
    transition:transform .3s,box-shadow .3s;
  }
  .quote:hover{transform:translateY(-4px);box-shadow:0 24px 60px -26px rgba(44,38,32,.4)}
  .stars{color:var(--terracotta);font-size:.85rem;letter-spacing:2px;margin-bottom:14px}
  .quote p{font-size:.98rem;color:var(--ink);line-height:1.7;margin-bottom:20px;font-style:italic}
  .quote .who{display:flex;align-items:center;gap:12px}
  .avatar{width:50px;height:50px;border-radius:50%;background:var(--olive) center/cover;flex-shrink:0;display:grid;place-items:center;color:var(--cream);font-family:var(--serif);font-size:1.1rem;overflow:hidden}
  .avatar img{width:100%;height:100%;object-fit:cover;display:block}
  .quote .who strong{display:block;font-size:.95rem;font-weight:600}
  .quote .who span{font-size:.8rem;color:var(--ink-soft)}

  /* ---------- CTA ---------- */
  .cta{background:var(--terracotta);color:var(--cream);padding:96px 22px;text-align:center;position:relative;overflow:hidden}
  .cta::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(250,246,236,.07);top:-160px;right:-120px}
  .cta::after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(250,246,236,.06);bottom:-130px;left:-80px}
  .cta .inner{position:relative;z-index:2;max-width:680px;margin:0 auto}
  .cta h2{font-size:clamp(2.2rem,4vw,3.3rem);color:var(--cream);margin-bottom:20px}
  .cta p{font-size:1.1rem;opacity:.92;margin-bottom:36px}
  .cta-form{display:flex;gap:12px;max-width:480px;margin:0 auto;flex-wrap:wrap;justify-content:center}
  .cta-form input{flex:1;min-width:260px;padding:16px 22px;border:none;border-radius:44px;font-family:var(--sans);font-size:.96rem;background:rgba(250,246,236,.95)}
  .cta-form input:focus{outline:2px solid var(--cream)}
  .cta-form button{background:var(--ink);color:var(--cream);border:none;padding:16px 30px;border-radius:44px;font-family:var(--sans);font-weight:600;font-size:.95rem;cursor:pointer;transition:background .25s,transform .25s}
  .cta-form button:hover{background:#1c1812;transform:translateY(-2px)}

  /* ---------- FOOTER ---------- */
  .site-footer{background:var(--ink);color:rgba(250,246,236,.8);padding:72px 0 36px}
  .foot-grid{display:grid;grid-template-columns:1.3fr .95fr .95fr 1fr;gap:60px;margin-bottom:54px;padding-bottom:48px;border-bottom:1px solid rgba(250,246,236,.14)}
  .footer-logo{display:inline-flex;align-items:center;margin-bottom:16px;text-decoration:none}
  .footer-logo-img{display:block;width:168px;height:auto;filter:brightness(0) invert(1)}
  .footer-brand p{font-size:.92rem;line-height:1.7;max-width:26em;color:rgba(250,246,236,.78)}
  footer h4{font-family:var(--sans);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sand);margin-bottom:18px;font-weight:600}
  footer ul{list-style:none}
  footer ul li{margin-bottom:11px}
  footer ul a{color:rgba(250,246,236,.78);text-decoration:none;font-size:.92rem;line-height:1.55;transition:color .2s}
  footer ul a:hover{color:var(--terracotta)}
  .footer-social-list a{display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:rgba(250,246,236,.82)}
  .footer-icon{display:none}
  .footer-contact{font-style:normal}
  .footer-contact-list li{display:flex;align-items:center;gap:14px;margin-bottom:14px}
  .footer-contact-icon{width:18px;min-width:18px;color:rgba(250,246,236,.76);font-size:1rem;line-height:1;text-align:center}
  .footer-cta{display:inline-flex;align-items:center;justify-content:center;margin-top:18px;background:var(--terracotta);color:var(--cream);text-decoration:none;padding:14px 24px;border-radius:999px;font-size:.96rem;font-weight:600;line-height:1;transition:background .2s,transform .2s}
  .footer-cta:hover{background:var(--terracotta-deep);transform:translateY(-2px)}
  .foot-bottom{padding-top:0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-size:.82rem;color:rgba(250,246,236,.64)}
  .footer-legal-links{display:flex;gap:20px;flex-wrap:wrap}
  .footer-legal-links a{color:rgba(250,246,236,.64);text-decoration:none;transition:color .2s}
  .footer-legal-links a:hover{color:var(--terracotta)}

  /* reveal */
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
  .reveal.in{opacity:1;transform:none}

  /* ---------- RESPONSIVE ---------- */
  @media(max-width:980px){
    .hero-grid{grid-template-columns:1fr;gap:46px}
    .hero-art{height:380px;max-width:480px}
    .values .wrap,.space .wrap{grid-template-columns:1fr;gap:60px}
    .event-grid{grid-template-columns:1fr 1fr}
    .testi-grid{columns:2}
    .foot-grid{grid-template-columns:1fr 1fr}
  }
  @media(max-width:680px){
    .wrap{padding:0 22px}
    .site-header{padding:14px 22px}
    .site-header.scrolled{padding:12px 22px}
    .site-logo-img{width:138px}
    .burger{display:flex}
    .nav-links{display:none;position:absolute;top:100%;left:14px;right:14px;flex-direction:column;align-items:flex-start;gap:0;background:rgba(250,246,236,.98);border:1px solid rgba(44,38,32,.08);border-radius:18px;box-shadow:0 18px 45px -28px rgba(44,38,32,.55);padding:12px}
    .site-header.menu-open .nav-links{display:flex}
    .nav-links a{width:100%;padding:12px 8px}
    .nav-links a::after{display:none}
    .nav-cta{width:100%;justify-content:center;text-align:center;margin-top:6px}
    .hero{padding:120px 0 60px}
    .cta{padding:72px 22px}
    .cta .inner{max-width:100%}
    .cta h2{font-size:clamp(2rem,9vw,2.55rem);line-height:1.08}
    .cta-form{width:100%;max-width:100%;display:flex;flex-direction:column;align-items:center}
    .cta-form input{width:100%;min-width:0}
    .cta-form button{width:auto;min-width:150px}
    .event-grid{grid-template-columns:1fr}
    .testi-grid{columns:1}
    .space-feats{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr;gap:32px}
    .scroll-hint{display:none}
  }


/* Static source normalization: content images are normal <img> elements, not CSS backgrounds. */
.ph img,
.space-img > img,
.card-img > img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.ph img{
  position:absolute;
  inset:0;
}
.space-img > img,
.card-img > img{
  position:absolute;
  inset:0;
  z-index:0;
}
.space-img .tag,
.card-img .card-date{
  z-index:2;
}
.site-logo-img{height:34px;width:auto;display:block;}
footer .site-logo-img{height:60px;filter:brightness(0) invert(1);opacity:.95;}


/* Layout rule: safe spacing before footer.
   Use this for non-full-width final content blocks before the footer.
   Full-width final bands should solve spacing with internal padding instead. */
.section-before-footer{padding-bottom:100px;}
@media(max-width:680px){.section-before-footer{padding-bottom:72px;}}



/* v0034 mobile header hardening */
@media(max-width:680px){
  .site-header{
    background:var(--cream) !important;
    backdrop-filter:blur(12px);
    box-shadow:0 1px 0 rgba(44,38,32,.08);
    padding-top:calc(12px + env(safe-area-inset-top, 0px));
  }
  
  body{
    background:var(--cream);
  }
}


/* v0034 newsletter form */
.cta-form{
  display:flex;
  align-items:center;
  gap:0;
  max-width:560px;
  margin:0 auto;
  padding:6px;
  background:rgba(250,246,236,.96);
  border-radius:999px;
  box-shadow:0 16px 34px -24px rgba(44,38,32,.45);
}

.cta-form input{
  flex:1;
  min-width:0;
  border:0;
  background:transparent;
  padding:15px 18px;
  font-family:var(--sans);
  font-size:1rem;
  color:var(--ink);
}

.cta-form input::placeholder{
  color:rgba(44,38,32,.58);
}

.cta-form input:focus{
  outline:none;
}

.cta-form button{
  flex:0 0 auto;
  border:0;
  border-radius:999px;
  background:var(--ink);
  color:var(--cream);
  padding:14px 24px;
  font-family:var(--sans);
  font-size:.94rem;
  font-weight:700;
  cursor:pointer;
  transition:background .2s, transform .2s;
}

.cta-form button:hover{
  background:#1b1712;
  transform:translateY(-1px);
}

@media(max-width:680px){
  .cta{
    padding-left:20px;
    padding-right:20px;
  }
  .cta-form{
    width:100%;
    max-width:100%;
    padding:5px;
  }
  .cta-form input{
    padding:15px 14px;
    font-size:.96rem;
  }
  .cta-form button{
    padding:13px 17px;
    font-size:.9rem;
    white-space:nowrap;
  }
}

@media(max-width:380px){
  .cta-form{
    border-radius:24px;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    padding:8px;
  }
  .cta-form button{
    width:100%;
  }
}



/* v0035 newsletter mobile correction:
   Het geheel blijft full-width, maar de knop blijft compact rechts in het veld. */
@media(max-width:680px){
  .cta-form{
    width:100%;
    max-width:100%;
    display:flex;
    flex-direction:row !important;
    align-items:center;
    gap:0;
    border-radius:999px;
    padding:6px;
  }

  .cta-form input{
    flex:1 1 auto;
    min-width:0;
    padding:15px 12px 15px 16px;
  }

  .cta-form button{
    width:auto !important;
    flex:0 0 auto;
    padding:13px 18px;
    min-width:auto;
    white-space:nowrap;
  }
}

@media(max-width:380px){
  .cta-form{
    flex-direction:row !important;
    align-items:center !important;
    gap:0 !important;
    border-radius:999px !important;
    padding:6px !important;
  }

  .cta-form button{
    width:auto !important;
    padding:12px 15px;
    font-size:.86rem;
  }

  .cta-form input{
    font-size:.94rem;
    padding-left:14px;
  }
}



/* v0037 mobile header + newsletter hard fix */

/* Header must always cover content behind it on mobile/iPhone */
.site-header{
  isolation:isolate;
}

@media(max-width:680px){
  .site-header{
    background:var(--cream) !important;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    box-shadow:0 1px 0 rgba(44,38,32,.10);
    padding-top:calc(14px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom:14px !important;
  }

  

  .site-header.scrolled{
    background:var(--cream) !important;
  }

  .hero,
  .blog-hero,
  .contact-hero,
  .legal-hero{
    padding-top:calc(128px + env(safe-area-inset-top, 0px)) !important;
  }
}

/* Newsletter: button inside the input field, never underneath */
.cta-form{
  position:relative !important;
  display:block !important;
  width:100%;
  max-width:560px;
  margin:0 auto;
  padding:6px !important;
  background:rgba(250,246,236,.96);
  border-radius:999px;
  box-shadow:0 16px 34px -24px rgba(44,38,32,.45);
}

.cta-form input{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  height:58px;
  border:0 !important;
  background:transparent !important;
  padding:0 150px 0 22px !important;
  font-family:var(--sans);
  font-size:1rem;
  color:var(--ink);
}

.cta-form input:focus{
  outline:none !important;
}

.cta-form button{
  position:absolute !important;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:auto !important;
  min-width:0 !important;
  height:46px;
  border:0 !important;
  border-radius:999px;
  background:var(--ink);
  color:var(--cream);
  padding:0 22px !important;
  font-family:var(--sans);
  font-size:.92rem;
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
}

.cta-form button:hover{
  background:#1b1712;
  transform:translateY(-50%);
}

@media(max-width:680px){
  .cta{
    padding-left:20px !important;
    padding-right:20px !important;
  }

  .cta-form{
    max-width:100% !important;
    width:100% !important;
  }

  .cta-form input{
    height:58px;
    padding-left:18px !important;
    padding-right:128px !important;
    font-size:.96rem;
  }

  .cta-form button{
    right:7px;
    height:44px;
    padding:0 17px !important;
    font-size:.88rem;
  }
}

@media(max-width:360px){
  .cta-form input{
    padding-right:116px !important;
    font-size:.9rem;
  }

  .cta-form button{
    padding:0 13px !important;
    font-size:.82rem;
  }
}@media(min-width:900px){}

/* v0046 footer social icons */
.footer-socials{
  display:flex;
  align-items:center;
  gap:60px;
  flex-wrap:wrap;
}

.footer-social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}

.footer-social-link:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.38);
}

.footer-social-link img{
  width:18px;
  height:18px;
  display:block;
  object-fit:contain;
}

/* v0052 iPhone statusbar / dynamic island shield
   Prevents hero/content from being visible above the mobile header. */
@media(max-width:680px){
  

  .site-header{
    z-index:1000;
    background:var(--cream) !important;
  }
}

/* v0053 footer icon cleanup */
.footer-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:18px;
}

.footer-icon-row{
  display:grid;
  grid-template-columns:28px 1fr;
  align-items:center;
  gap:16px;
  color:rgba(250,246,236,.78);
  text-decoration:none;
  font-size:1rem;
  line-height:1.35;
}

.footer-icon-row img{
  width:22px;
  height:22px;
  object-fit:contain;
  display:block;
  opacity:.88;
}

.footer-icon-row:hover{
  color:var(--cream);
}

.footer-icon-row:hover img{
  opacity:1;
}

@media(max-width:680px){
  .footer-list{
    gap:18px;
  }

  .footer-icon-row{
    grid-template-columns:36px 1fr;
    gap:18px;
    font-size:1.45rem;
  }

  .footer-icon-row img{
    width:28px;
    height:28px;
  }
}


.footer-icon-img{width:24px;height:24px;display:block;object-fit:contain;flex:0 0 24px}
.footer-social-list,.footer-contact-list{list-style:none;padding:0;margin:18px 0 0}
.footer-social-list li,.footer-contact-list li{list-style:none}
.footer-contact-list a,.footer-social-list a{color:rgba(250,246,236,.82)}
.footer-contact-list a:hover,.footer-social-list a:hover{color:var(--cream)}
@media (max-width: 768px){
  .footer-icon-img{width:22px;height:22px;flex-basis:22px}
  .footer-cta{padding:13px 22px;font-size:.92rem}
}

/* Keep the base document background stable */
html,
body,
main,
body > main{
  background:var(--cream);
}

/* Header CTA: compact and protected */
.site-header .nav-links .nav-cta{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  padding:13px 22px !important;
  border-radius:999px !important;
  line-height:1 !important;
  font-size:.9rem !important;
  white-space:nowrap;
}

/* iPhone/mobile header: one fixed header, no second overlay layer */
@media(max-width:680px){
  .site-header{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    z-index:1000 !important;
    background:var(--cream) !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    box-shadow:0 1px 0 rgba(44,38,32,.10);
    padding:calc(14px + env(safe-area-inset-top, 0px)) 22px 14px !important;
  }

  .site-header::before,
  html::before,
  

  .site-header.scrolled{
    background:var(--cream) !important;
    padding:calc(12px + env(safe-area-inset-top, 0px)) 22px 12px !important;
  }

  .site-header .nav-links .nav-cta{
    width:100% !important;
    padding:12px 18px !important;
    min-height:0 !important;
  }

  .hero{
    padding-top:calc(126px + env(safe-area-inset-top, 0px)) !important;
    min-height:auto !important;
    align-items:flex-start !important;
    background:var(--cream) !important;
  }

  .blog-hero,
  .contact-hero,
  .legal-hero,
  .rh-hero,
  .aanbod-hero{
    padding-top:calc(126px + env(safe-area-inset-top, 0px)) !important;
    background:var(--cream) !important;
  }
}

/* Footer CTA: compact and protected */
.site-footer .footer-cta{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  margin-top:20px !important;
  padding:13px 22px !important;
  border-radius:999px !important;
  font-size:.92rem !important;
  line-height:1 !important;
}

@media(max-width:680px){
  .site-footer .footer-cta{
    margin-top:14px !important;
    padding:12px 20px !important;
    font-size:.9rem !important;
  }
}

/* Footer icons */
.footer-icon-img{
  width:24px;
  height:24px;
  display:block;
  object-fit:contain;
  flex:0 0 24px;
}

.footer-social-list,
.footer-contact-list{
  list-style:none;
  padding:0;
  margin:18px 0 0;
}

.footer-social-list li,
.footer-contact-list li{
  list-style:none;
}

.footer-social-list a,
.footer-contact-list li{
  display:flex;
  align-items:center;
  gap:14px;
}

.footer-contact-list a,
.footer-social-list a{
  color:rgba(250,246,236,.82);
  text-decoration:none;
}

.footer-contact-list a:hover,
.footer-social-list a:hover{
  color:var(--cream);
}/* v0071 mobile header height cleanup
   Lower mobile header, keep left/right padding, remove grey bottom line. */

.mobile-statusbar-bg{
  display:none;
}

@media(max-width:680px){
  :root{
    --ls-mobile-statusbar-h:env(safe-area-inset-top, 0px);
    --ls-mobile-header-h:72px;
  }

  html,
  body,
  main,
  body > main{
    background:var(--cream) !important;
  }

  body{
    padding-top:calc(var(--ls-mobile-statusbar-h) + var(--ls-mobile-header-h)) !important;
  }

  .mobile-statusbar-bg{
    display:block;
    position:fixed;
    left:0;
    right:0;
    top:0;
    height:var(--ls-mobile-statusbar-h);
    background:var(--cream);
    z-index:2147483000;
    pointer-events:none;
    transform:translateZ(0);
  }

  .site-header{
    position:fixed !important;
    top:var(--ls-mobile-statusbar-h) !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    min-height:var(--ls-mobile-header-h) !important;
    z-index:2147483100 !important;
    background:var(--cream) !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    box-shadow:none !important;
    border-bottom:0 !important;
    padding:8px 22px !important;
  }

  .site-header::before,
  html::before,
  body::before{
    display:none !important;
    content:none !important;
  }

  .site-header.scrolled{
    top:var(--ls-mobile-statusbar-h) !important;
    padding:8px 22px !important;
    min-height:68px !important;
    background:var(--cream) !important;
    box-shadow:none !important;
    border-bottom:0 !important;
  }

  .site-logo-img{
    height:34px !important;
    width:auto !important;
  }

  .burger{
    padding:6px !important;
  }

  .hero{
    background:var(--cream) !important;
    padding-top:28px !important;
    padding-bottom:64px !important;
    min-height:auto !important;
    align-items:flex-start !important;
  }

  .blog-hero,
  .contact-hero,
  .legal-hero,
  .rh-hero,
  .aanbod-hero{
    background:var(--cream) !important;
    padding-top:56px !important;
  }
}

@media(max-width:420px){
  @media(max-width:680px){
    :root{
      --ls-mobile-header-h:70px;
    }

    .site-header{
      min-height:var(--ls-mobile-header-h) !important;
      padding:7px 22px !important;
    }

    .site-header.scrolled{
      min-height:66px !important;
      padding:7px 22px !important;
    }

    body{
      padding-top:calc(var(--ls-mobile-statusbar-h) + var(--ls-mobile-header-h)) !important;
    }
  }
}

/* v0072 Design Factory spacing system
   Header and footer are now treated as protected global components.
   Page CSS may not change global component spacing.
   All mobile section rhythm should flow through these tokens. */
:root{
  --df-page-x:32px;
  --df-page-x-mobile:22px;

  --df-section-y:120px;
  --df-section-y-tight:80px;
  --df-section-y-large:160px;

  --df-section-y-mobile:64px;
  --df-section-y-mobile-tight:48px;
  --df-section-y-mobile-large:80px;

  --df-grid-gap:32px;
  --df-grid-gap-mobile:22px;
  --df-media-content-gap-desktop:56px;
  --df-media-content-gap-mobile:44px;

  --df-block-gap:24px;
  --df-block-gap-mobile:18px;
}

/* Global layout rhythm */
.wrap{
  padding-left:var(--df-page-x);
  padding-right:var(--df-page-x);
}

.section,
.space,
.events,
.testi,
.cta,
.rh-section,
.aanbod-events,
.blog-winwin,
.podcast-cta-section,
.booking{
  padding-top:var(--df-section-y);
  padding-bottom:var(--df-section-y);
}

.section--tight{
  padding-top:var(--df-section-y-tight);
  padding-bottom:var(--df-section-y-tight);
}

.section--large{
  padding-top:var(--df-section-y-large);
  padding-bottom:var(--df-section-y-large);
}

.event-grid,
.testi-grid,
.rh-price-grid,
.rh-card-grid,
.rh-facts-grid,
.aanbod-grid,
.blog-grid{
  gap:var(--df-grid-gap);
}

/* Mobile rhythm */
@media(max-width:680px){
  .wrap{
    padding-left:var(--df-page-x-mobile) !important;
    padding-right:var(--df-page-x-mobile) !important;
  }

  .hero,
  .space,
  .events,
  .testi,
  .cta,
  .rh-section,
  .aanbod-events,
  .blog-winwin,
  .podcast-cta-section,
  .booking{
    padding-top:var(--df-section-y-mobile) !important;
    padding-bottom:var(--df-section-y-mobile) !important;
  }

  .section--tight{
    padding-top:var(--df-section-y-mobile-tight) !important;
    padding-bottom:var(--df-section-y-mobile-tight) !important;
  }

  .section--large{
    padding-top:var(--df-section-y-mobile-large) !important;
    padding-bottom:var(--df-section-y-mobile-large) !important;
  }

  .hero{
    padding-top:28px !important;
    min-height:auto !important;
    align-items:flex-start !important;
  }

  .events{
    min-height:auto !important;
  }

  .blog-hero,
  .contact-hero,
  .legal-hero,
  .rh-hero,
  .aanbod-hero{
    padding-top:var(--df-section-y-mobile) !important;
    padding-bottom:var(--df-section-y-mobile) !important;
  }

  .testi-head,
  .events-head,
  .rh-head,
  .aanbod-section-head{
    margin-bottom:32px !important;
  }

  .event-grid,
  .testi-grid,
  .rh-price-grid,
  .rh-card-grid,
  .rh-facts-grid,
  .aanbod-grid,
  .blog-grid{
    gap:var(--df-grid-gap-mobile) !important;
  }

  .rh-options,
  .rh-dagdelen{
    margin-top:28px !important;
  }

  .rh-dagdelen{
    gap:14px !important;
  }

  .rh-dd{
    padding:20px 18px !important;
  }
}

@media(max-width:420px){
  :root{
    --df-page-x-mobile:20px;
    --df-section-y-mobile:56px;
    --df-section-y-mobile-tight:42px;
    --df-section-y-mobile-large:72px;
  }
}

/* v0074 Design System Lock
   Header, footer, buttons, forms, cards, typography, icons, images and spacing are protected global design decisions.
   Page CSS may only position page-specific sections and may not redefine these global components. */

:root{
  /* Buttons */
  --df-button-radius:999px;
  --df-button-padding-y:15px;
  --df-button-padding-x:30px;
  --df-button-padding-y-mobile:13px;
  --df-button-padding-x-mobile:22px;

  /* Forms */
  --df-input-height:58px;
  --df-input-radius:999px;
  --df-form-gap:14px;

  /* Cards */
  --df-card-radius:24px;
  --df-card-padding:28px;
  --df-card-padding-mobile:22px;
  --df-card-image-radius:22px;
  --df-card-meta-gap:20px;
  --df-card-title-gap:12px;
  --df-card-footer-gap:22px;

  /* Images */
  --df-image-radius:22px;
  --df-avatar-size:44px;

  /* Icons */
  --df-icon-size:24px;
  --df-icon-size-mobile:22px;

  /* Motion */
  --df-transition-fast:.18s ease;
  --df-transition-base:.25s ease;
}

/* Protected global buttons */
.btn,
.nav-cta,
.footer-cta,
.card-link,
.rh-btn{
  -webkit-tap-highlight-color:transparent;
}

/* Protected global form rhythm */
input,
textarea,
select,
button{
  font-family:var(--sans);
}

/* Protected media rhythm */
img{
  max-width:100%;
}

/* Design Factory rule:
   Do not override .site-header, .site-footer, .nav-cta, .footer-cta, .btn,
   shared cards, shared forms, or shared review components from page CSS. */

/* v0076 protected card component spacing
   Applies to shared .card event/blog-style cards.
   Content fields may change later; spacing and structure stay stable. */
.card-body{
  padding:var(--df-card-padding, 28px);
  display:flex;
  flex-direction:column;
  flex:1;
}

.card-meta{
  margin-bottom:var(--df-card-meta-gap, 20px) !important;
}

.card h3{
  margin-bottom:var(--df-card-title-gap, 12px);
}

.card p{
  margin:0;
  flex:1;
}

.card-foot{
  margin-top:var(--df-card-footer-gap, 22px);
  padding-top:18px;
}

/* Card types expected in LifeSkool:
   events, blog, podcast episodes, reviews, team, space/facilities, prices, CTA/form cards.
   Shared card internals live in global/component CSS; page CSS may only place cards in grids. */

/* v0078 Design Factory media/content gap rule
   Cards and media+text layouts do not use the same mobile gap. */
@media(max-width:680px){
  .df-media-content-layout{
    gap:var(--df-media-content-gap-mobile, 44px) !important;
  }
}

/* v0080 Design Factory tag/label component
   Informational labels must not look like clickable buttons. */
:root{
  --df-tag-radius:999px;
  --df-tag-padding-y:9px;
  --df-tag-padding-x:14px;
  --df-tag-gap:10px;
}

.use-case-tags,
.tag-list{
  display:flex;
  flex-wrap:wrap;
  gap:var(--df-tag-gap);
  list-style:none;
  padding:0;
  margin:0;
}

.use-case-tags .rh-tag,
.tag,
.label-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:var(--df-tag-padding-y) var(--df-tag-padding-x);
  border-radius:var(--df-tag-radius);
  border:1px solid currentColor;
  font-size:.9rem;
  line-height:1.2;
  font-weight:600;
  cursor:default;
  user-select:none;
}

.use-case-tags .rh-tag::before,
.tag--check::before{
  content:"✓";
  font-size:.82em;
  line-height:1;
  opacity:.9;
}

.use-case-tags .rh-tag:hover,
.tag:hover,
.label-tag:hover{
  transform:none;
}

/* v0081 tag hover clarification
   Informational tags have button-like radius but no interactive hover behavior. */
.use-case-tags .rh-tag,
.tag,
.label-tag{
  border-radius:var(--df-button-radius, 999px) !important;
  cursor:default !important;
}

.use-case-tags .rh-tag:hover,
.tag:hover,
.label-tag:hover{
  border-color:currentColor;
  background:inherit;
  transform:none !important;
  box-shadow:none !important;
}

/* v0082 Tag List component variants
   A tag list must explicitly be informational or interactive/filter. */

/* Base */
.tag-list{
  display:flex;
  flex-wrap:wrap;
  gap:var(--df-tag-gap, 10px);
  list-style:none;
  padding:0;
  margin:0;
}

.tag-list__item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:var(--df-tag-padding-y, 9px) var(--df-tag-padding-x, 14px);
  border-radius:var(--df-button-radius, 999px);
  font-size:.9rem;
  line-height:1.2;
  font-weight:600;
}

/* Variant 1: informational, not clickable */
.tag-list--informational .tag-list__item{
  cursor:default;
  user-select:none;
}

.tag-list--informational .tag-list__item--check::before{
  content:"✓";
  font-size:.82em;
  line-height:1;
  opacity:.9;
}

.tag-list--informational .tag-list__item:hover{
  transform:none !important;
  box-shadow:none !important;
}

/* Variant 2: interactive/filter, clickable */
.tag-list--filter .tag-list__item,
.tag-filter{
  cursor:pointer;
}

.tag-list--filter .tag-list__item:hover,
.tag-filter:hover{
  transform:translateY(-1px);
}

.tag-filter.is-active,
.tag-list__item.is-active{
  font-weight:700;
}

/* v0083 global button variant for dark backgrounds */
.btn-light{
  background:#fff;
  color:var(--olive-deep);
  box-shadow:none;
}

.btn-light:hover{
  background:var(--cream);
  color:var(--olive-deep);
  transform:translateY(-3px);
}

/* v0084 Button & CTA Group System
   Buttons are global components. Page CSS may only place button groups. */
:root{
  --df-button-group-gap:18px;
  --df-button-group-gap-mobile:12px;
}

.cta-group,
.hero-actions,
.rh-actions,
.blog-hero-actions,
.aanbod-actions,
.booking-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--df-button-group-gap);
}

.btn{
  justify-content:center;
  white-space:nowrap;
}

/* Arrow rule:
   Primary navigation buttons and card links may use .arr.
   Submit/action buttons should not use arrows. */
.btn .arr,
.card-link .arr{
  transition:transform var(--df-transition-base, .25s ease);
}

.btn:hover .arr,
.card-link:hover .arr{
  transform:translateX(4px);
}

@media(max-width:680px){
  .cta-group--stack-mobile,
  .hero-actions,
  .rh-actions,
  .blog-hero-actions,
  .aanbod-actions,
  .booking-actions{
    flex-direction:column;
    align-items:stretch;
    gap:var(--df-button-group-gap-mobile);
  }

  .cta-group--stack-mobile .btn,
  .hero-actions .btn,
  .rh-actions .btn,
  .blog-hero-actions .btn,
  .aanbod-actions .btn,
  .booking-actions .btn{
    width:100%;
    justify-content:center;
    padding:var(--df-button-padding-y-mobile, 13px) var(--df-button-padding-x-mobile, 22px);
  }
}

/* Form System baseline — v0096
   Global, reusable form styling for static Design Factory previews.
   Page CSS may only handle layout placement around forms.
*/
.form-card{
  display:block;
  width:100%;
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px 18px;
}

.form-field{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:0 0 16px;
}

.form-field--full,
.form-field.is-full{
  grid-column:1 / -1;
}

.form-label{
  display:block;
  font-size:.88rem;
  font-weight:700;
  line-height:1.3;
  color:var(--ink);
}

.form-required{
  color:var(--terracotta);
}

.form-control{
  width:100%;
  min-height:48px;
  padding:13px 15px;
  border:1px solid rgba(44,38,32,.18);
  border-radius:14px;
  background:rgba(255,255,255,.72);
  color:var(--ink);
  font:inherit;
  line-height:1.4;
  outline:none;
  transition:border-color var(--df-transition-fast, .18s ease), box-shadow var(--df-transition-fast, .18s ease), background var(--df-transition-fast, .18s ease);
}

textarea.form-control{
  min-height:138px;
  resize:vertical;
}

.form-control::placeholder{
  color:rgba(90,81,69,.62);
}

.form-control:focus{
  border-color:rgba(181,98,62,.72);
  background:#fff;
  box-shadow:0 0 0 4px rgba(181,98,62,.12);
}

.form-help,
.form-note{
  margin:6px 0 0;
  font-size:.84rem;
  line-height:1.55;
  color:var(--ink-soft);
}

.form-error{
  margin:6px 0 0;
  font-size:.84rem;
  line-height:1.45;
  color:var(--terracotta-deep);
}

.form-actions{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:8px;
}

.btn-submit::after,
.form-actions .btn::after{
  content:none !important;
}

.form-checkbox,
.form-radio{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:var(--ink-soft);
  font-size:.92rem;
  line-height:1.55;
}

.form-checkbox input,
.form-radio input{
  margin-top:.22em;
  accent-color:var(--terracotta);
}

@media(max-width:680px){
  .form-grid{
    grid-template-columns:1fr;
    gap:0;
  }

  .form-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .form-actions .btn,
  .form-actions button{
    width:100%;
  }
}

/* Form System mobile submit fix — v0097 */
@media(max-width:680px){
  .form-actions,
  form .form-actions{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    width:100%;
  }

  .form-actions .btn,
  .form-actions .btn-submit,
  .form-actions button,
  .form-actions input[type="submit"]{
    display:flex;
    justify-content:center;
    width:100% !important;
    max-width:none;
  }
}

/* Form System layout recovery — v0098 */
.form-actions.contact-form-actions{
  display:flex;
  align-items:center;
  gap:16px;
}

@media(max-width:680px){
  .form-actions.contact-form-actions{
    flex-direction:column;
    align-items:stretch;
    width:100%;
  }

  .form-actions.contact-form-actions .btn,
  .form-actions.contact-form-actions .btn-submit,
  .form-actions.contact-form-actions button{
    width:100% !important;
    max-width:none;
    justify-content:center;
  }
}

/* Form System refinement — v0099
   Adds reusable states for future static previews and MWD App Foundation Forms.
*/
.form-message{
  margin:0 0 18px;
  padding:14px 16px;
  border-radius:14px;
  font-size:.94rem;
  line-height:1.55;
  border:1px solid rgba(44,38,32,.14);
  background:rgba(255,255,255,.66);
  color:var(--ink-soft);
}

.form-message--success{
  border-color:rgba(143,151,121,.38);
  background:rgba(143,151,121,.12);
  color:var(--olive-deep);
}

.form-message--error{
  border-color:rgba(181,98,62,.38);
  background:rgba(181,98,62,.10);
  color:var(--terracotta-deep);
}

.form-field .form-control[aria-invalid="true"],
.form-field.is-error .form-control{
  border-color:rgba(181,98,62,.78);
  box-shadow:0 0 0 4px rgba(181,98,62,.10);
}

.form-field.is-success .form-control{
  border-color:rgba(143,151,121,.62);
}

.form-actions .btn-submit[disabled],
.form-actions .btn-submit.is-loading{
  cursor:not-allowed;
  opacity:.72;
  transform:none;
  box-shadow:none;
}

.form-actions .btn-submit.is-loading{
  position:relative;
}

.form-actions .btn-submit.is-loading::before{
  content:"";
  width:1em;
  height:1em;
  margin-right:.55em;
  border-radius:50%;
  border:2px solid currentColor;
  border-right-color:transparent;
  animation:formSubmitSpin .8s linear infinite;
}

@keyframes formSubmitSpin{
  to{ transform:rotate(360deg); }
}

.form-consent{
  grid-column:1 / -1;
}

.form-consent .form-note,
.form-checkbox .form-note{
  margin-top:2px;
}

/* Form System implementation refinements — v0100 */
.form-required{
  font-weight:600;
  color:var(--ink-soft);
}

.form-field--full{
  grid-column:1 / -1;
}

.form-control:disabled,
.form-control[disabled]{
  cursor:not-allowed;
  opacity:.72;
  background:rgba(241,233,212,.55);
}

.form-control:required:invalid{
  box-shadow:none;
}

.form-control:required:invalid:not(:placeholder-shown){
  border-color:rgba(181,98,62,.5);
}

.form-actions .btn-submit{
  background:var(--terracotta);
  color:#fff;
  border-color:var(--terracotta);
}

.form-actions .btn-submit:hover{
  background:var(--terracotta-deep);
  border-color:var(--terracotta-deep);
  color:#fff;
}

.form-actions .btn-submit:focus-visible{
  outline:3px solid rgba(181,98,62,.28);
  outline-offset:3px;
}

.form-message[hidden]{
  display:none !important;
}

/* Form System visual polish — v0103 */
.form-required{
  color:var(--terracotta);
  font-weight:700;
}

.form-optional{
  margin-left:.35em;
  font-size:.78rem;
  font-weight:600;
  color:var(--ink-soft);
  opacity:.72;
}

.form-required-note{
  margin:0 0 18px;
  font-size:.88rem;
  line-height:1.5;
  color:var(--ink-soft);
}

.form-required-note span{
  color:var(--terracotta);
  font-weight:700;
}

.form-field{
  gap:7px;
  margin-bottom:20px;
}

.form-label{
  display:flex;
  align-items:center;
  gap:.28em;
  flex-wrap:wrap;
}

.form-control{
  min-height:46px;
  border-color:rgba(44,38,32,.16);
}

textarea.form-control{
  min-height:132px;
}

.form-control:required:invalid,
.form-control:required:invalid:not(:placeholder-shown){
  border-color:rgba(44,38,32,.16);
  box-shadow:none;
}

.form-control:focus,
.form-control:required:invalid:focus{
  border-color:rgba(181,98,62,.72);
  background:#fff;
  box-shadow:0 0 0 4px rgba(181,98,62,.12);
}

/* Form System label marker polish — v0104 */
.form-label{
  display:block;
}

.form-label .form-required,
.form-label .form-optional{
  display:inline;
  vertical-align:baseline;
  white-space:nowrap;
}

.form-label .form-required{
  margin-left:.22em;
}

.form-label .form-optional{
  margin-left:.45em;
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.01em;
  color:rgba(90,81,69,.72);
}

.form-required-note{
  margin-bottom:14px;
  font-size:.84rem;
}

/* Form System definitive inline label markers — v0105 */
.form-label .form-label-line{
  display:inline-flex;
  align-items:baseline;
  gap:.28em;
  max-width:100%;
  white-space:nowrap;
}

.form-label .form-label-line .form-required,
.form-label .form-label-line .form-optional{
  display:inline-flex !important;
  width:auto !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  line-height:1;
}

.form-label .form-label-line .form-required{
  margin-left:.04em !important;
}

.form-label .form-label-line .form-optional{
  margin-left:.35em !important;
  font-size:.76rem;
  font-weight:600;
  color:rgba(90,81,69,.68);
}

/* Form System clean labels + validation messaging — v0106 */
.form-label{
  font-weight:700;
}

.form-error[hidden],
.form-message[hidden]{
  display:none !important;
}

.form-field.is-error .form-error{
  display:block;
}

.form-field.is-error .form-control{
  border-color:rgba(181,98,62,.78);
  box-shadow:0 0 0 4px rgba(181,98,62,.10);
}

.form-field.is-error .form-label{
  color:var(--ink);
}

.form-message--error{
  font-weight:600;
}

/* Form System spacing polish — v0107 */
.form-field{
  margin-bottom:18px;
}

textarea.form-control{
  min-height:118px;
}

.form-actions{
  margin-top:2px;
}

/* v0134 Sitewide anchor offset
   Sticky header safe scrolling for all in-page anchor links.
*/
html{
  scroll-padding-top:var(--df-anchor-offset-desktop, 116px);
}

[id]{
  scroll-margin-top:var(--df-anchor-offset-desktop, 116px);
}

@media(max-width:680px){
  html{
    scroll-padding-top:var(--df-anchor-offset-mobile, 92px);
  }

  [id]{
    scroll-margin-top:var(--df-anchor-offset-mobile, 92px);
  }
}

/* v0141 Mobile auto-detected links protection
   Prevent iOS/Safari from styling numeric ranges like phone links.
*/
a[x-apple-data-detectors],
a[x-apple-data-detectors="true"]{
  color:inherit !important;
  text-decoration:none !important;
  font:inherit !important;
}

[data-no-autolink]{
  color:inherit;
  text-decoration:none;
}

/* v0143 Global button consistency
   Design Factory rule:
   Primary button motion/focus is centralized here.
   Page CSS may only place buttons; it may not redefine primary hover/focus animation.
*/
:root{
  --df-button-radius:999px;
  --df-button-primary-bg:var(--terracotta);
  --df-button-primary-color:#fff;
  --df-button-hover-y:-2px;
  --df-button-shadow:none;
  --df-button-shadow-hover:0 14px 28px rgba(181,98,62,.22);
  --df-button-shadow-active:0 8px 18px rgba(181,98,62,.18);
  --df-button-focus-ring:0 0 0 3px rgba(181,98,62,.24);
}

.btn,
.nav-cta,
button[type="submit"],
input[type="submit"]{
  -webkit-tap-highlight-color:transparent;
}

.btn,
.nav-cta,
button[type="submit"].btn,
input[type="submit"].btn{
  border-radius:var(--df-button-radius);
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background-color .22s ease,
    border-color .22s ease,
    color .22s ease !important;
  will-change:transform;
}

.btn-primary,
.btn-submit,
.nav-cta,
button[type="submit"],
button[type="submit"].btn,
button[type="submit"].btn-primary,
button[type="submit"].btn-submit,
input[type="submit"],
input[type="submit"].btn,
.guestblog-submit,
.contact-submit,
.blog-load-more.btn.btn-primary{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid transparent !important;
  border-radius:var(--df-button-radius) !important;
  background:var(--df-button-primary-bg) !important;
  color:var(--df-button-primary-color) !important;
  box-shadow:var(--df-button-shadow) !important;
  font-weight:700 !important;
  text-decoration:none !important;
  cursor:pointer !important;
  appearance:none !important;
}

.btn-primary:hover,
.btn-submit:hover,
.nav-cta:hover,
button[type="submit"]:hover,
button[type="submit"].btn:hover,
button[type="submit"].btn-primary:hover,
button[type="submit"].btn-submit:hover,
input[type="submit"]:hover,
input[type="submit"].btn:hover,
.guestblog-submit:hover,
.contact-submit:hover,
.blog-load-more.btn.btn-primary:hover{
  transform:translateY(var(--df-button-hover-y)) !important;
  background:var(--df-button-primary-bg) !important;
  color:var(--df-button-primary-color) !important;
  border-color:transparent !important;
  box-shadow:var(--df-button-shadow-hover) !important;
  text-decoration:none !important;
}

.btn-primary:active,
.btn-submit:active,
.nav-cta:active,
button[type="submit"]:active,
button[type="submit"].btn:active,
button[type="submit"].btn-primary:active,
button[type="submit"].btn-submit:active,
input[type="submit"]:active,
input[type="submit"].btn:active,
.guestblog-submit:active,
.contact-submit:active,
.blog-load-more.btn.btn-primary:active{
  transform:translateY(0) !important;
  box-shadow:var(--df-button-shadow-active) !important;
}

.btn-primary:focus,
.btn-primary:focus-visible,
.btn-submit:focus,
.btn-submit:focus-visible,
.nav-cta:focus,
.nav-cta:focus-visible,
button[type="submit"]:focus,
button[type="submit"]:focus-visible,
button[type="submit"].btn:focus,
button[type="submit"].btn:focus-visible,
button[type="submit"].btn-primary:focus,
button[type="submit"].btn-primary:focus-visible,
button[type="submit"].btn-submit:focus,
button[type="submit"].btn-submit:focus-visible,
input[type="submit"]:focus,
input[type="submit"]:focus-visible,
input[type="submit"].btn:focus,
input[type="submit"].btn:focus-visible,
.guestblog-submit:focus,
.guestblog-submit:focus-visible,
.contact-submit:focus,
.contact-submit:focus-visible,
.blog-load-more.btn.btn-primary:focus,
.blog-load-more.btn.btn-primary:focus-visible{
  outline:none !important;
  border-color:transparent !important;
  box-shadow:var(--df-button-focus-ring) !important;
}

/* Submit/action buttons never show animated arrows. CTA links may still use .arr. */
.btn-submit .arr,
.guestblog-submit .arr,
.contact-submit .arr,
button[type="submit"] .arr,
button[type="submit"] span[aria-hidden="true"]{
  display:none !important;
}

.btn-primary:disabled,
.btn-submit:disabled,
button[type="submit"]:disabled,
input[type="submit"]:disabled,
.guestblog-submit:disabled,
.contact-submit:disabled,
.blog-load-more.btn.btn-primary:disabled{
  cursor:not-allowed !important;
  opacity:.72 !important;
  transform:none !important;
  box-shadow:none !important;
}

/* Secondary/ghost buttons keep their visual style but share the same motion rhythm. */
.btn-ghost,
.btn-light,
.btn-outline{
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background-color .22s ease,
    border-color .22s ease,
    color .22s ease !important;
}

.btn-ghost:hover,
.btn-light:hover,
.btn-outline:hover{
  transform:translateY(var(--df-button-hover-y)) !important;
  text-decoration:none !important;
}

@media(max-width:680px){
  .form-actions .btn-submit,
  .form-actions button[type="submit"],
  .guestblog-actions .btn,
  .guestblog-submit,
  .contact-submit{
    width:100% !important;
  }
}

/* v0152 Compact email-only form protection
   Compact e-mail pill forms use their own contained button behavior.
   They must not inherit the global primary button lift/overflow effect.
*/
.compact-email-field,
.email-pill-field,
.newsletter-pill-field{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:58px;
  padding:7px;
  border-radius:999px;
  background:var(--cream);
  overflow:hidden;
}

.compact-email-field input,
.email-pill-field input,
.newsletter-pill-field input{
  min-width:0;
  flex:1 1 auto;
  width:100%;
  height:44px;
  border:0;
  outline:0;
  background:transparent;
}

.compact-email-field button,
.email-pill-field button,
.newsletter-pill-field button,
.compact-email-field button[type="submit"],
.email-pill-field button[type="submit"],
.newsletter-pill-field button[type="submit"]{
  flex:0 0 auto !important;
  height:44px !important;
  min-height:44px !important;
  max-height:44px !important;
  padding:0 20px !important;
  border:0 !important;
  border-radius:999px !important;
  background:var(--terracotta) !important;
  color:#fff !important;
  transform:none !important;
  box-shadow:none !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

.compact-email-field button:hover,
.email-pill-field button:hover,
.newsletter-pill-field button:hover,
.compact-email-field button[type="submit"]:hover,
.email-pill-field button[type="submit"]:hover,
.newsletter-pill-field button[type="submit"]:hover,
.compact-email-field button:focus-visible,
.email-pill-field button:focus-visible,
.newsletter-pill-field button:focus-visible,
.compact-email-field button[type="submit"]:focus-visible,
.email-pill-field button[type="submit"]:focus-visible,
.newsletter-pill-field button[type="submit"]:focus-visible{
  transform:none !important;
  background:var(--terracotta) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:inset 0 0 0 999px rgba(44,38,32,.05) !important;
  outline:none !important;
}

.compact-email-field:focus-within,
.email-pill-field:focus-within,
.newsletter-pill-field:focus-within{
  box-shadow:0 0 0 3px rgba(181,98,62,.18);
}

@media(max-width:420px){
  .compact-email-field,
  .email-pill-field,
  .newsletter-pill-field{
    gap:6px;
    padding:6px;
  }

  .compact-email-field button,
  .email-pill-field button,
  .newsletter-pill-field button,
  .compact-email-field button[type="submit"],
  .email-pill-field button[type="submit"],
  .newsletter-pill-field button[type="submit"]{
    padding:0 14px !important;
    font-size:.9rem !important;
  }
}

/* v0153 Compact email icon submit
   E-mail-only signup forms use a contained circular icon button.
   Fixes homepage hover jump and reuses same pattern on blog detail.
*/
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.compact-email-field,
.email-pill-field,
.newsletter-pill-field,
.cta-form.compact-email-field{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  width:100%;
  min-height:64px !important;
  padding:8px !important;
  border-radius:999px !important;
  background:rgba(250,246,236,.96) !important;
  overflow:hidden !important;
}

.compact-email-field input,
.email-pill-field input,
.newsletter-pill-field input,
.cta-form.compact-email-field input{
  position:static !important;
  min-width:0 !important;
  flex:1 1 auto !important;
  width:100% !important;
  height:48px !important;
  padding:0 16px 0 22px !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  color:var(--ink) !important;
  box-shadow:none !important;
  font:inherit !important;
}

.compact-email-field .email-icon-submit,
.email-pill-field .email-icon-submit,
.newsletter-pill-field .email-icon-submit,
.cta-form.compact-email-field .email-icon-submit,
.compact-email-field button[type="submit"],
.email-pill-field button[type="submit"],
.newsletter-pill-field button[type="submit"],
.cta-form.compact-email-field button[type="submit"]{
  position:static !important;
  inset:auto !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 48px !important;
  width:48px !important;
  min-width:48px !important;
  max-width:48px !important;
  height:48px !important;
  min-height:48px !important;
  max-height:48px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:var(--terracotta) !important;
  color:#fff !important;
  transform:none !important;
  translate:0 0 !important;
  box-shadow:none !important;
  line-height:1 !important;
  text-indent:0 !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  cursor:pointer !important;
}

.compact-email-field .email-icon-submit:hover,
.email-pill-field .email-icon-submit:hover,
.newsletter-pill-field .email-icon-submit:hover,
.cta-form.compact-email-field .email-icon-submit:hover,
.compact-email-field button[type="submit"]:hover,
.email-pill-field button[type="submit"]:hover,
.newsletter-pill-field button[type="submit"]:hover,
.cta-form.compact-email-field button[type="submit"]:hover,
.compact-email-field .email-icon-submit:focus-visible,
.email-pill-field .email-icon-submit:focus-visible,
.newsletter-pill-field .email-icon-submit:focus-visible,
.cta-form.compact-email-field .email-icon-submit:focus-visible,
.compact-email-field button[type="submit"]:focus-visible,
.email-pill-field button[type="submit"]:focus-visible,
.newsletter-pill-field button[type="submit"]:focus-visible,
.cta-form.compact-email-field button[type="submit"]:focus-visible{
  position:static !important;
  transform:none !important;
  translate:0 0 !important;
  background:var(--terracotta) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:inset 0 0 0 999px rgba(44,38,32,.06) !important;
  outline:none !important;
}

.compact-email-field .email-submit-icon,
.email-pill-field .email-submit-icon,
.newsletter-pill-field .email-submit-icon,
.cta-form.compact-email-field .email-submit-icon{
  display:block !important;
  width:22px !important;
  height:22px !important;
  flex:0 0 22px !important;
  color:currentColor !important;
  pointer-events:none !important;
}

.compact-email-field:focus-within,
.email-pill-field:focus-within,
.newsletter-pill-field:focus-within,
.cta-form.compact-email-field:focus-within{
  box-shadow:0 0 0 3px rgba(181,98,62,.18) !important;
}

@media(max-width:420px){
  .compact-email-field,
  .email-pill-field,
  .newsletter-pill-field,
  .cta-form.compact-email-field{
    min-height:58px !important;
    padding:6px !important;
  }

  .compact-email-field .email-icon-submit,
  .email-pill-field .email-icon-submit,
  .newsletter-pill-field .email-icon-submit,
  .cta-form.compact-email-field .email-icon-submit,
  .compact-email-field button[type="submit"],
  .email-pill-field button[type="submit"],
  .newsletter-pill-field button[type="submit"],
  .cta-form.compact-email-field button[type="submit"]{
    flex-basis:46px !important;
    width:46px !important;
    min-width:46px !important;
    max-width:46px !important;
    height:46px !important;
    min-height:46px !important;
    max-height:46px !important;
  }
}

/* v0154 Compact email icon alignment fix
   Final override: e-mail-only icon submit is always right-aligned and centered.
*/
.compact-email-field,
.email-pill-field,
.newsletter-pill-field,
.cta-form.compact-email-field{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  width:100% !important;
}

.compact-email-field input,
.email-pill-field input,
.newsletter-pill-field input,
.cta-form.compact-email-field input{
  flex:1 1 auto !important;
  min-width:0 !important;
}

.compact-email-field .email-icon-submit,
.email-pill-field .email-icon-submit,
.newsletter-pill-field .email-icon-submit,
.cta-form.compact-email-field .email-icon-submit,
.compact-email-field button.email-icon-submit,
.email-pill-field button.email-icon-submit,
.newsletter-pill-field button.email-icon-submit,
.cta-form.compact-email-field button.email-icon-submit{
  position:relative !important;
  right:auto !important;
  left:auto !important;
  top:auto !important;
  bottom:auto !important;
  margin-left:auto !important;
  margin-right:0 !important;
  transform:none !important;
  translate:0 0 !important;
}

.compact-email-field .email-icon-submit:hover,
.email-pill-field .email-icon-submit:hover,
.newsletter-pill-field .email-icon-submit:hover,
.cta-form.compact-email-field .email-icon-submit:hover,
.compact-email-field .email-icon-submit:focus-visible,
.email-pill-field .email-icon-submit:focus-visible,
.newsletter-pill-field .email-icon-submit:focus-visible,
.cta-form.compact-email-field .email-icon-submit:focus-visible{
  transform:none !important;
  translate:0 0 !important;
}

.compact-email-field .email-submit-icon,
.email-pill-field .email-submit-icon,
.newsletter-pill-field .email-submit-icon,
.cta-form.compact-email-field .email-submit-icon{
  width:21px !important;
  height:21px !important;
  stroke-width:2 !important;
}

/* v0155 Compact email pill hard alignment
   Final hard fix for homepage/footer/newsletter pill buttons:
   the icon button is absolutely positioned right-center inside the pill.
*/
.compact-email-field,
.email-pill-field,
.newsletter-pill-field,
.cta-form.compact-email-field{
  position:relative !important;
  display:block !important;
  min-height:64px !important;
  padding:8px 64px 8px 8px !important;
  border-radius:999px !important;
  overflow:hidden !important;
}

.compact-email-field input,
.email-pill-field input,
.newsletter-pill-field input,
.cta-form.compact-email-field input{
  display:block !important;
  width:100% !important;
  height:48px !important;
  min-height:48px !important;
  padding:0 18px 0 24px !important;
  border:0 !important;
  background:transparent !important;
  outline:0 !important;
  box-shadow:none !important;
}

.compact-email-field .email-icon-submit,
.email-pill-field .email-icon-submit,
.newsletter-pill-field .email-icon-submit,
.cta-form.compact-email-field .email-icon-submit,
.compact-email-field button.email-icon-submit,
.email-pill-field button.email-icon-submit,
.newsletter-pill-field button.email-icon-submit,
.cta-form.compact-email-field button.email-icon-submit,
.compact-email-field button[type="submit"].email-icon-submit,
.email-pill-field button[type="submit"].email-icon-submit,
.newsletter-pill-field button[type="submit"].email-icon-submit,
.cta-form.compact-email-field button[type="submit"].email-icon-submit{
  position:absolute !important;
  top:50% !important;
  right:8px !important;
  bottom:auto !important;
  left:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:48px !important;
  min-width:48px !important;
  max-width:48px !important;
  height:48px !important;
  min-height:48px !important;
  max-height:48px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:50% !important;
  transform:translateY(-50%) !important;
  translate:0 0 !important;
  background:var(--terracotta) !important;
  color:#fff !important;
  box-shadow:none !important;
  overflow:hidden !important;
}

.compact-email-field .email-icon-submit:hover,
.email-pill-field .email-icon-submit:hover,
.newsletter-pill-field .email-icon-submit:hover,
.cta-form.compact-email-field .email-icon-submit:hover,
.compact-email-field .email-icon-submit:focus-visible,
.email-pill-field .email-icon-submit:focus-visible,
.newsletter-pill-field .email-icon-submit:focus-visible,
.cta-form.compact-email-field .email-icon-submit:focus-visible,
.compact-email-field button[type="submit"].email-icon-submit:hover,
.email-pill-field button[type="submit"].email-icon-submit:hover,
.newsletter-pill-field button[type="submit"].email-icon-submit:hover,
.cta-form.compact-email-field button[type="submit"].email-icon-submit:hover,
.compact-email-field button[type="submit"].email-icon-submit:focus-visible,
.email-pill-field button[type="submit"].email-icon-submit:focus-visible,
.newsletter-pill-field button[type="submit"].email-icon-submit:focus-visible,
.cta-form.compact-email-field button[type="submit"].email-icon-submit:focus-visible{
  top:50% !important;
  right:8px !important;
  transform:translateY(-50%) !important;
  translate:0 0 !important;
  background:var(--terracotta) !important;
  color:#fff !important;
  box-shadow:inset 0 0 0 999px rgba(44,38,32,.06) !important;
  outline:none !important;
}

.compact-email-field .email-submit-icon,
.email-pill-field .email-submit-icon,
.newsletter-pill-field .email-submit-icon,
.cta-form.compact-email-field .email-submit-icon{
  display:block !important;
  width:20px !important;
  height:20px !important;
  margin:0 !important;
  flex:none !important;
}

@media(max-width:420px){
  .compact-email-field,
  .email-pill-field,
  .newsletter-pill-field,
  .cta-form.compact-email-field{
    min-height:58px !important;
    padding:6px 58px 6px 6px !important;
  }

  .compact-email-field .email-icon-submit,
  .email-pill-field .email-icon-submit,
  .newsletter-pill-field .email-icon-submit,
  .cta-form.compact-email-field .email-icon-submit,
  .compact-email-field button.email-icon-submit,
  .email-pill-field button.email-icon-submit,
  .newsletter-pill-field button.email-icon-submit,
  .cta-form.compact-email-field button.email-icon-submit{
    right:6px !important;
    width:46px !important;
    min-width:46px !important;
    max-width:46px !important;
    height:46px !important;
    min-height:46px !important;
    max-height:46px !important;
  }
}

/* v0156 Compact email-only validation messages
   Prevent native browser validation by pairing novalidate with NL custom messages.
*/
.compact-email-error,
.compact-email-success{
  margin:8px 8px 0;
  font-size:.86rem;
  line-height:1.35;
}

.compact-email-error{
  color:var(--terracotta);
}

.compact-email-success{
  color:var(--olive-deep);
}

.detail-side-card--newsletter .compact-email-error,
.detail-side-card--newsletter .compact-email-success{
  color:#fff;
}

/* v0157 Solid paper-plane icon for compact email signup buttons */
.compact-email-field .email-submit-icon,
.email-pill-field .email-submit-icon,
.newsletter-pill-field .email-submit-icon,
.cta-form.compact-email-field .email-submit-icon{
  width:18px !important;
  height:18px !important;
}



/* v0159 Compact email signup final cleanup
   - use single pill wrapper only
   - NL custom validation only (no native required bubbles)
   - arrow icon restored
   - error/success messages live below the pill, never inside it
*/
.cta-form,
.compact-email-form{
  display:grid;
  gap:10px;
}

.cta-form .compact-email-field,
.compact-email-form .compact-email-field{
  position:relative !important;
  display:block !important;
  min-height:64px !important;
  padding:8px 64px 8px 8px !important;
  border-radius:999px !important;
  overflow:hidden !important;
  background:var(--cream) !important;
  box-shadow:inset 0 0 0 1px rgba(44,38,32,.06) !important;
}

.cta-form .compact-email-field input,
.compact-email-form .compact-email-field input{
  display:block !important;
  width:100% !important;
  height:48px !important;
  min-height:48px !important;
  padding:0 18px 0 24px !important;
  border:0 !important;
  background:transparent !important;
  outline:0 !important;
  box-shadow:none !important;
}

.cta-form .compact-email-field .email-icon-submit,
.compact-email-form .compact-email-field .email-icon-submit,
.cta-form .compact-email-field button[type="submit"].email-icon-submit,
.compact-email-form .compact-email-field button[type="submit"].email-icon-submit{
  position:absolute !important;
  top:50% !important;
  right:8px !important;
  left:auto !important;
  bottom:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  min-height:48px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:50% !important;
  transform:translateY(-50%) !important;
  background:var(--terracotta) !important;
  color:#fff !important;
  box-shadow:none !important;
  overflow:hidden !important;
}

.cta-form .compact-email-field .email-icon-submit:hover,
.compact-email-form .compact-email-field .email-icon-submit:hover,
.cta-form .compact-email-field .email-icon-submit:focus-visible,
.compact-email-form .compact-email-field .email-icon-submit:focus-visible{
  top:50% !important;
  right:8px !important;
  transform:translateY(-50%) !important;
  background:var(--terracotta) !important;
  box-shadow:inset 0 0 0 999px rgba(44,38,32,.06) !important;
  outline:none !important;
}

.cta-form .compact-email-field .email-submit-icon,
.compact-email-form .compact-email-field .email-submit-icon{
  display:block !important;
  width:18px !important;
  height:18px !important;
  margin:0 !important;
  flex:none !important;
}

.cta-form .compact-email-error,
.cta-form .compact-email-success,
.compact-email-form .compact-email-error,
.compact-email-form .compact-email-success{
  margin:0 8px !important;
}

.detail-side-card--newsletter .compact-email-error,
.detail-side-card--newsletter .compact-email-success{
  color:#fff !important;
}

@media(max-width:420px){
  .cta-form .compact-email-field,
  .compact-email-form .compact-email-field{
    min-height:58px !important;
    padding:6px 58px 6px 6px !important;
  }

  .cta-form .compact-email-field .email-icon-submit,
  .compact-email-form .compact-email-field .email-icon-submit{
    right:6px !important;
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;
  }
}


/* v0160 Fancy upload field pattern
   Design Factory rule for all future file/image uploads in forms.
   Use one consistent styled upload block with icon, guidance copy,
   filename feedback, and a small action pill.
*/
.form-upload-field{
  display:grid;
  gap:10px;
}

.form-upload-input{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0, 0, 0, 0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.form-upload-box{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:center;
  gap:16px;
  padding:18px 18px;
  border:1px dashed rgba(44,38,32,.22);
  border-radius:18px;
  background:rgba(241,233,212,.32);
  box-shadow:0 12px 30px -26px rgba(44,38,32,.18);
  cursor:pointer;
  text-decoration:none;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
}

.form-upload-box:hover{
  transform:translateY(-1px);
  border-color:rgba(181,98,62,.36);
  box-shadow:0 18px 34px -28px rgba(44,38,32,.22);
}

.form-upload-field:focus-within .form-upload-box{
  border-color:rgba(181,98,62,.72);
  box-shadow:0 0 0 4px rgba(181,98,62,.12);
  background:#fff;
}

.form-upload-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:16px;
  background:rgba(181,98,62,.12);
  color:var(--terracotta);
  flex:none;
}

.form-upload-icon svg{
  width:24px;
  height:24px;
}

.form-upload-content{
  display:grid;
  gap:4px;
  min-width:0;
}

.form-upload-content strong{
  display:block;
  color:var(--ink);
  font-size:.98rem;
  line-height:1.35;
}

.form-upload-meta{
  display:block;
  color:var(--ink-soft);
  font-size:.9rem;
  line-height:1.45;
}

.form-upload-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 18px;
  border-radius:999px;
  background:var(--terracotta);
  color:#fff;
  font-size:.88rem;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  box-shadow:none;
}

.form-upload-filename{
  margin:0;
  color:var(--ink-soft);
  font-size:.84rem;
  line-height:1.5;
}

.form-upload-field.has-file .form-upload-box{
  border-style:solid;
  border-color:rgba(143,151,121,.52);
  background:rgba(143,151,121,.10);
}

.form-upload-field.has-file .form-upload-icon{
  background:rgba(143,151,121,.16);
  color:var(--olive-deep);
}

.form-upload-field.has-file .form-upload-button{
  background:var(--olive-deep);
}

.form-upload-field.has-file .form-upload-filename{
  color:var(--olive-deep);
  font-weight:600;
}

@media(max-width:680px){
  .form-upload-box{
    grid-template-columns:1fr;
    gap:12px;
    padding:16px;
  }

  .form-upload-icon{
    width:46px;
    height:46px;
    border-radius:14px;
  }

  .form-upload-button{
    width:100%;
  }
}


/* v0161 Compact email form messaging cleanup
   - compact email success/error messages always render below the pill
   - no white message box inside/behind the field
   - message text stays white on terracotta surfaces
*/
.cta-form .compact-email-error,
.cta-form .compact-email-success,
.compact-email-form .compact-email-error,
.compact-email-form .compact-email-success{
  display:block;
  margin:2px 6px 0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  font-size:.84rem;
  line-height:1.45;
  color:#fff !important;
}

.cta-form .compact-email-error[hidden],
.cta-form .compact-email-success[hidden],
.compact-email-form .compact-email-error[hidden],
.compact-email-form .compact-email-success[hidden]{
  display:none !important;
}

/* v0165 Compact email messages final fix
   Messages belong below the pill, without their own box/background.
*/
.cta-form .compact-email-error,
.cta-form .compact-email-success,
.compact-email-form .compact-email-error,
.compact-email-form .compact-email-success,
form[data-email-signup-form="true"] .compact-email-error,
form[data-email-signup-form="true"] .compact-email-success{
  display:block;
  position:static !important;
  width:auto !important;
  height:auto !important;
  margin:8px 12px 0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#fff !important;
  font-size:.86rem !important;
  line-height:1.45 !important;
}

.cta-form .compact-email-error[hidden],
.cta-form .compact-email-success[hidden],
.compact-email-form .compact-email-error[hidden],
.compact-email-form .compact-email-success[hidden],
form[data-email-signup-form="true"] .compact-email-error[hidden],
form[data-email-signup-form="true"] .compact-email-success[hidden]{
  display:none !important;
}

.cta-form .compact-email-field + .compact-email-error,
.cta-form .compact-email-field + .compact-email-success,
.compact-email-form .compact-email-field + .compact-email-error,
.compact-email-form .compact-email-field + .compact-email-success{
  margin-top:8px !important;
}

/* v0167 Compact email form wrapper reset
   The form wrapper must never create a second white box.
   Only .compact-email-field is the visual pill.
*/
.cta-form.cta-form--compact-email,
form.cta-form.cta-form--compact-email,
.compact-email-form,
form.compact-email-form,
form[data-email-signup-form="true"]{
  overflow:visible !important;
  background:transparent !important;
  background-color:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 !important;
}

.cta-form.cta-form--compact-email.is-error,
form.cta-form.cta-form--compact-email.is-error,
.compact-email-form.is-error,
form.compact-email-form.is-error,
form[data-email-signup-form="true"].is-error{
  background:transparent !important;
  background-color:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.cta-form.cta-form--compact-email > .compact-email-field,
form.cta-form.cta-form--compact-email > .compact-email-field,
.compact-email-form > .compact-email-field,
form.compact-email-form > .compact-email-field,
form[data-email-signup-form="true"] > .compact-email-field{
  background:var(--cream) !important;
  border-radius:999px !important;
}

.cta-form.cta-form--compact-email > .compact-email-error,
.cta-form.cta-form--compact-email > .compact-email-success,
.compact-email-form > .compact-email-error,
.compact-email-form > .compact-email-success,
form[data-email-signup-form="true"] > .compact-email-error,
form[data-email-signup-form="true"] > .compact-email-success{
  margin:8px 12px 0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:#fff !important;
}

/* v0183 Unified H1 scale
   Standard page H1 size equals homepage hero H1.
*/
:root{
  --ls-page-h1-size:clamp(3rem, 6.5vw, 5.6rem);
}

/* v0183 Unified page H1 size
   All main page H1 titles use the homepage H1 scale.
*/
:where(
  .home-hero h1,
  .rh-title,
  .podcast-hero h1,
  .podcast-title,
  .aanbod-hero h1,
  .team-title,
  .blog-hero h1,
  .blog-post-hero-copy h1,
  .contact-hero h1,
  .guestblog-hero h1,
  .privacy-hero h1
){
  font-size:var(--ls-page-h1-size, clamp(3rem, 6.5vw, 5.6rem)) !important;
}

/* v0183 Safety net for top-level page heroes */
body :is(
  #home-hero-title,
  #ruimte-hero-title,
  #team-title,
  .blog-post-hero-copy > h1,
  .contact-hero-title,
  .guestblog-title,
  .privacy-title
){
  font-size:var(--ls-page-h1-size, clamp(3rem, 6.5vw, 5.6rem)) !important;
}

/* v0184 Simple fixed desktop H1 scale
   Desktop:
   - homepage H1: 85px
   - all other main H1s: 70px
   Mobile/tablet remains safe and consistent.
*/
:root{
  --ls-page-h1-size:70px;
  --ls-home-h1-size:90px;
  --ls-mobile-page-h1-size:clamp(2.55rem, 11vw, 4.35rem);
}

:where(
  .rh-title,
  .podcast-hero h1,
  .podcast-title,
  .aanbod-hero h1,
  .team-title,
  .blog-hero h1,
  .blog-post-hero-copy h1,
  .contact-hero h1,
  .guestblog-hero h1,
  .privacy-hero h1
){
  font-size:var(--ls-page-h1-size) !important;
}

:where(.home-hero h1, #home-hero-title){
  font-size:var(--ls-home-h1-size) !important;
}

body :is(
  #ruimte-hero-title,
  #team-title,
  .blog-post-hero-copy > h1,
  .contact-hero-title,
  .guestblog-title,
  .privacy-title
){
  font-size:var(--ls-page-h1-size) !important;
}

@media(max-width:680px){
  :where(
    .home-hero h1,
    #home-hero-title,
    .rh-title,
    .podcast-hero h1,
    .podcast-title,
    .aanbod-hero h1,
    .team-title,
    .blog-hero h1,
    .blog-post-hero-copy h1,
    .contact-hero h1,
    .guestblog-hero h1,
    .privacy-hero h1
  ),
  body :is(
    #ruimte-hero-title,
    #team-title,
    .blog-post-hero-copy > h1,
    .contact-hero-title,
    .guestblog-title,
    .privacy-title
  ){
    font-size:var(--ls-mobile-page-h1-size) !important;
  }
}

/* v0186 H1 value confirmation */
:root{
  --ls-home-h1-size:90px;
  --ls-page-h1-size:70px;
}