/* nunito-cyrillic-ext-400-normal */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/build/fonts/nunito-cyrillic-ext-400-normal.c1251660.woff2) format('woff2'), url(/build/fonts/nunito-cyrillic-ext-400-normal.04d527e6.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* nunito-cyrillic-400-normal */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/build/fonts/nunito-cyrillic-400-normal.e409d1f9.woff2) format('woff2'), url(/build/fonts/nunito-cyrillic-400-normal.9b2417f2.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* nunito-vietnamese-400-normal */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/build/fonts/nunito-vietnamese-400-normal.213c0aec.woff2) format('woff2'), url(/build/fonts/nunito-vietnamese-400-normal.405d9085.woff) format('woff');
  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;
}

/* nunito-latin-ext-400-normal */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/build/fonts/nunito-latin-ext-400-normal.a8317bb9.woff2) format('woff2'), url(/build/fonts/nunito-latin-ext-400-normal.9e3f8b3c.woff) format('woff');
  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;
}

/* nunito-latin-400-normal */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/build/fonts/nunito-latin-400-normal.1426bd42.woff2) format('woff2'), url(/build/fonts/nunito-latin-400-normal.b342b7ee.woff) format('woff');
  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;
}
/* raleway-cyrillic-ext-300-normal */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(/build/fonts/raleway-cyrillic-ext-300-normal.8488d27c.woff2) format('woff2'), url(/build/fonts/raleway-cyrillic-ext-300-normal.971b8716.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* raleway-cyrillic-300-normal */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(/build/fonts/raleway-cyrillic-300-normal.6c8fb564.woff2) format('woff2'), url(/build/fonts/raleway-cyrillic-300-normal.9c21a63d.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* raleway-vietnamese-300-normal */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(/build/fonts/raleway-vietnamese-300-normal.1e4c1dfb.woff2) format('woff2'), url(/build/fonts/raleway-vietnamese-300-normal.ecee2db9.woff) format('woff');
  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;
}

/* raleway-latin-ext-300-normal */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(/build/fonts/raleway-latin-ext-300-normal.18955f02.woff2) format('woff2'), url(/build/fonts/raleway-latin-ext-300-normal.2ef81922.woff) format('woff');
  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;
}

/* raleway-latin-300-normal */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(/build/fonts/raleway-latin-300-normal.424661eb.woff2) format('woff2'), url(/build/fonts/raleway-latin-300-normal.c8894c10.woff) format('woff');
  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;
}
/* raleway-cyrillic-ext-400-normal */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/build/fonts/raleway-cyrillic-ext-400-normal.4482e085.woff2) format('woff2'), url(/build/fonts/raleway-cyrillic-ext-400-normal.a3e6d4eb.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* raleway-cyrillic-400-normal */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/build/fonts/raleway-cyrillic-400-normal.f9ba5539.woff2) format('woff2'), url(/build/fonts/raleway-cyrillic-400-normal.c1f7d01d.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* raleway-vietnamese-400-normal */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/build/fonts/raleway-vietnamese-400-normal.5212361b.woff2) format('woff2'), url(/build/fonts/raleway-vietnamese-400-normal.1e28c9f1.woff) format('woff');
  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;
}

/* raleway-latin-ext-400-normal */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/build/fonts/raleway-latin-ext-400-normal.b8b0d3bc.woff2) format('woff2'), url(/build/fonts/raleway-latin-ext-400-normal.e085acb5.woff) format('woff');
  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;
}

/* raleway-latin-400-normal */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/build/fonts/raleway-latin-400-normal.0e0a9642.woff2) format('woff2'), url(/build/fonts/raleway-latin-400-normal.bce9a6fc.woff) format('woff');
  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;
}
/* raleway-cyrillic-ext-600-normal */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/build/fonts/raleway-cyrillic-ext-600-normal.469fbc66.woff2) format('woff2'), url(/build/fonts/raleway-cyrillic-ext-600-normal.c22f203f.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* raleway-cyrillic-600-normal */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/build/fonts/raleway-cyrillic-600-normal.c5cf050c.woff2) format('woff2'), url(/build/fonts/raleway-cyrillic-600-normal.2141d815.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* raleway-vietnamese-600-normal */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/build/fonts/raleway-vietnamese-600-normal.f571fb49.woff2) format('woff2'), url(/build/fonts/raleway-vietnamese-600-normal.623455cc.woff) format('woff');
  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;
}

/* raleway-latin-ext-600-normal */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/build/fonts/raleway-latin-ext-600-normal.c6d1c1b0.woff2) format('woff2'), url(/build/fonts/raleway-latin-ext-600-normal.5573abe9.woff) format('woff');
  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;
}

/* raleway-latin-600-normal */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/build/fonts/raleway-latin-600-normal.33fad226.woff2) format('woff2'), url(/build/fonts/raleway-latin-600-normal.bb26fbb9.woff) format('woff');
  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;
}
/* raleway-cyrillic-ext-700-normal */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/build/fonts/raleway-cyrillic-ext-700-normal.f8f5893c.woff2) format('woff2'), url(/build/fonts/raleway-cyrillic-ext-700-normal.dc5f62fa.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* raleway-cyrillic-700-normal */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/build/fonts/raleway-cyrillic-700-normal.3469b173.woff2) format('woff2'), url(/build/fonts/raleway-cyrillic-700-normal.ace5ad4d.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* raleway-vietnamese-700-normal */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/build/fonts/raleway-vietnamese-700-normal.6dcac0ad.woff2) format('woff2'), url(/build/fonts/raleway-vietnamese-700-normal.7cc05c90.woff) format('woff');
  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;
}

/* raleway-latin-ext-700-normal */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/build/fonts/raleway-latin-ext-700-normal.b9f994b0.woff2) format('woff2'), url(/build/fonts/raleway-latin-ext-700-normal.8b44ad9c.woff) format('woff');
  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;
}

/* raleway-latin-700-normal */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/build/fonts/raleway-latin-700-normal.0dc1cdda.woff2) format('woff2'), url(/build/fonts/raleway-latin-700-normal.3e2e0430.woff) format('woff');
  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;
}
/* raleway-cyrillic-ext-800-normal */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/build/fonts/raleway-cyrillic-ext-800-normal.e9c72e4e.woff2) format('woff2'), url(/build/fonts/raleway-cyrillic-ext-800-normal.f3ad0380.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* raleway-cyrillic-800-normal */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/build/fonts/raleway-cyrillic-800-normal.cead8dec.woff2) format('woff2'), url(/build/fonts/raleway-cyrillic-800-normal.0e88b21c.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* raleway-vietnamese-800-normal */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/build/fonts/raleway-vietnamese-800-normal.424ae738.woff2) format('woff2'), url(/build/fonts/raleway-vietnamese-800-normal.b68a5631.woff) format('woff');
  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;
}

/* raleway-latin-ext-800-normal */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/build/fonts/raleway-latin-ext-800-normal.aa10eb6d.woff2) format('woff2'), url(/build/fonts/raleway-latin-ext-800-normal.8a708a31.woff) format('woff');
  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;
}

/* raleway-latin-800-normal */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/build/fonts/raleway-latin-800-normal.3dc4eaa6.woff2) format('woff2'), url(/build/fonts/raleway-latin-800-normal.81d22215.woff) format('woff');
  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;
}
/* oswald-cyrillic-ext-400-normal */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/build/fonts/oswald-cyrillic-ext-400-normal.5f185546.woff2) format('woff2'), url(/build/fonts/oswald-cyrillic-ext-400-normal.1395415f.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* oswald-cyrillic-400-normal */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/build/fonts/oswald-cyrillic-400-normal.25364a82.woff2) format('woff2'), url(/build/fonts/oswald-cyrillic-400-normal.f935c063.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* oswald-vietnamese-400-normal */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/build/fonts/oswald-vietnamese-400-normal.c8282b4a.woff2) format('woff2'), url(/build/fonts/oswald-vietnamese-400-normal.e043fa93.woff) format('woff');
  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;
}

/* oswald-latin-ext-400-normal */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/build/fonts/oswald-latin-ext-400-normal.7b663c6c.woff2) format('woff2'), url(/build/fonts/oswald-latin-ext-400-normal.8e67b4e9.woff) format('woff');
  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;
}

/* oswald-latin-400-normal */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/build/fonts/oswald-latin-400-normal.af72b2bf.woff2) format('woff2'), url(/build/fonts/oswald-latin-400-normal.dcf09b81.woff) format('woff');
  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;
}
/*
 * Design tokens. Naming follows the BjoWorld frontend (base/variables.css).
 * Breakpoints cannot be custom properties in media queries; the ones in use
 * are 36rem (576px), 48rem (768px) and 62rem (992px).
 */
:root {
    /* Brand */
    --color-brand-green: #1a5100;
    --color-brand-green-dark: #0e2b00;
    --color-brand-green-light: #d8e4d1;
    --color-brand-sand: #c7a674;

    /* Neutral scale */
    --color-white: #fff;
    --color-black: #000;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #e8e8e8;
    --color-gray-600: #5c5c5c;
    --color-gray-700: #444;
    --color-gray-800: #333;
    --color-gray-900: #1f2329;

    /* Functional aliases */
    --color-primary: var(--color-brand-green);
    --color-primary-hover: var(--color-brand-green-dark);
    --color-accent: var(--color-brand-sand);
    --color-text: var(--color-gray-800);
    --color-text-muted: var(--color-gray-600);
    --color-text-inverse: var(--color-white);
    --color-bg: var(--color-white);
    --color-bg-subtle: var(--color-gray-100);
    --color-bg-dark: var(--color-gray-800);
    --color-border: var(--color-gray-200);
    --color-overlay: rgb(31 35 41 / 0.82);
    --color-focus: var(--color-brand-green);

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    --spacing-section: clamp(3.75rem, 8vw, 6.25rem);
    --spacing-gutter: clamp(1rem, 4vw, 2rem);

    /* Typography */
    --font-family-body: 'Raleway', system-ui, sans-serif;
    --font-family-heading: 'Raleway', system-ui, sans-serif;
    --font-family-display: 'Nunito', system-ui, sans-serif;
    --font-family-logo: 'Oswald', 'Arial Narrow', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.375rem;
    --font-size-2xl: clamp(1.75rem, 1.2rem + 2.2vw, 2.25rem);
    --font-size-hero: clamp(1.75rem, 1rem + 3.5vw, 3.125rem);
    --line-height-tight: 1.3;
    --line-height-base: 1.6;
    --letter-spacing-caps: 0.09em;

    /* Dimensions */
    --container-width: 72rem;
    --header-height: 3.75rem;
    --header-height-large: 5rem;
    --hero-height: clamp(25rem, 55vw, 30rem);
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-round: 50%;

    /* Motion */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;

    /* Elevation */
    --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.08);
    --shadow-md: 0 4px 16px rgb(0 0 0 / 0.12);

    /* Stacking */
    --z-header: 100;
}

@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html {
        -webkit-text-size-adjust: none;
        -moz-text-size-adjust: none;
             text-size-adjust: none;
        /* Anchor targets land below the fixed header */
        scroll-padding-top: calc(var(--header-height) + var(--spacing-md));
    }

    @media (prefers-reduced-motion: no-preference) {
        html {
            scroll-behavior: smooth;
        }
    }

    body {
        margin: 0;
        min-height: 100dvh;
    }

    img,
    svg {
        display: block;
        max-width: 100%;
        height: auto;
    }

    svg {
        flex-shrink: 0;
    }

    button {
        font: inherit;
        color: inherit;
    }

    address {
        font-style: normal;
    }

    h1,
    h2,
    h3,
    p,
    figure,
    blockquote {
        margin: 0;
    }
}

@layer base {
    body {
        font-family: var(--font-family-body);
        font-size: var(--font-size-base);
        line-height: var(--line-height-base);
        color: var(--color-text);
        background-color: var(--color-bg);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    h1,
    h2,
    h3 {
        font-family: var(--font-family-heading);
        font-weight: 700;
        line-height: var(--line-height-tight);
        letter-spacing: var(--letter-spacing-caps);
        text-transform: uppercase;
        text-wrap: balance;
    }

    h2 {
        font-size: var(--font-size-2xl);
        font-weight: 800;
    }

    h3 {
        font-size: var(--font-size-sm);
        margin-block-end: var(--spacing-sm);
    }

    p {
        text-wrap: pretty;
    }

    p + p {
        margin-block-start: var(--spacing-md);
    }

    a {
        color: inherit;
        font-weight: 600;
        text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
        text-underline-offset: 0.2em;
        transition: color var(--transition-base), text-decoration-color var(--transition-base);

        &:hover {
            color: var(--color-primary);
            text-decoration-color: currentColor;
        }
    }

    strong {
        font-weight: 700;
    }
}

@layer base {
    :focus-visible {
        outline: 3px solid var(--color-focus);
        outline-offset: 3px;
        border-radius: var(--radius-sm);
    }

    .skip-link {
        position: fixed;
        top: var(--spacing-sm);
        left: var(--spacing-sm);
        z-index: calc(var(--z-header) + 1);
        padding: var(--spacing-sm) var(--spacing-md);
        background: var(--color-primary);
        color: var(--color-text-inverse);
        border-radius: var(--radius-sm);
        translate: 0 -200%;
        transition: translate var(--transition-fast);

        &:focus-visible {
            translate: 0;
            outline-color: var(--color-text-inverse);
            outline-offset: -5px;
        }

        &:hover {
            color: var(--color-text-inverse);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

@layer utilities {
    .visually-hidden:not(:focus-within, :active) {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@layer layout {
    body {
        display: flex;
        flex-direction: column;
    }

    /* Covers the fixed hero image while scrolling */
    .main {
        position: relative;
        flex: 1 0 auto;
        background-color: var(--color-bg);
    }

    .container {
        width: min(100% - 2 * var(--spacing-gutter), var(--container-width));
        margin-inline: auto;
    }

    .container--narrow {
        --container-width: 46rem;
    }
}

@layer layout {
    .section {
        padding-block: var(--spacing-section);
    }

    .section + .section {
        border-block-start: 1px solid var(--color-border);
    }

    .section__header {
        margin-block-end: clamp(var(--spacing-xl), 5vw, 3.75rem);
        text-align: center;
    }

    /* The second word of a section title is set in a light weight */
    .section__title-light {
        font-weight: 300;
    }

    .section__lead {
        max-width: 44rem;
        margin: var(--spacing-xs) auto 0;
        font-size: var(--font-size-xl);
        font-weight: 600;
    }

    .prose {
        > * + * {
            margin-block-start: var(--spacing-md);
        }

        h2 {
            margin-block-end: var(--spacing-lg);
        }
    }

    /* Sections fade and rise in as they enter the viewport. Browsers without
       scroll-driven animations simply show them. */
    @supports (animation-timeline: view()) {
        @media (prefers-reduced-motion: no-preference) {
            .reveal {
                animation: reveal linear both;
                animation-timeline: view();
                animation-range: entry 0% entry 35%;
            }
        }
    }

    @keyframes reveal {
        from {
            opacity: 0;
            translate: 0 2rem;
        }
    }
}

@layer components {
    .header {
        position: fixed;
        inset: 0 0 auto;
        z-index: var(--z-header);
        height: var(--header-height);
        background-color: rgb(255 255 255 / 0.92);
        border-block-start: 3px solid var(--color-primary);
        -webkit-backdrop-filter: blur(8px);
                backdrop-filter: blur(8px);
    }

    .header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--spacing-md);
        height: 100%;
        padding-inline: var(--spacing-gutter);
    }

    .header__logo {
        font-family: var(--font-family-logo);
        font-size: 2rem;
        font-weight: 400;
        line-height: 1;
        color: var(--color-primary);
        text-decoration: none;

        &:hover {
            color: var(--color-gray-900);
        }
    }

    .header__logo-accent {
        color: var(--color-gray-900);
        transition: color var(--transition-base);

        .header__logo:hover & {
            color: var(--color-primary);
        }
    }

    .header__toggle {
        display: grid;
        place-items: center;
        width: 2.75rem;
        height: 2.75rem;
        padding: 0;
        font-size: 1.5rem;
        color: var(--color-text);
        background: none;
        border: 0;
        border-radius: var(--radius-sm);
        cursor: pointer;

        &:hover {
            color: var(--color-primary);
        }

        &[aria-expanded="true"] .header__toggle-icon--open,
        &[aria-expanded="false"] .header__toggle-icon--close {
            display: none;
        }
    }

    @media (width >= 62rem) {
        .header {
            height: var(--header-height-large);
        }

        .header__toggle {
            display: none;
        }

        /* The header shrinks while the visitor scrolls past the first 120px */
        @supports (animation-timeline: scroll()) {
            .header {
                animation: header-shrink linear both;
                animation-timeline: scroll();
                animation-range: 0 120px;
            }
        }
    }

    /* Without JavaScript the toggle cannot open the menu, so the links stay visible */
    @media (scripting: none) {
        .header__toggle {
            display: none;
        }
    }

    @keyframes header-shrink {
        to {
            height: var(--header-height);
            box-shadow: var(--shadow-md);
        }
    }
}

@layer components {
    .nav__list {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .nav__link {
        display: block;
        font-size: var(--font-size-sm);
        font-weight: 700;
        letter-spacing: var(--letter-spacing-caps);
        text-decoration: none;
        text-transform: uppercase;

        &[aria-current] {
            color: var(--color-primary);
        }
    }

    /* Mobile: panel below the header, opened by the toggle button */
    @media (width < 62rem) {
        .nav {
            position: fixed;
            inset: var(--header-height) 0 auto;
            max-height: calc(100dvh - var(--header-height));
            overflow-y: auto;
            background-color: var(--color-bg-dark);
            box-shadow: var(--shadow-md);
        }

        .header:has([aria-expanded="false"]) .nav {
            display: none;
        }

        .nav__link {
            padding: var(--spacing-md) var(--spacing-gutter);
            color: var(--color-text-inverse);
            border-block-start: 1px solid var(--color-gray-700);

            &:hover,
            &[aria-current] {
                color: var(--color-accent);
            }
        }

        @media (scripting: none) {
            .nav {
                position: static;
                max-height: none;
                background: none;
                box-shadow: none;
            }

            .nav__list {
                display: flex;
                flex-wrap: wrap;
            }

            .nav__link {
                padding: var(--spacing-xs);
                color: var(--color-text);
                border: 0;
            }
        }
    }

    @media (width >= 62rem) {
        .nav__list {
            display: flex;
            gap: var(--spacing-xs);
        }

        .nav__link {
            padding: var(--spacing-xs) var(--spacing-sm);
        }
    }
}

@layer components {
    /* overflow: clip keeps the sliding headline and the parallax image from
       widening or overlapping the page. */
    .hero {
        position: relative;
        isolation: isolate;
        display: grid;
        align-items: start;
        justify-items: end;
        height: var(--hero-height);
        padding-block-start: calc(var(--header-height-large) + var(--spacing-xl));
        overflow: clip;
        background-color: var(--color-brand-green-light);
    }

    .hero__image {
        position: absolute;
        inset: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Parallax: while the hero scrolls out, the image is pushed down by 80% of
       the distance, so it drifts up at a fifth of the scroll speed and the
       page slides over it. It is not position: fixed, so overscrolling at the
       top (rubber band) moves image and hero together without a gap. */
    @supports (animation-timeline: scroll()) {
        @media (prefers-reduced-motion: no-preference) {
            .hero__image {
                animation: hero-parallax linear both;
                animation-timeline: scroll(root);
                animation-range: 0 var(--hero-height);
            }
        }
    }

    @keyframes hero-parallax {
        to {
            translate: 0 calc(var(--hero-height) * 0.8);
        }
    }

    .hero__headline {
        max-width: min(80%, 40rem);
        padding: var(--spacing-sm) var(--spacing-lg);
        font-family: var(--font-family-display);
        font-size: var(--font-size-hero);
        font-weight: 400;
        line-height: 1.2;
        letter-spacing: 0;
        text-align: center;
        text-transform: none;
        color: var(--color-black);
        background-color: rgb(255 255 255 / 0.8);
        -webkit-backdrop-filter: blur(4px);
                backdrop-filter: blur(4px);
    }

    @media (prefers-reduced-motion: no-preference) {
        .hero__headline {
            animation: hero-slide-in 1s ease-out 0.4s both;
        }
    }

    @keyframes hero-slide-in {
        from {
            translate: 100% 0;
        }
    }
}

@layer components {
    .button {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);
        padding: 0.75rem 1.5rem;
        font-size: var(--font-size-xs);
        font-weight: 700;
        line-height: 1;
        letter-spacing: var(--letter-spacing-caps);
        text-decoration: none;
        text-transform: uppercase;
        color: var(--color-text-inverse);
        background-color: var(--color-bg-dark);
        border: 0;
        border-radius: var(--radius-sm);
        transition: background-color var(--transition-base);

        &:hover {
            color: var(--color-text-inverse);
            background-color: var(--color-primary);
        }
    }
}

@layer components {
    .features {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
        gap: var(--spacing-2xl) var(--spacing-xl);
        margin: 0;
        padding: 0;
        list-style: none;
        text-align: center;
    }

    .feature__icon {
        display: inline-grid;
        place-items: center;
        width: 4.375rem;
        aspect-ratio: 1;
        margin-block-end: var(--spacing-lg);
        font-size: 1.5rem;
        background-color: var(--color-bg-subtle);
        border-radius: var(--radius-round);
        transition: background-color var(--transition-base), color var(--transition-base);

        .feature:hover & {
            color: var(--color-text-inverse);
            background-color: var(--color-primary);
        }
    }

    .feature__text {
        color: var(--color-text-muted);
    }
}

@layer components {
    /* Full-width image band with a dark overlay (quote and statement) */
    .banner {
        position: relative;
        isolation: isolate;
        /* clip, not hidden: overflow: hidden would make the band a scroll
           container, and the parallax view() timeline would then track the
           band instead of the page. */
        overflow: clip;
        padding-block: var(--spacing-section);
        color: var(--color-text-inverse);
        text-align: center;
        background-color: var(--color-bg-dark);

        &::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -1;
            background-color: var(--color-overlay);
        }
    }

    .banner__image {
        position: absolute;
        inset: 0;
        z-index: -2;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Parallax: the image is taller than the band and drifts against the
       scroll direction while the band crosses the viewport. */
    @supports (animation-timeline: view()) {
        @media (prefers-reduced-motion: no-preference) {
            .banner__image {
                inset: -20% 0;
                height: 140%;
                animation: banner-parallax linear both;
                animation-timeline: view();
            }
        }
    }

    @keyframes banner-parallax {
        from {
            translate: 0 -12%;
        }

        to {
            translate: 0 12%;
        }
    }

    .banner__content {
        max-width: 44rem;
    }

    .banner__statement {
        font-size: var(--font-size-xl);
        font-weight: 600;
    }

    .quote__icon {
        margin-inline: auto;
        margin-block-end: var(--spacing-md);
        font-size: 1.75rem;
    }

    .quote__text {
        margin-block-end: var(--spacing-lg);
        font-size: var(--font-size-xl);
        font-weight: 600;
        line-height: var(--line-height-base);
    }

    .quote__author {
        font-size: var(--font-size-xs);
        font-weight: 700;
        letter-spacing: var(--letter-spacing-caps);
        text-transform: uppercase;
    }
}

@layer components {
    /* Native scroll-snap carousel. Swiping and keyboard scrolling are handled
       by the browser; scripts/carousel.js only wires the buttons and dots. */
    .carousel__track {
        /* Containing block for absolutely positioned content such as
           .visually-hidden; without it that content escapes the scroller and
           widens the whole page. */
        position: relative;
        display: grid;
        grid-auto-columns: 100%;
        grid-auto-flow: column;
        gap: var(--spacing-xl);
        margin: 0;
        padding: 0;
        list-style: none;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;

        &::-webkit-scrollbar {
            display: none;
        }
    }

    .carousel__slide {
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    .carousel__controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-md);
        margin-block-start: var(--spacing-xl);
    }

    /* Without JavaScript the track still scrolls, the buttons would do nothing */
    @media (scripting: none) {
        .carousel__controls {
            display: none;
        }
    }

    .carousel__button {
        display: grid;
        place-items: center;
        width: 2.75rem;
        aspect-ratio: 1;
        padding: 0;
        font-size: 1.25rem;
        background: none;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-round);
        cursor: pointer;
        transition: border-color var(--transition-base), color var(--transition-base);

        &:hover {
            color: var(--color-primary);
            border-color: currentColor;
        }
    }

    .carousel__dots {
        display: flex;
        gap: var(--spacing-xs);
    }

    .carousel__dot {
        width: 1.5rem;
        height: 1.5rem;
        padding: 0;
        background: none;
        border: 0;
        cursor: pointer;

        &::before {
            content: '';
            display: block;
            width: 0.625rem;
            aspect-ratio: 1;
            margin: auto;
            border: 2px solid var(--color-gray-600);
            border-radius: var(--radius-round);
            transition: background-color var(--transition-base), border-color var(--transition-base);
        }

        &:hover::before {
            border-color: var(--color-primary);
        }

        &[aria-current="true"]::before {
            background-color: var(--color-primary);
            border-color: var(--color-primary);
        }
    }
}

@layer components {
    /* The layout follows the slide's width, not the viewport */
    .reference {
        container-type: inline-size;
    }

    .reference__layout {
        display: grid;
        gap: var(--spacing-xl);
        align-items: center;

        @container (width >= 44rem) {
            grid-template-columns: 1fr 1fr;
            gap: var(--spacing-3xl);
        }
    }

    .reference__image {
        width: 100%;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
    }

    .reference__title {
        margin-block-end: var(--spacing-md);
        font-size: var(--font-size-lg);
    }

    .reference__tags {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-xs);
        margin: var(--spacing-lg) 0;
        padding: 0;
        list-style: none;

        li {
            padding: 0.25rem 0.75rem;
            font-size: var(--font-size-xs);
            font-weight: 600;
            color: var(--color-primary);
            background-color: var(--color-brand-green-light);
            border-radius: 999px;
        }
    }
}

@layer components {
    /* Mobile: portrait, then both lists. Tablet: portrait above two columns.
       Desktop: the portrait sits between the lists, which face it. */
    .profile {
        display: grid;
        grid-template-areas:
            'portrait'
            'start'
            'end';
        gap: var(--spacing-2xl) var(--spacing-xl);
        align-items: start;

        @media (width >= 48rem) {
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
                'portrait portrait'
                'start end';
        }

        @media (width >= 62rem) {
            grid-template-columns: 1fr minmax(16rem, 20rem) 1fr;
            grid-template-areas: 'start portrait end';
        }
    }

    .profile__portrait {
        grid-area: portrait;
        display: grid;
        justify-items: center;
        gap: var(--spacing-2xl);
    }

    .profile__photo {
        width: min(100%, 20rem);
        padding: var(--spacing-xs);
        background-color: var(--color-bg);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
    }

    /* Black and white until hovered; touch screens have no hover and show the
       colors right away. */
    @media (hover: hover) {
        .profile__photo {
            filter: grayscale(1);
            transition: filter var(--transition-base);

            &:hover {
                filter: none;
            }
        }
    }

    .profile__certificate {
        width: min(100%, 14rem);
    }

    .profile__list {
        display: grid;
        gap: var(--spacing-xl);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .profile__list--start {
        grid-area: start;
    }

    .profile__list--end {
        grid-area: end;
    }

    .profile__item {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: var(--spacing-lg);
        align-items: start;

        ul {
            margin: 0;
            padding-inline-start: 1.1rem;
        }
    }

    .profile__icon {
        display: grid;
        place-items: center;
        width: 4.375rem;
        aspect-ratio: 1;
        font-size: 1.5rem;
        background-color: var(--color-bg-subtle);
        border-radius: var(--radius-round);
        transition: background-color var(--transition-base), color var(--transition-base);

        .profile__item:hover & {
            color: var(--color-text-inverse);
            background-color: var(--color-primary);
        }
    }

    /* On desktop the left list is mirrored so its icons face the portrait */
    @media (width >= 62rem) {
        .profile__list--start .profile__item {
            grid-template-columns: 1fr auto;
            text-align: end;

            .profile__icon {
                order: 1;
            }

            ul {
                padding-inline-start: 0;
                list-style-position: inside;
            }
        }
    }
}

@layer components {
    .contact {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
        gap: var(--spacing-2xl) var(--spacing-xl);
        margin: 0;
        padding: 0;
        list-style: none;
        text-align: center;
    }

    .contact__icon {
        margin-inline: auto;
        margin-block-end: var(--spacing-md);
        font-size: 1.5rem;
    }

    .contact__label {
        font-weight: 600;
    }
}

@layer components {
    /* Native <details name="…"> keeps one entry open at a time */
    .accordion {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
    }

    .accordion__item + .accordion__item {
        border-block-start: 1px solid var(--color-border);
    }

    .accordion__summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--spacing-md);
        padding: var(--spacing-lg);
        cursor: pointer;
        list-style: none;

        &::-webkit-details-marker {
            display: none;
        }

        &:hover .accordion__title {
            color: var(--color-primary);
        }
    }

    .accordion__title {
        font-size: var(--font-size-base);
        font-weight: 600;
        letter-spacing: 0.12em;
        transition: color var(--transition-base);

        [open] > summary & {
            color: var(--color-primary);
        }
    }

    .accordion__icon {
        transition: rotate var(--transition-base);

        [open] > summary & {
            rotate: 180deg;
        }
    }

    .accordion__content {
        padding: 0 var(--spacing-lg) var(--spacing-xl);

        > * + * {
            margin-block-start: var(--spacing-md);
        }

        h3 {
            margin-block: var(--spacing-xl) 0;
            font-size: var(--font-size-base);
        }

        ul,
        ol {
            padding-inline-start: 1.5rem;
        }

        ol li::marker {
            font-weight: 700;
        }
    }

    /* Smooth open/close where the browser can animate to height: auto */
    @supports (interpolate-size: allow-keywords) {
        @media (prefers-reduced-motion: no-preference) {
            .accordion {
                interpolate-size: allow-keywords;
            }

            .accordion__item::details-content {
                height: 0;
                overflow: clip;
                transition: height var(--transition-base), content-visibility var(--transition-base) allow-discrete;
            }

            .accordion__item[open]::details-content {
                height: auto;
            }
        }
    }
}

@layer components {
    .footer {
        flex-shrink: 0;
        padding-block: var(--spacing-section) var(--spacing-xl);
        color: var(--color-text-inverse);
        background-color: var(--color-bg-dark);

        a {
            font-weight: 400;
            text-decoration: none;

            &:hover {
                color: var(--color-accent);
                text-decoration: underline;
            }
        }
    }

    .footer__grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
        gap: var(--spacing-xl);
    }

    .footer__logo {
        width: 3.75rem;
    }

    .footer__heading {
        margin-block-end: var(--spacing-xs);
        font-size: var(--font-size-sm);
        color: var(--color-accent);
    }

    .footer__list {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .footer__copyright {
        margin-block-start: var(--spacing-2xl);
        padding-block-start: var(--spacing-lg);
        font-size: var(--font-size-sm);
        border-block-start: 1px solid var(--color-gray-700);
    }
}

/*
 * GreenEmu frontend stylesheet. Native CSS without a framework: cascade
 * layers keep the specificity flat, BEM class names (block__element--modifier)
 * scope every component.
 */
@layer reset, base, layout, components, utilities;