/* ============================================================
   Mayne Advies — Design System
   Self-contained stylesheet: tokens + base + components.
   Ported from the Claude Design system (project 0028cbbf).
   ============================================================ */

/* ---------- Poppins — bundled webfont ---------- */
@font-face{font-family:"Poppins";font-style:normal;font-weight:300;font-display:swap;src:url("assets/fonts/poppins-300.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/poppins-400.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/poppins-500.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/poppins-600.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/poppins-700.woff2") format("woff2")}

:root{
  /* --- Neutral --- */
  --color-white:#ffffff;
  --color-neutral-lightest:#f2f2f2;
  --color-neutral-lighter:#dad9d8;
  --color-neutral-light:#b5b4b2;
  --color-neutral:#85827f;
  --color-neutral-dark:#54504c;
  --color-neutral-darker:#231e19;
  --color-neutral-darkest:#0b0600;

  /* --- Eucalyptus (primary green) --- */
  --color-eucalyptus-lightest:#e8f3ef;
  --color-eucalyptus-lighter:#d2e7df;
  --color-eucalyptus-light:#62ad8f;
  --color-eucalyptus:#1f8a5f;
  --color-eucalyptus-dark:#186e4c;
  --color-eucalyptus-darker:#0c3726;
  --color-eucalyptus-darkest:#09291c;

  /* --- Pizza (gold accent) --- */
  --color-pizza-lightest:#faf5e7;
  --color-pizza-lighter:#f6ecd0;
  --color-pizza-light:#e0bc5c;
  --color-pizza:#d4a017;
  --color-pizza-dark:#a98012;
  --color-pizza-darker:#544009;
  --color-pizza-darkest:#3f3006;

  /* --- Alpha overlays --- */
  --color-white-20:color-mix(in srgb,var(--color-white),transparent 80%);
  --color-ink-5:color-mix(in srgb,var(--color-neutral-darkest),transparent 95%);
  --color-ink-15:color-mix(in srgb,var(--color-neutral-darkest),transparent 85%);

  /* ---------- Semantic aliases ---------- */
  --brand-primary:var(--color-eucalyptus);
  --brand-primary-hover:var(--color-eucalyptus-dark);
  --brand-accent:var(--color-pizza);

  --text-body:var(--color-neutral-darkest);
  --text-muted:var(--color-neutral-dark);
  --text-subtle:var(--color-neutral);
  --text-on-dark:var(--color-white);
  --text-link:var(--color-eucalyptus);
  --text-link-hover:var(--color-eucalyptus-dark);

  --surface-page:var(--color-white);
  --surface-card:var(--color-white);
  --surface-muted:var(--color-neutral-lightest);
  --surface-cream:var(--color-pizza-lightest);
  --surface-mint:var(--color-eucalyptus-lightest);
  --surface-dark:var(--color-eucalyptus-darkest);
  --surface-brand:var(--color-eucalyptus);

  --border-subtle:var(--color-ink-15);
  --border-on-dark:var(--color-white-20);

  --brand-primary-on-dark:var(--color-eucalyptus-light);
  --brand-accent-on-dark:var(--color-pizza-light);

  /* ---------- Typography ---------- */
  --font-family-base:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-family-heading:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --font-weight-light:300;
  --font-weight-regular:400;
  --font-weight-medium:500;
  --font-weight-semibold:600;
  --font-weight-bold:700;

  /* Mobile-first sizes */
  --text-h1:2.75rem;
  --text-h2:2.5rem;
  --text-h3:2rem;
  --text-h4:1.5rem;
  --text-h5:1.25rem;
  --text-h6:1.125rem;
  --text-large:1.125rem;
  --text-medium:1rem;
  --text-regular:0.875rem;
  --text-small:0.875rem;
  --text-tiny:0.75rem;

  /* ---------- Spacing / layout ---------- */
  --section-py:4rem;
  --section-py-md:6rem;
  --section-py-lg:7rem;
  --page-gutter:5%;
  --container-xxl:80rem;

  /* ---------- Radius ---------- */
  --radius-button:6.25rem;
  --radius-input:0.75rem;
  --radius-checkbox:0.25rem;
  --radius-card:0rem;
  --radius-image:0rem;

  /* ---------- Elevation / motion ---------- */
  --shadow-sm:0 1px 3px rgba(11,6,0,0.08),0 1px 2px rgba(11,6,0,0.04);
  --shadow-md:0 4px 12px rgba(11,6,0,0.08);
  --ease-in-out:ease-in-out;
  --duration-base:200ms;
}
@media (min-width:992px){
  :root{
    --text-h1:4.5rem;
    --text-h2:3.25rem;
    --text-h3:2.75rem;
    --text-h4:2.25rem;
    --text-h5:1.75rem;
    --text-h6:1.375rem;
    --text-large:1.375rem;
    --text-medium:1.125rem;
    --text-regular:1rem;
  }
}

/* ============================================================
   Base
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{
  font-family:var(--font-family-base);
  color:var(--text-body);
  background:var(--surface-page);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--text-link)}
a:hover{color:var(--text-link-hover)}
img{max-width:100%}

.container{max-width:var(--container-xxl);margin:0 auto;padding:0 var(--page-gutter)}

/* ============================================================
   Brand wordmark
   ============================================================ */
.logo{
  display:inline-flex;align-items:baseline;
  font-family:var(--font-family-heading);
  line-height:1;letter-spacing:-0.01em;user-select:none;font-size:26px;
}
.logo b{font-weight:700;color:var(--brand-primary)}
.logo span{font-weight:500;color:var(--color-neutral-darkest);margin-left:0.14em}
.logo--light b{color:var(--brand-primary-on-dark)}
.logo--light span{color:var(--color-white)}

/* ============================================================
   Button
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;
  font-family:var(--font-family-base);font-weight:var(--font-weight-medium);
  font-size:var(--text-medium);line-height:1.2;
  padding:0.625rem 1.5rem;
  border-radius:var(--radius-button);border:1px solid transparent;
  white-space:nowrap;cursor:pointer;text-decoration:none;
  transition:background-color var(--duration-base) var(--ease-in-out),
             border-color var(--duration-base) var(--ease-in-out),
             color var(--duration-base) var(--ease-in-out);
}
.btn--sm{padding:0.5rem 1.25rem;font-size:var(--text-small)}
.btn:disabled{opacity:0.5;cursor:not-allowed}

.btn--default{background:var(--brand-primary);border-color:var(--brand-primary);color:var(--color-white)}
.btn--default:hover:not(:disabled){background:var(--brand-primary-hover);border-color:var(--brand-primary-hover);color:var(--color-white)}

.btn--alternate{background:var(--color-white);border-color:var(--color-white);color:var(--color-neutral-darkest)}
.btn--alternate:hover{background:var(--color-neutral-lightest);border-color:var(--color-neutral-lightest);color:var(--color-neutral-darkest)}

.btn--secondary{background:transparent;border-color:var(--border-subtle);color:var(--color-neutral-darkest)}
.btn--secondary:hover{background:var(--color-ink-5);color:var(--color-neutral-darkest)}
.btn--secondary.on-dark{border-color:var(--border-on-dark);color:var(--color-white);backdrop-filter:blur(10px)}
.btn--secondary.on-dark:hover{background:var(--color-white-20);color:var(--color-white)}

/* ============================================================
   Card
   ============================================================ */
.card{
  overflow:hidden;border-radius:var(--radius-card);
  background:var(--surface-card);border:1px solid var(--border-subtle);color:var(--text-body);
}

/* ============================================================
   Form controls
   ============================================================ */
.field{display:grid;gap:0.5rem;width:100%}
.field > label{
  display:flex;align-items:center;gap:0.5rem;
  font-family:var(--font-family-base);font-size:var(--text-small);
  font-weight:var(--font-weight-medium);color:var(--text-body);user-select:none;
}
.input,.textarea,.select{
  width:100%;min-height:2.75rem;
  font-family:var(--font-family-base);font-size:var(--text-medium);color:var(--text-body);
  background:var(--color-ink-5);border:1px solid var(--border-subtle);
  border-radius:var(--radius-input);outline:none;
  transition:background-color var(--duration-base) var(--ease-in-out),
             border-color var(--duration-base) var(--ease-in-out);
}
.input{padding:0.5rem 0.75rem}
.textarea{padding:0.75rem;min-height:9rem;resize:vertical}
.input:focus,.textarea:focus,.select:focus{border-color:var(--brand-primary);background:var(--color-white)}
.select{
  padding:0.5rem 2.5rem 0.5rem 0.75rem;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2354504c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 0.75rem center;
}

.checkbox{
  position:relative;display:inline-flex;width:1.125rem;height:1.125rem;flex:none;
}
.checkbox input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.checkbox .box{
  width:1.125rem;height:1.125rem;border-radius:var(--radius-checkbox);
  border:1px solid var(--border-subtle);background:var(--color-ink-5);
  display:flex;align-items:center;justify-content:center;
  transition:background-color var(--duration-base) var(--ease-in-out);
}
.checkbox .box svg{opacity:0}
.checkbox input:checked + .box{background:var(--color-neutral-darkest)}
.checkbox input:checked + .box svg{opacity:1}

/* ============================================================
   Layout helpers
   ============================================================ */
.eyebrow{font-size:var(--text-small);font-weight:600;color:var(--brand-primary);margin:0 0 0.5rem}
.section-head{max-width:36rem;margin:0 auto 3.5rem;text-align:center}
.section-head .eyebrow{margin:0 0 0.75rem}
.section-head h2{
  font-family:var(--font-family-heading);font-size:var(--text-h2);font-weight:700;
  line-height:1.2;letter-spacing:-0.01em;margin:0 0 1rem;color:var(--text-body);
}
.section-head p{font-size:var(--text-medium);line-height:1.6;color:var(--text-muted);margin:0}

/* ============================================================
   Site nav
   ============================================================ */
.site-nav{
  position:sticky;top:0;z-index:50;
  background:var(--surface-page);border-bottom:1px solid var(--border-subtle);
}
.site-nav .bar{
  max-width:var(--container-xxl);margin:0 auto;min-height:72px;padding:0 5%;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.site-nav nav{display:flex;gap:4px}
.site-nav nav a{
  padding:8px 16px;font-size:var(--text-medium);color:var(--text-body);text-decoration:none;
}
.site-nav nav a:hover{color:var(--brand-primary)}

/* ============================================================
   Hero
   ============================================================ */
.hero{position:relative;color:#fff;overflow:hidden}
.hero .bg{position:absolute;inset:0;z-index:0}
.hero .bg img{width:100%;height:100%;object-fit:cover}
.hero .bg .scrim{position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(9,41,28,0.86) 0%, rgba(9,41,28,0.62) 45%, rgba(9,41,28,0.25) 100%);}
.hero .inner{position:relative;z-index:1;max-width:var(--container-xxl);margin:0 auto;padding:0 5%}
.hero .stage{min-height:min(84vh,40rem);display:flex;align-items:center;padding:6rem 0}
.hero .copy{max-width:34rem}
.hero h1{
  font-family:var(--font-family-heading);font-size:var(--text-h1);font-weight:700;
  line-height:1.1;letter-spacing:-0.01em;margin:0 0 1.25rem;
}
.hero .lead{font-size:var(--text-large);line-height:1.6;color:rgba(255,255,255,0.88);margin:0 0 2rem;max-width:30rem}
.hero .actions{display:flex;flex-wrap:wrap;gap:16px}

/* ============================================================
   Diensten
   ============================================================ */
.section{padding:var(--section-py-lg) 5%}
.section--muted{background:var(--surface-muted)}
.diensten-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:32px}
.dienst .thumb{background:var(--surface-muted);display:flex;justify-content:center;padding:2rem}
.dienst .thumb img{width:100%;max-width:360px;display:block}
.dienst .body{padding:2rem}
.dienst h3{font-family:var(--font-family-heading);font-size:var(--text-h4);font-weight:700;line-height:1.2;margin:0 0 1rem}
.dienst p{font-size:var(--text-medium);line-height:1.6;color:var(--text-muted);margin:0 0 1.5rem}

/* ============================================================
   Logo list (marquee)
   ============================================================ */
.logolist{background:var(--surface-page);padding:3rem 0 3.5rem;overflow:hidden}
.logolist .head{max-width:36rem;margin:0 auto 2.5rem;padding:0 5%}
.logolist .head h2{
  font-family:var(--font-family-heading);font-size:var(--text-h6);font-weight:700;
  text-align:center;color:var(--text-body);margin:0;
}
.logolist .track{display:flex;width:max-content;animation:ma-loop 40s linear infinite}
.logolist .row{display:flex;align-items:center;flex-shrink:0}
.logolist .row span{margin:0 2.5rem;display:inline-flex;align-items:center;flex-shrink:0}
.logolist .row img{max-height:3.25rem;max-width:9rem;width:auto;object-fit:contain;display:block}
@keyframes ma-loop{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:640px){.logolist .track{animation-duration:24s}}

/* ============================================================
   Waarom
   ============================================================ */
.waarom-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.waarom-feature{grid-column:1 / -1;display:grid;grid-template-columns:1.1fr 1fr}
.waarom-feature .body{padding:2.5rem;display:flex;flex-direction:column;justify-content:center}
.waarom-feature .body h3{font-family:var(--font-family-heading);font-size:var(--text-h4);font-weight:700;margin:0 0 0.75rem}
.waarom-feature .body p{font-size:var(--text-medium);line-height:1.6;color:var(--text-muted);margin:0}
.waarom-feature .media{min-height:240px}
.waarom-feature .media img{width:100%;height:100%;object-fit:cover;display:block}
.waarom-card{display:flex;flex-direction:column}
.waarom-card .body{padding:2rem;flex:1}
.waarom-card h3{font-family:var(--font-family-heading);font-size:var(--text-h5);font-weight:700;margin:0 0 0.5rem}
.waarom-card p{font-size:var(--text-medium);line-height:1.6;color:var(--text-muted);margin:0}
.waarom-card .media{height:180px}
.waarom-card .media img{width:100%;height:100%;object-fit:cover;display:block}

/* ============================================================
   Contact
   ============================================================ */
.contact-grid{
  max-width:var(--container-xxl);margin:0 auto;
  display:grid;grid-template-columns:0.85fr 1fr;gap:80px;align-items:start;
}
.contact-intro h2{
  font-family:var(--font-family-heading);font-size:var(--text-h2);font-weight:700;
  line-height:1.2;letter-spacing:-0.01em;margin:0 0 1rem;
}
.contact-intro > p{font-size:var(--text-medium);line-height:1.6;color:var(--text-muted);margin:0 0 2rem}
.contact-lines{display:grid;gap:16px}
.contact-lines .line{display:flex;align-items:center;gap:16px;color:var(--text-body)}
.contact-lines .line .ic{color:var(--brand-primary);flex:none;display:flex}
.contact-lines .line span{font-size:var(--text-medium)}
.contact-form{max-width:40rem;display:grid;gap:24px}
.contact-form .two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.terms{display:flex;align-items:flex-start;gap:10px;font-size:var(--text-small);line-height:1.5;cursor:pointer}
.terms .checkbox{margin-top:2px}
.form-error{font-size:var(--text-small);color:#b3261e;margin:0}
.form-error a{color:#b3261e;font-weight:600}
.thanks{
  border:1px solid var(--color-eucalyptus-lighter);background:var(--surface-mint);
  padding:2.5rem;display:flex;flex-direction:column;gap:12px;
}
.thanks .check{
  width:48px;height:48px;border-radius:50%;background:var(--brand-primary);
  display:flex;align-items:center;justify-content:center;
}
.thanks h3{font-family:var(--font-family-heading);font-size:var(--text-h4);font-weight:700;margin:0}
.thanks p{font-size:var(--text-medium);line-height:1.6;color:var(--text-muted);margin:0}
.hidden{display:none}

/* ============================================================
   Legal / prose pages
   ============================================================ */
.legal-main{max-width:48rem;margin:0 auto;padding:4rem 5% 5rem}
.legal-main .back{
  display:inline-flex;align-items:center;gap:6px;font-size:var(--text-small);
  color:var(--brand-primary);text-decoration:none;font-weight:500;margin-bottom:2rem;
}
.legal-main .back:hover{color:var(--brand-primary-hover)}
.legal-main h1{
  font-family:var(--font-family-heading);font-size:var(--text-h2);font-weight:700;
  line-height:1.2;letter-spacing:-0.01em;margin:0 0 0.5rem;
}
.legal-main .updated{font-size:var(--text-small);color:var(--text-subtle);margin:0 0 2.5rem}
.legal-main h2{
  font-family:var(--font-family-heading);font-size:var(--text-h5);font-weight:700;
  margin:2.5rem 0 0.75rem;
}
.legal-main p,.legal-main li{font-size:var(--text-medium);line-height:1.7;color:var(--text-muted)}
.legal-main p{margin:0 0 1rem}
.legal-main ul{margin:0 0 1rem;padding-left:1.25rem}
.legal-main li{margin:0 0 0.5rem}
.legal-main a{color:var(--text-link)}
.legal-main strong{color:var(--text-body)}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{background:var(--surface-dark);color:#fff;padding:5rem 5% 2rem}
.site-footer .top{
  max-width:var(--container-xxl);margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding-bottom:3rem;
}
.site-footer ul{display:flex;flex-wrap:wrap;gap:28px;list-style:none;margin:0;padding:0}
.site-footer ul a{color:#fff;text-decoration:none;font-size:var(--text-medium);font-weight:500}
.site-footer ul a:hover{color:var(--brand-primary-on-dark)}
.site-footer .rule{max-width:var(--container-xxl);margin:0 auto;height:1px;background:var(--border-on-dark)}
.site-footer .legal{
  max-width:var(--container-xxl);margin:0 auto;
  display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;
  padding-top:1.5rem;font-size:var(--text-small);color:rgba(255,255,255,0.72);
}
.site-footer .legal p{margin:0}
.site-footer .legal .links{display:flex;gap:24px}
.site-footer .legal a{color:rgba(255,255,255,0.72)}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:900px){
  .waarom-grid{grid-template-columns:1fr}
  .waarom-feature{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr;gap:40px}
}
@media (max-width:640px){
  .site-nav nav{display:none}
  .contact-form .two{grid-template-columns:1fr}
  .hero .actions{flex-direction:column;align-items:flex-start}
}