/* Bouwman Bouwt — Design System entry point.
   Consumers link THIS file. It only @imports token/font layers. */
/* Bouwman Bouwt — Webfonts
   NOTE: The real logo wordmark font was not supplied. These are the closest
   Google Fonts matches (flagged in readme.md). Replace with licensed brand
   fonts when available.
   - Archivo  : sturdy industrial grotesque — headings / display / the wordmark feel
   - Mulish   : friendly humanist sans — body copy & UI
*/
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-01.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-02.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;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-03.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;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-01.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-02.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;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-03.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;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-01.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-02.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;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-03.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;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-01.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-02.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;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-03.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;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-01.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-02.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;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/font-03.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/font-04.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/font-05.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/font-06.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/font-07.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;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/font-08.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/font-09.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/font-10.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/font-11.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/font-12.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;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/font-13.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/font-09.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/font-10.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/font-11.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/font-12.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;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/font-13.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/font-09.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/font-10.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/font-11.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/font-12.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;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/font-13.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/font-09.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/font-10.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/font-11.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/font-12.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;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/font-13.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/font-09.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/font-10.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/font-11.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/font-12.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;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/font-13.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;
}


/* Bouwman Bouwt — Color tokens
   Brand colors extracted directly from the supplied logo PDFs:
   orange #ec6400 · brick/dark-orange #c85100 · ink #060004 · white #ffffff
   Palette is warm: an orange core, warm-grey neutrals, earthy brick support. */
:root {
  /* ---- Brand core ---- */
  --brand-orange: #ec6400;      /* primary — from logo wordmark "BOUWT" & B curve */
  --brand-brick:  #c85100;      /* darker orange — the masonry bricks in the mark */
  --brand-ink:    #060004;      /* near-black — logo "BOUWMAN" */
  --brand-white:  #ffffff;

  /* ---- Orange scale (primary) ---- */
  --orange-50:  #fff4ec;
  --orange-100: #ffe3ce;
  --orange-200: #ffc79d;
  --orange-300: #ffa462;
  --orange-400: #fa8127;
  --orange-500: #ec6400;        /* = brand-orange */
  --orange-600: #c85100;        /* = brand-brick */
  --orange-700: #a03f00;
  --orange-800: #7c3204;
  --orange-900: #662b09;

  /* ---- Warm neutral scale (built toward the ink) ---- */
  --neutral-0:   #ffffff;
  --neutral-50:  #faf8f6;
  --neutral-100: #f2efeb;
  --neutral-200: #e5e0d9;
  --neutral-300: #d0c8be;
  --neutral-400: #a89e91;
  --neutral-500: #7d7468;
  --neutral-600: #59524a;
  --neutral-700: #3d3833;
  --neutral-800: #241f1c;
  --neutral-900: #140f0d;
  --neutral-950: #060004;       /* = brand-ink */

  /* ---- Semantic hues (kept warm & muted to sit beside orange) ---- */
  --green-500:  #3f8f4f;
  --green-600:  #2f7440;
  --green-50:   #eef7ef;
  --amber-500:  #e0a316;
  --amber-50:   #fdf6e3;
  --red-500:    #cf3b2e;
  --red-600:    #ac2c22;
  --red-50:     #fdeeec;
  --blue-500:   #2f6d92;        /* "trades" blue — invoices/info, rarely used */
  --blue-50:    #eaf2f7;

  /* ================= Semantic aliases ================= */
  /* text */
  --text-strong:   var(--neutral-950);
  --text-body:     var(--neutral-800);
  --text-muted:    var(--neutral-600);
  --text-subtle:   var(--neutral-500);
  --text-inverse:  var(--neutral-0);
  --text-brand:    var(--orange-600);
  --text-on-brand: var(--neutral-0);

  /* surfaces */
  --surface-page:   var(--neutral-50);
  --surface-card:   var(--neutral-0);
  --surface-sunken: var(--neutral-100);
  --surface-cream:  #f7f2ea;                /* warm off-white — the van/collateral base */
  --surface-ink:    var(--neutral-950);   /* dark sections / footer */
  --surface-brand:  var(--orange-500);
  --surface-brand-soft: var(--orange-50);

  /* borders */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-brand:   var(--orange-500);

  /* interactive */
  --action:          var(--orange-500);
  --action-hover:    var(--orange-600);
  --action-active:   var(--orange-700);
  --focus-ring:      var(--orange-500);

  /* status */
  --success: var(--green-600);
  --success-surface: var(--green-50);
  --warning: var(--amber-500);
  --warning-surface: var(--amber-50);
  --danger:  var(--red-600);
  --danger-surface:  var(--red-50);
  --info:    var(--blue-500);
  --info-surface:    var(--blue-50);
}

/* Bouwman Bouwt — Typography tokens
   Display/headings: Archivo (heavy grotesque, echoes the all-caps wordmark).
   Body/UI: Mulish (humanist, friendly, highly legible).
   Headings lean UPPERCASE + tight tracking for the sturdy builder feel;
   body stays sentence case and comfortable. */
:root {
  --font-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --font-body:    'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  /* weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:    700; /* @kind font */
  --fw-extrabold:800; /* @kind font */
  --fw-black:   900; /* @kind font */

  /* type scale (1.250 major-third-ish, tuned) */
  --text-2xs: 0.6875rem; /* 11px */
  --text-xs:  0.75rem;   /* 12 */
  --text-sm:  0.875rem;  /* 14 */
  --text-base:1rem;      /* 16 */
  --text-md:  1.125rem;  /* 18 */
  --text-lg:  1.375rem;  /* 22 */
  --text-xl:  1.75rem;   /* 28 */
  --text-2xl: 2.25rem;   /* 36 */
  --text-3xl: 3rem;      /* 48 */
  --text-4xl: 3.75rem;   /* 60 */
  --text-5xl: 4.75rem;   /* 76 */

  /* line-heights */
  --leading-tight:  1.05;
  --leading-snug:   1.2;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  /* tracking */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.06em;  /* uppercase labels / eyebrows */

  /* semantic roles */
  --heading-font: var(--font-display);
  --heading-weight: var(--fw-extrabold);
  --heading-tracking: var(--tracking-tight);
  --eyebrow-tracking: var(--tracking-caps);
  --body-font: var(--font-body);
  --body-leading: var(--leading-relaxed);
}

/* Bouwman Bouwt — Spacing & layout tokens (8px base, with 4px halfsteps) */
:root {
  --space-0: 0;
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 2.5rem;   /* 40 */
  --space-8: 3rem;     /* 48 */
  --space-9: 4rem;     /* 64 */
  --space-10: 5rem;    /* 80 */
  --space-12: 6rem;    /* 96 */
  --space-16: 8rem;    /* 128 */

  /* layout */
  --container-max: 1200px;
  --container-narrow: 760px;
  --gutter: var(--space-5);
  --section-y: var(--space-12);   /* vertical rhythm between page sections */
}

/* Bouwman Bouwt — Effects: radius, borders, shadows, motion
   Vibe: solid & grounded. Modest radii (nothing pill-soft on structural cards),
   layered warm shadows (tinted toward brand-ink, never pure black),
   quick confident transitions. */
:root {
  /* radius */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* border widths */
  --border-hair: 1px;
  --border-thick: 2px;
  --border-accent: 4px;   /* left/top brand accents on headers, not on cards */

  /* shadows — warm-tinted (based on 20 15 12 = brick-ink) */
  --shadow-xs: 0 1px 2px rgba(20,15,12,0.06);
  --shadow-sm: 0 1px 3px rgba(20,15,12,0.08), 0 1px 2px rgba(20,15,12,0.06);
  --shadow-md: 0 4px 12px rgba(20,15,12,0.10), 0 2px 4px rgba(20,15,12,0.06);
  --shadow-lg: 0 12px 28px rgba(20,15,12,0.14), 0 4px 8px rgba(20,15,12,0.07);
  --shadow-brand: 0 8px 20px rgba(236,100,0,0.28);   /* glow under primary CTA */

  /* focus */
  --focus-width: 3px;
  --focus-ring-color: rgba(236,100,0,0.45);

  /* motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur: 180ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
}

/* Bouwman Bouwt — website shared styles (huisstijl: brick-B logo, oranje/charcoal/crème) */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--text-body);background:var(--surface-cream);line-height:var(--body-leading);-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}
h1,h2,h3,h4,.disp{font-family:var(--font-display);color:var(--text-strong);text-transform:uppercase;letter-spacing:var(--tracking-tight);line-height:1.02}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.ico{width:1em;height:1em;display:inline-block;vertical-align:-.125em}
section{scroll-margin-top:90px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:var(--tracking-caps);padding:13px 22px;border-radius:var(--radius-md);border:2px solid transparent;cursor:pointer;transition:transform var(--dur) var(--ease-out),background var(--dur),box-shadow var(--dur),border-color var(--dur)}
.btn .ico{width:16px;height:16px}
.btn-primary{background:var(--action);color:#fff;box-shadow:var(--shadow-brand)}
.btn-primary:hover{background:var(--action-hover);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-dark{background:var(--surface-ink);color:#fff}
.btn-dark:hover{background:var(--neutral-800);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--text-strong);border-color:var(--border-default)}
.btn-ghost:hover{border-color:var(--text-strong)}
.btn-white{background:#fff;color:var(--action)}
.btn-white:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-lg{padding:16px 28px;font-size:var(--text-base)}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(247,242,234,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-subtle)}
header .bar{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px}
header .logo img{height:40px}
nav.main{display:flex;gap:28px}
nav.main a{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:13.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-body);transition:color var(--dur)}
nav.main a:hover,nav.main a.active{color:var(--action)}
header .right{display:flex;align-items:center;gap:18px}
header .tel{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-family:var(--font-display);font-weight:800;font-size:14px;color:var(--text-strong)}
header .tel .ico{width:16px;height:16px;color:var(--action)}
@media(max-width:920px){nav.main,header .tel{display:none}}

/* eyebrow */
.eyebrow{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:12.5px;color:var(--action);background:var(--surface-brand-soft);padding:7px 13px;border-radius:99px}

/* section head */
.sec{padding:var(--section-y) 0}
.sec-head{max-width:640px;margin-bottom:42px}
.sec-head .eyebrow{margin-bottom:14px}
.sec-head h2{font-size:clamp(28px,4vw,44px);font-weight:900}
.sec-head p{color:var(--text-muted);font-size:17px;margin-top:12px}
.alt{background:var(--surface-card);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}

/* image placeholder */
.ph{background:repeating-linear-gradient(45deg,#d8d0c6,#d8d0c6 18px,#d0c8bd 18px,#d0c8bd 36px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--neutral-600)}
.ph .ico{width:32px;height:32px}
.ph span{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:12px}

/* hero */
.hero{position:relative;overflow:hidden;background:var(--surface-cream)}
.hero .inner{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:64px 0 72px}
@media(max-width:900px){.hero .inner{grid-template-columns:1fr;gap:28px}}
.hero h1{font-size:clamp(38px,5.6vw,72px);font-weight:900;margin:18px 0 18px}
.hero h1 em{font-style:normal;color:var(--action)}
.hero p.lead{font-size:19px;color:var(--text-muted);max-width:520px;margin-bottom:28px}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.stats{display:flex;gap:30px;flex-wrap:wrap}
.stats .s .v{font-family:var(--font-display);font-weight:900;font-size:32px;color:var(--text-strong)}
.stats .s .l{font-size:13px;color:var(--text-muted);font-weight:600}
.hero-visual{position:relative;height:430px;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg)}
.hero-visual .ph{position:absolute;inset:0}
.hero-visual .badge{position:absolute;left:18px;bottom:18px;background:#fff;border-radius:var(--radius-md);padding:12px 16px;box-shadow:var(--shadow-md);display:flex;align-items:center;gap:10px}
.hero-visual .badge .ico{width:22px;height:22px;color:var(--action)}
.hero-visual .badge b{font-family:var(--font-display);font-size:15px;color:var(--text-strong)}
.hero-visual .badge small{display:block;font-size:11px;color:var(--text-muted);font-weight:600}

/* page hero (inner pages) */
.phead{background:var(--surface-ink);color:#fff;padding:56px 0}
.phead .eyebrow{background:rgba(236,100,0,.16)}
.phead h1{color:#fff;font-size:clamp(34px,5vw,60px);font-weight:900;margin-top:14px}
.phead p{color:rgba(255,255,255,.6);font-size:18px;max-width:560px;margin-top:12px}
.crumb{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:12px;color:rgba(255,255,255,.45)}
.crumb a:hover{color:var(--action)}

/* tagline strip */
.strip{background:var(--surface-ink);color:#fff}
.strip .row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;flex-wrap:wrap}
.strip .item{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:14px}
.strip .item .ico{width:20px;height:20px;color:var(--action)}
.strip .sep{width:6px;height:6px;border-radius:50%;background:var(--action);opacity:.6}
@media(max-width:760px){.strip .sep{display:none}.strip .row{gap:14px}}

/* services */
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:860px){.svcs{grid-template-columns:1fr}}
.svc{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:30px 28px;display:flex;flex-direction:column;transition:transform var(--dur) var(--ease-out),box-shadow var(--dur),border-color var(--dur)}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--border-default)}
.svc .ic{width:58px;height:58px;border-radius:var(--radius-md);background:var(--surface-brand-soft);display:flex;align-items:center;justify-content:center;color:var(--action);margin-bottom:20px}
.svc .ic .ico{width:28px;height:28px}
.svc h3{font-size:22px;font-weight:800;margin-bottom:10px}
.svc p{color:var(--text-muted);font-size:15px;flex:1;margin-bottom:18px}
.svc .more{font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:13px;color:var(--action);display:inline-flex;align-items:center;gap:7px}
.svc .more .ico{width:15px;height:15px;transition:transform var(--dur)}
.svc:hover .more .ico{transform:translateX(4px)}

/* why */
.why{background:var(--surface-ink);color:#fff;padding:var(--section-y) 0}
.why h2{color:#fff}
.why .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
@media(max-width:860px){.why .grid{grid-template-columns:repeat(2,1fr)}}
.why .u .ic{width:50px;height:50px;border-radius:var(--radius-md);background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:var(--action);margin-bottom:16px}
.why .u .ic .ico{width:24px;height:24px}
.why .u h4{color:#fff;font-size:17px;font-weight:800;margin-bottom:8px}
.why .u p{color:rgba(255,255,255,.6);font-size:14px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:860px){.steps{grid-template-columns:repeat(2,1fr)}}
.step .n{font-family:var(--font-display);font-weight:900;font-size:44px;color:var(--action);opacity:.25;line-height:1}
.step h4{font-size:18px;font-weight:800;margin:6px 0 8px}
.step p{color:var(--text-muted);font-size:14px}

/* projects grid */
.proj{display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:200px;gap:16px}
@media(max-width:860px){.proj{grid-template-columns:1fr 1fr}}
.pc{border-radius:var(--radius-lg);overflow:hidden;position:relative;display:flex;align-items:flex-end;padding:16px}
.pc .ph{position:absolute;inset:0}
.pc .tag{position:relative;background:rgba(6,0,4,.72);color:#fff;white-space:nowrap;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:11px;padding:6px 11px;border-radius:99px}
.pc.big{grid-row:span 2}

/* project cards (projecten page) */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:860px){.pgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pgrid{grid-template-columns:1fr}}
.pcard{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;transition:transform var(--dur) var(--ease-out),box-shadow var(--dur)}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.pcard .img{height:200px}
.pcard .b{padding:20px 22px}
.pcard .b .k{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:11px;color:var(--action)}
.pcard .b h3{font-size:18px;font-weight:800;margin:6px 0 6px}
.pcard .b p{color:var(--text-muted);font-size:14px}

/* CTA band */
.cta-band{background:var(--action);color:#fff;border-radius:var(--radius-xl);padding:52px 48px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;box-shadow:var(--shadow-lg)}
.cta-band h2{color:#fff;font-size:clamp(26px,3.4vw,40px);font-weight:900}
.cta-band p{color:rgba(255,255,255,.85);font-size:16px;margin-top:8px}
.cta-band .acts{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.cta-band .tel-lg{font-family:var(--font-display);font-weight:900;font-size:22px;color:#fff;white-space:nowrap}

/* footer */
footer{background:var(--surface-ink);color:#fff;padding:56px 0 30px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.1)}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
footer .logo img{height:38px}
footer p.ab{color:rgba(255,255,255,.55);font-size:14px;margin-top:16px;max-width:280px}
footer h5{font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:13px;color:#fff;margin-bottom:14px}
footer ul{list-style:none}
footer ul li{margin-bottom:9px}
footer ul a{color:rgba(255,255,255,.6);font-size:14px}
footer ul a:hover{color:var(--action)}
footer .con{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.6);font-size:14px;margin-bottom:10px}
footer .con .ico{width:16px;height:16px;color:var(--action)}
.fbot{display:flex;justify-content:space-between;padding-top:22px;color:rgba(255,255,255,.4);font-size:12.5px;flex-wrap:wrap;gap:10px}

/* contact form */
.cform{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}
@media(max-width:820px){.cform{grid-template-columns:1fr}}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:12px;color:var(--text-strong);margin-bottom:7px}
.field input,.field textarea,.field select{width:100%;font-family:var(--font-body);font-size:15px;color:var(--text-strong);background:var(--surface-card);border:2px solid var(--border-default);border-radius:var(--radius-md);padding:12px 14px;transition:border-color var(--dur)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--action)}
.field textarea{min-height:130px;resize:vertical}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.frow{grid-template-columns:1fr}}
.cinfo{background:var(--surface-ink);color:#fff;border-radius:var(--radius-lg);padding:32px}
.cinfo h3{color:#fff;font-size:20px;font-weight:800;margin-bottom:20px}
.cinfo .ci{display:flex;gap:13px;align-items:flex-start;margin-bottom:18px}
.cinfo .ci .ic{width:42px;height:42px;border-radius:var(--radius-md);background:rgba(236,100,0,.18);color:var(--action);display:flex;align-items:center;justify-content:center;flex:none}
.cinfo .ci .ic .ico{width:20px;height:20px}
.cinfo .ci .lb{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.5)}
.cinfo .ci .vl{font-size:15px;color:#fff;font-weight:600}

/* slider */
.slider{position:relative;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg)}
.slides{display:flex;transition:transform var(--dur-slow) var(--ease-out)}
.slide{min-width:100%;position:relative;height:460px}
.slide .ph{position:absolute;inset:0}
.slide .cap{position:absolute;left:0;right:0;bottom:0;padding:28px 30px;background:linear-gradient(to top,rgba(6,0,4,.82),transparent);color:#fff}
.slide .cap .k{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:12px;color:var(--orange-300)}
.slide .cap h3{color:#fff;font-size:26px;font-weight:900;margin:6px 0 4px}
.slide .cap p{color:rgba(255,255,255,.8);font-size:14px;max-width:520px}
.snav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.92);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink,#211d1a);box-shadow:var(--shadow-md);transition:background var(--dur)}
.snav:hover{background:#fff}
.snav .ico{width:22px;height:22px}
.snav.prev{left:18px}.snav.next{right:18px}
.dots{display:flex;gap:9px;justify-content:center;margin-top:20px}
.dots button{width:10px;height:10px;border-radius:50%;border:none;background:var(--border-strong);cursor:pointer;transition:background var(--dur),width var(--dur)}
.dots button.on{background:var(--action);width:26px;border-radius:99px}

/* --- Contact Form 7 in de huisstijl --- */
.wpcf7-form-control-wrap { display: block; }
.wpcf7 form .wpcf7-response-output {
  margin: 16px 0 0; padding: 12px 16px; border-radius: var(--radius-md, 8px);
  border-width: 2px; font-size: 14px;
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--success); background: var(--success-surface); color: var(--text);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: #b3261e; color: #b3261e; }
.wpcf7-not-valid-tip { color: #b3261e; font-size: 13px; margin-top: 4px; }
.wpcf7-spinner { margin: 0 0 0 10px; }
/* --- Contact Form 7: uitvoer gelijkhouden aan het oorspronkelijke ontwerp --- */
.wpcf7 form { margin: 0; }
.wpcf7-form-control-wrap { display: block; }

/* CF7 maakt van de verzendknop een <input>, daar past geen <i> icoon in.
   Het pijltje komt daarom als achtergrondafbeelding terug. */
.wpcf7 input[type="submit"].btn,
.wpcf7 input[type="submit"].btn:hover {
  width: auto;
  padding-right: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z'/%3E%3Cpath d='m21.854 2.147-10.94 10.939'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 22px center;
  background-size: 16px 16px;
}

.wpcf7-spinner { margin: 0 0 0 10px; vertical-align: middle; }

/* --- Menu en pagina-inhoud voor de overige sjablonen --- */
.hoofdmenu { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.hoofdmenu a {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-strong);
  text-decoration: none;
}
.hoofdmenu a:hover, .hoofdmenu .current-menu-item > a { color: var(--action); }

.paginainhoud { color: var(--text); line-height: 1.7; }
.paginainhoud h2, .paginainhoud h3 { margin: 28px 0 12px; }
.paginainhoud p, .paginainhoud ul, .paginainhoud ol { margin-bottom: 16px; }
.paginainhoud ul, .paginainhoud ol { padding-left: 22px; }
.paginainhoud a { color: var(--action); }
.paginainhoud img { max-width: 100%; height: auto; border-radius: var(--radius-md); }

/* --- Echte foto's op de plek van de grijze blokken --- */
.hero-visual img.foto, .pc img.foto, .slide img.foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;   /* vult het vlak zonder de foto uit te rekken */
  display: block;
}

/* --- Slider op mobiel: foto heel laten, tekst eronder --- */
@media (max-width: 700px) {
  /* Hoog beeld op mobiel, liggend op desktop. Welk deel in beeld blijft
     bepaal je per foto met de instelling 'uitsnede'. */
  .slide { height: auto; }
  .slide img.foto, .slide .ph {
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
  }
  .slide .ph { display: flex; align-items: center; justify-content: center; }
  .slide .cap { padding: 24px 20px 26px; }
  .slide .cap h3 { font-size: 21px; }
  /* pijltjes naast de bolletjes, zodat ze niets meer bedekken */
  .snav {
    position: static;
    transform: none;
    width: 40px; height: 40px;
    box-shadow: none;
    background: var(--surface-2, #f2ede7);
  }
  .sliderbalk {
    display: flex; align-items: center; justify-content: center;
    gap: 14px; margin-top: 18px;
  }
  .sliderbalk .dots { margin-top: 0; }
}

/* Op desktop zweven de pijlen weer boven de foto, zoals eerst.
   De dia is daar 460px hoog, dus 230px is precies het midden. */
.sliderblok { position: relative; }
@media (min-width: 701px) {
  .sliderbalk .snav { position: absolute; top: 230px; transform: translateY(-50%); }
  .sliderbalk .snav.prev { left: 18px; }
  .sliderbalk .snav.next { right: 18px; }
  .sliderbalk .dots { margin-top: 20px; }
}

/* --- Dienstenkaarten: niet meer oplichten, ze zijn geen link --- */
.svc:hover { transform: none; box-shadow: none; border-color: var(--border-subtle); }
.svc:hover .more .ico { transform: none; }
.svc .more { cursor: default; }

/* --- Beoordeling als knop naar Google --- */
.stats .s a.beoordeling {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; color: inherit;
  border: 1px solid var(--border-default);
  border-radius: 99px; padding: 6px 14px 6px 12px;
  background: var(--surface-card);
  transition: border-color var(--dur), background var(--dur);
}
.stats .s a.beoordeling:hover { border-color: var(--action); background: var(--surface-brand-soft); }
.stats .s a.beoordeling span {
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; font-size: 13px;
  color: var(--text-strong);
}
.stats .s a.beoordeling .ico { width: 16px; height: 16px; color: var(--action); }
.stats .s a.beoordeling:hover span { color: var(--action); }
/* de knop staat naast twee cijferblokken; even laten meelijnen */
.stats .s:has(a.beoordeling) { display: flex; align-items: center; }

/* --- Slider: dia's strak binnen de lijst houden --- */
.slider { overflow: hidden; }
.slides { width: 100%; }
.slide { min-width: 100%; max-width: 100%; flex: 0 0 100%; }
.slide .foto, .slide .ph { width: 100%; }