/* Laura Flokstra Ademwerk — samengevoegde stylesheet.
   Volgorde volgt styles.css uit het design system. */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(./fonts/cormorant-garamond-300-italic.06bc9a8c.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(./fonts/cormorant-garamond-300-italic.e6d6d1d7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/cormorant-garamond-300-italic.06bc9a8c.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/cormorant-garamond-300-italic.e6d6d1d7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(./fonts/cormorant-garamond-300-normal.9dc38267.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(./fonts/cormorant-garamond-300-normal.5d618c46.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/cormorant-garamond-300-normal.9dc38267.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/cormorant-garamond-300-normal.5d618c46.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./fonts/cormorant-garamond-300-normal.9dc38267.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./fonts/cormorant-garamond-300-normal.5d618c46.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./fonts/cormorant-garamond-300-normal.9dc38267.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./fonts/cormorant-garamond-300-normal.5d618c46.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/mulish-400-italic.b73501d6.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/mulish-400-italic.97a4159e.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(./fonts/mulish-300-normal.80941a12.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(./fonts/mulish-300-normal.14cc0eab.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/mulish-300-normal.80941a12.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/mulish-300-normal.14cc0eab.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./fonts/mulish-300-normal.80941a12.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./fonts/mulish-300-normal.14cc0eab.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./fonts/mulish-300-normal.80941a12.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./fonts/mulish-300-normal.14cc0eab.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./fonts/mulish-300-normal.80941a12.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./fonts/mulish-300-normal.14cc0eab.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Webfonts — lokaal gehost (Cormorant Garamond + Mulish, latin/latin-ext).
   Herkomst: Google Fonts. NOTE: no brand font files were supplied by the client;
   these are the closest calm/warm match and are flagged as a substitution in readme.md. */
:root{
  --font-display:"Cormorant Garamond","Iowan Old Style",Georgia,"Times New Roman",serif;
  --font-body:"Mulish",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-quote:"Cormorant Garamond",Georgia,serif;
}


/* tokens/colors.css */
:root{
  /* ── Base palette ─────────────────────────────────────────────
     Sourced from the client brief ("beige, wit en bruin", rustige warme
     kleuren) and from her own photography: sunlit forest, moss, water. */

  /* Warm whites & sand */
  --white:#FFFFFF;
  --cream-50:#FDFBF7;
  --cream-100:#FAF6EF;
  --sand-100:#F5EFE6;
  --sand-200:#EDE3D6;
  --sand-300:#E2D4C2;

  /* Warm neutrals */
  --taupe-400:#CDBBA4;
  --taupe-500:#B39C82;
  --brown-600:#8A7460;
  --brown-700:#5F4E40;
  --brown-800:#42362C;
  --brown-900:#2B231C;

  /* Clay — the "opvallend kleurtje": warm, earthy, never loud */
  --clay-300:#E3B79C;
  --clay-400:#C98A69;
  --clay-500:#B4714F;
  --clay-600:#95583B;

  /* Moss — from the forest photography, used sparingly as a second accent */
  --moss-200:#D5DCCB;
  --moss-300:#AFBBA1;
  --moss-500:#7E8F6E;
  --moss-700:#4E5A42;

  /* Amber — low sun through trees; highlights and small marks only */
  --amber-300:#F0D6A4;
  --amber-400:#DFAE5B;
  --amber-500:#C9913A;

  /* Support (form states only — kept desaturated so nothing shouts) */
  --success-500:#6E8C63;
  --error-500:#A85B4C;

  /* ── Semantic aliases ───────────────────────────────────────── */
  --text-heading:var(--brown-900);
  --text-body:var(--brown-700);
  --text-muted:var(--brown-600);
  --text-soft:var(--taupe-500);
  --text-accent:var(--clay-600);
  --text-on-dark:var(--cream-100);
  --text-on-accent:var(--cream-50);

  --surface-page:var(--cream-100);
  --surface-card:var(--white);
  --surface-raised:var(--sand-100);
  --surface-sand:var(--sand-200);
  --surface-moss:var(--moss-700);
  --surface-dark:var(--brown-800);
  --surface-clay:var(--clay-500);
  --surface-veil:rgba(250,246,239,.72);

  --border-hairline:rgba(66,54,44,.10);
  --border-subtle:var(--sand-300);
  --border-strong:var(--taupe-400);
  --border-accent:var(--clay-400);

  --accent-primary:var(--clay-500);
  --accent-primary-hover:var(--clay-600);
  --accent-secondary:var(--moss-500);
  --accent-highlight:var(--amber-400);

  --focus-ring:var(--clay-500);
  --overlay-scrim:rgba(43,35,28,.45);

  /* Image treatment: a warm wash laid over photography so every photo
     lands in the same beige/brown family. */
  --photo-wash:linear-gradient(180deg,rgba(43,35,28,0) 40%,rgba(43,35,28,.55) 100%); /* @kind color */
  --photo-warm:linear-gradient(0deg,rgba(180,113,79,.10),rgba(180,113,79,.10)); /* @kind color */
}


/* tokens/typography.css */
:root{
  /* Sizes — body sits at 17px for unhurried reading; display is generous. */
  --text-2xs:0.75rem;    /* 12 */
  --text-xs:0.8125rem;   /* 13 */
  --text-sm:0.9375rem;   /* 15 */
  --text-base:1.0625rem; /* 17 */
  --text-md:1.1875rem;   /* 19 */
  --text-lg:1.375rem;    /* 22 */
  --text-xl:1.625rem;    /* 26 */
  --text-2xl:2rem;       /* 32 */
  --text-3xl:2.5rem;     /* 40 */
  --text-4xl:3.25rem;    /* 52 */
  --text-5xl:4.25rem;    /* 68 */

  /* Fluid display steps for hero / section openers */
  --display-hero:clamp(2.75rem,6.2vw,4.5rem); /* @kind font */
  --display-section:clamp(2rem,4vw,3.25rem); /* @kind font */
  --display-sub:clamp(1.5rem,2.6vw,2rem); /* @kind font */

  --leading-tight:1.08; /* @kind font */
  --leading-snug:1.22; /* @kind font */
  --leading-normal:1.45; /* @kind font */
  --leading-body:1.7; /* @kind font */
  --leading-relaxed:1.85; /* @kind font */

  --tracking-display:-0.015em;
  --tracking-tight:-0.005em;
  --tracking-body:0;
  --tracking-wide:0.04em;
  --tracking-eyebrow:0.2em;

  --weight-light:300; /* @kind font */
  --weight-regular:400; /* @kind font */
  --weight-medium:500; /* @kind font */
  --weight-semibold:600; /* @kind font */
  --weight-bold:700; /* @kind font */

  --measure-prose:64ch; /* @kind other */
  --measure-narrow:46ch; /* @kind other */
  --measure-lede:38ch; /* @kind other */
}


/* tokens/spacing.css */
:root{
  --space-3xs:2px;
  --space-2xs:4px;
  --space-xs:8px;
  --space-sm:12px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:32px;
  --space-2xl:48px;
  --space-3xl:64px;
  --space-4xl:96px;
  --space-5xl:128px;
  --space-6xl:160px;

  /* Vertical rhythm between page sections — the brand breathes, so this is large. */
  --section-y:clamp(64px,9vw,128px); /* @kind spacing */
  --section-y-lg:clamp(96px,13vw,180px); /* @kind spacing */
  --stack-tight:var(--space-sm); /* @kind spacing */
  --stack-base:var(--space-lg); /* @kind spacing */
  --stack-loose:var(--space-2xl); /* @kind spacing */
}


/* tokens/shape.css */
:root{
  --radius-xs:4px;
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --radius-xl:32px;
  --radius-2xl:44px;
  --radius-pill:999px;
  --radius-circle:50%;

  /* Component defaults */
  --radius-card:var(--radius-lg);
  --radius-button:var(--radius-pill);
  --radius-input:var(--radius-md);
  --radius-image:var(--radius-xl);

  --border-width-hair:1px; /* @kind other */
  --border-width-thick:2px; /* @kind other */
  --rule:1px solid var(--border-subtle); /* @kind other */
}


/* tokens/elevation.css */
:root{
  /* Shadows are warm-brown, never neutral grey, and always soft-edged. */
  --shadow-xs:0 1px 2px rgba(66,54,44,.05);
  --shadow-sm:0 2px 10px rgba(66,54,44,.06);
  --shadow-md:0 10px 28px rgba(66,54,44,.08);
  --shadow-lg:0 20px 52px rgba(66,54,44,.10);
  --shadow-xl:0 32px 80px rgba(66,54,44,.13);
  --shadow-focus:0 0 0 3px rgba(180,113,79,.28);
  --shadow-inset-hair:inset 0 0 0 1px rgba(66,54,44,.06);
}


/* tokens/motion.css */
:root{
  --duration-instant:100ms; /* @kind other */
  --duration-fast:180ms; /* @kind other */
  --duration-base:300ms; /* @kind other */
  --duration-slow:520ms; /* @kind other */
  --duration-reveal:800ms; /* @kind other */
  --duration-breath:7000ms; /* @kind other */ /* one full inhale–exhale cycle */

  --ease-out-soft:cubic-bezier(.22,.61,.36,1); /* @kind other */
  --ease-in-out-breath:cubic-bezier(.45,0,.25,1); /* @kind other */
  --ease-entrance:cubic-bezier(.16,.84,.44,1); /* @kind other */

  --transition-color:color var(--duration-fast) var(--ease-out-soft),background-color var(--duration-fast) var(--ease-out-soft),border-color var(--duration-fast) var(--ease-out-soft); /* @kind other */
  --transition-lift:transform var(--duration-base) var(--ease-out-soft),box-shadow var(--duration-base) var(--ease-out-soft); /* @kind other */

  --hover-lift:-2px; /* @kind other */
  --press-scale:.985; /* @kind other */
}


/* tokens/layout.css */
:root{
  --container-narrow:720px; /* @kind spacing */
  --container-max:1180px; /* @kind spacing */
  --container-wide:1440px; /* @kind spacing */
  --gutter:clamp(20px,5vw,64px); /* @kind spacing */
  --header-height:84px; /* @kind spacing */
  --grid-columns:12; /* @kind other */
  --grid-gap:clamp(20px,3vw,40px); /* @kind spacing */
  --z-base:0; /* @kind other */
  --z-raised:10; /* @kind other */
  --z-sticky:100; /* @kind other */
  --z-overlay:500; /* @kind other */
  --z-modal:1000; /* @kind other */
}


/* base/base.css */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-body);font-weight:var(--weight-regular);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-heading);font-weight:var(--weight-light);letter-spacing:var(--tracking-display);line-height:var(--leading-snug);margin:0 0 var(--space-md)}
h1{font-size:var(--display-hero);line-height:var(--leading-tight)}
h2{font-size:var(--display-section)}
h3{font-size:var(--display-sub)}
h4{font-size:var(--text-lg);font-family:var(--font-body);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight)}
p{margin:0 0 var(--space-md);max-width:var(--measure-prose);text-wrap:pretty}
a{color:var(--text-accent);text-decoration:none;text-underline-offset:.22em;text-decoration-thickness:1px;transition:var(--transition-color)}
a:hover{color:var(--clay-400);text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-xs)}
strong{font-weight:var(--weight-semibold);color:var(--text-heading)}
img{max-width:100%;display:block}
hr{border:0;border-top:var(--rule);margin:var(--space-2xl) 0}
::selection{background:var(--clay-300);color:var(--brown-900)}
.lf-eyebrow{font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-soft)}
.lf-lede{font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--text-muted);max-width:var(--measure-narrow)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}


/* Deze site heeft één weergave: het lichte, warme palet uit het design system. Dit
   vertelt de browser dat, zodat een eigen donkere modus de kleuren met rust laat. */
:root{color-scheme:light}

/* layout-helpers (stonden inline in de ui-kit van het design system) */
body{margin:0}
.lf-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,32px)}
.lf-wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}
.lf-section{padding:var(--section-y) 0}
@media(max-width:860px){.lf-grid-3{grid-template-columns:1fr}.lf-split{grid-template-columns:1fr!important}}

/* Componenten als PageHero, ServiceCard en de formulierrij zetten hun kolommen
   in het style-attribuut, waar een media-query niet bij kan. Zonder deze regel
   staat op een telefoon alles in twee kolommen van ruim honderd pixels breed. */
@media(max-width:760px){
  [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}
}

/* Een blok komt zachtjes in beeld zodra je erbij scrolt. De klasse lf-reveal zet het
   script hieronder op <html>, dus zonder javascript blijft alles gewoon staan. Wie zijn
   systeem op minder beweging heeft staan krijgt de tekst meteen. */
html.lf-reveal .lf-r{opacity:0;transform:translateY(14px);will-change:opacity,transform}
html.lf-reveal .lf-r.lf-in{opacity:1;transform:none;
  transition:opacity 1.4s var(--ease-out-soft),transform 1.4s var(--ease-out-soft)}
@media(prefers-reduced-motion:reduce){
  html.lf-reveal .lf-r{opacity:1;transform:none;transition:none}
}