/* ---- fonts.css ---- */
/* Self-hosted Google Fonts. Generated by /download_fonts.py.
   Re-run that script to refresh the WOFF2 files and this CSS
   when the font set changes. Source URLs and unicode-range
   subsets are preserved exactly as Google served them; only
   the src URL is rewritten to point at site/fonts/.            */

/* vietnamese */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/anton-1Ptgg87LROyAm3K8-C8QSw.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: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/anton-1Ptgg87LROyAm3K9-C8QSw.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: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/anton-1Ptgg87LROyAm3Kz-C8.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: 'Bitter';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/bitter-rax-HiqOu8IVPmn7erxmJD1img.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: 'Bitter';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/bitter-rax-HiqOu8IVPmn7erxvJD1img.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/bitter-rax-HiqOu8IVPmn7erxkJD1img.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: 'Bitter';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/bitter-rax-HiqOu8IVPmn7erxlJD1img.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: 'Bitter';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/bitter-rax-HiqOu8IVPmn7erxrJD0.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: 'Bitter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/bitter-rax8HiqOu8IVPmn7coxpPDk.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: 'Bitter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/bitter-rax8HiqOu8IVPmn7e4xpPDk.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/bitter-rax8HiqOu8IVPmn7cIxpPDk.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: 'Bitter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/bitter-rax8HiqOu8IVPmn7cYxpPDk.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: 'Bitter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/bitter-rax8HiqOu8IVPmn7f4xp.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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/lato-S6uyw4BMUTPHjxAwXjeu.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: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/lato-S6uyw4BMUTPHjx4wXg.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;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/lato-S6u9w4BMUTPHh6UVSwaPGR_p.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: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/lato-S6u9w4BMUTPHh6UVSwiPGQ.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: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/oswald-TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlbHYjedg.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: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/oswald-TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlSHYjedg.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/oswald-TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlZHYjedg.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: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/oswald-TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlYHYjedg.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: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/oswald-TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlWHYg.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: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/oswald-TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlbHYjedg.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: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/oswald-TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlSHYjedg.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/oswald-TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlZHYjedg.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: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/oswald-TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlYHYjedg.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: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/oswald-TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlWHYg.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 */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/playfairdisplay-nuFkD-vYSZviVYUb_rj3ij__anPXDTnohkk72xU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/playfairdisplay-nuFkD-vYSZviVYUb_rj3ij__anPXDTnojUk72xU.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: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/playfairdisplay-nuFkD-vYSZviVYUb_rj3ij__anPXDTnojEk72xU.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: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/playfairdisplay-nuFkD-vYSZviVYUb_rj3ij__anPXDTnogkk7.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 */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/playfairdisplay-nuFkD-vYSZviVYUb_rj3ij__anPXDTnohkk72xU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/playfairdisplay-nuFkD-vYSZviVYUb_rj3ij__anPXDTnojUk72xU.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: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/playfairdisplay-nuFkD-vYSZviVYUb_rj3ij__anPXDTnojEk72xU.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: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/playfairdisplay-nuFkD-vYSZviVYUb_rj3ij__anPXDTnogkk7.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;
}

/* ---- base.css ---- */
/* ==========================================================================
   Level Headed Construction — base.css
   Design tokens, reset, and base typography.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Colors */
  --cream:         #EDDDB7;
  --cream-soft:    #FBF8F1;
  --brown:         #A8552E;
  --brown-dark:    #7D3E1F;
  --rusty:         #9E3C0E;
  --rusty-dark:    #6E2A0A;
  --ink:           #2A1B10;
  --ink-soft:      #3D2F22;
  --neutral-200:   #D9CEB2;
  --neutral-500:   #8C7B63;
  --white:         #FFFFFF;
  --success:       #4A7C3C;
  --error:         #B33B14;

  /* Typography */
  --font-display: "Oswald", "Arial Narrow", "Impact", sans-serif;
  --font-body:    "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Accent face: italic serif used in headlines to highlight the key
     word (e.g. "Build." / "hold to.") against the condensed display.   */
  --font-accent:  "Playfair Display", "Times New Roman", Georgia, serif;
  /* Form input text uses the body font at a heavier weight —
     keeps the family consistent with the rest of the page while
     giving typed content a quietly substantial feel. */
  --font-input:   "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Motion — duration */
  --dur-fast:   150ms;
  --dur-base:   300ms;
  --dur-medium: 500ms;
  --dur-slow:   800ms;
  --dur-loader: 550ms;

  /* Motion — easing */
  --ease-in-out-circ:  cubic-bezier(0.85, 0, 0.15, 1);
  --ease-in-out-quad:  cubic-bezier(0.45, 0, 0.55, 1);
  --ease-out-circ:     cubic-bezier(0, 0.55, 0.45, 1);
  --ease-expo-in-out:  cubic-bezier(0.87, 0, 0.13, 1);

  /* Layout */
  --page-max:    1440px;
  --content-max: 1200px;
  --text-max:    680px;
  --gutter:      24px;

  /* Radii */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(42,27,16,0.08);
  --shadow-lg: 0 12px 32px rgba(42,27,16,0.15);
}

@media (min-width: 768px) {
  :root { --gutter: 48px; }
}
@media (min-width: 1440px) {
  :root { --gutter: 64px; }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, picture, svg, video { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ---------- Base typography ---------- */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream-soft);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}

h1 { font-size: clamp(32px, 5vw, 56px); }
h2 { font-size: clamp(28px, 4vw, 44px); }
h3 { font-size: clamp(22px, 2.5vw, 28px); font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }

/* Headline accent: wrap the emphasis word(s) of any heading with
   <span class="title__accent"> to swap to the italic serif and rust
   color. The italic serif visually balances the condensed display
   sans next to it; size is bumped slightly because italic serifs
   read smaller than their nominal em size at the same font-size. */
.title__accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  color: var(--rusty);
  letter-spacing: -0.005em;
  /* Italic serifs need a touch more size to balance the condensed
     display next to them. */
  font-size: 1.06em;
  /* Always proper case regardless of parent text-transform. */
  text-transform: none;
}

p { max-width: var(--text-max); }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rusty);
}

/* ---------- Focus ---------- */
:focus-visible {
  outline: 3px solid var(--rusty);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--ink);
  color: var(--cream);
  padding: 12px 20px;
  z-index: 10000;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 14px;
  transition: top var(--dur-base) var(--ease-in-out-quad);
}
.skip-link:focus { top: 16px; }

/* Visually-hidden (screen-reader only). Used for the single page-level H1 on
   the homepage, where the visible hero headings rotate through service names.
   Keeps one keyword-rich H1 in the document for SEO + a11y without altering
   the carousel design. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Layout helpers ---------- */
.container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

/* ---- components.css ---- */
/* ==========================================================================
   Level Headed Construction — components.css
   Buttons, header, loader.
   ========================================================================== */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 24px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-in-out-quad),
    color var(--dur-fast) var(--ease-in-out-quad),
    border-color var(--dur-fast) var(--ease-in-out-quad),
    box-shadow var(--dur-fast) var(--ease-in-out-quad),
    transform var(--dur-fast) var(--ease-in-out-quad);
  white-space: nowrap;
}

.btn--primary {
  background: var(--rusty);
  color: var(--cream);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--rusty-dark);
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}

.btn--secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
  background: var(--ink);
  color: var(--cream);
}

.btn--ghost {
  background: transparent;
  color: var(--cream);
  border-color: var(--cream);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--cream);
  color: var(--ink);
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px var(--gutter);
  background: transparent;
  transition: background var(--dur-base) var(--ease-in-out-quad),
              box-shadow var(--dur-base) var(--ease-in-out-quad),
              padding var(--dur-base) var(--ease-in-out-quad);
}

.site-header.is-stuck {
  background: rgba(237, 221, 183, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
  padding-top: 12px;
  padding-bottom: 12px;
}

.site-header.is-hidden {
  transform: translateY(-100%);
}

/* ---------- Header entrance choreography (boot-time only) ----------
   Mirrors B&G: wordmark fades in first, nav links cascade in from the left
   with a small stagger, phone pill arrives last. The .is-header-in class is
   added by app.js the moment the loader curtains begin pulling apart, so the
   header builds itself while the user's eye is following the curtains off. */
.site-header .wordmark,
.site-header .site-nav__link,
.site-header .phone-pill,
.site-header .menu-toggle {
  opacity: 0;
  transform: translateX(-12px);
  transition:
    opacity 600ms var(--ease-out-circ),
    transform 600ms var(--ease-out-circ);
}
/* Wordmark uses a gentler vertical lift instead of the horizontal slide */
.site-header .wordmark {
  transform: translateY(-8px);
}
.site-header.is-header-in .wordmark,
.site-header.is-header-in .site-nav__link,
.site-header.is-header-in .phone-pill,
.site-header.is-header-in .menu-toggle {
  opacity: 1;
  transform: none;
}
/* Stagger: wordmark first, then each nav item, then phone pill */
.site-header.is-header-in .wordmark           { transition-delay:   0ms; }
.site-header.is-header-in .site-nav__link:nth-child(1) { transition-delay: 200ms; }
.site-header.is-header-in .site-nav__link:nth-child(2) { transition-delay: 300ms; }
.site-header.is-header-in .site-nav__link:nth-child(3) { transition-delay: 400ms; }
.site-header.is-header-in .site-nav__link:nth-child(4) { transition-delay: 500ms; }
.site-header.is-header-in .site-nav__link:nth-child(5) { transition-delay: 600ms; }
.site-header.is-header-in .phone-pill         { transition-delay: 650ms; }
.site-header.is-header-in .menu-toggle        { transition-delay: 650ms; }

@media (prefers-reduced-motion: reduce) {
  .site-header .wordmark,
  .site-header .site-nav__link,
  .site-header .phone-pill,
  .site-header .menu-toggle {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Wordmark lockup (Oswald Option 2) */
.wordmark {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.wordmark__mark {
  width: 60px;
  height: 60px;
  object-fit: contain;
  flex-shrink: 0;
}
.wordmark__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  font-family: var(--font-display);
}
.wordmark__line1 {
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.wordmark__line2 {
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--rusty);
  margin-top: 4px;
}
.site-header.on-dark .wordmark__line1 { color: var(--cream); }
.site-header.on-dark .wordmark__line2 { color: #d9a374; }

@media (min-width: 768px) {
  .wordmark__mark { width: 80px; height: 80px; }
  .wordmark__line1 { font-size: 30px; }
  .wordmark__line2 { font-size: 14px; }
}

/* Primary nav */
.site-nav {
  display: none;
}
@media (min-width: 1024px) {
  .site-nav {
    display: flex;
    gap: 32px;
    align-items: center;
  }
}

.site-nav__link {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 8px 0;
  position: relative;
  transition: color var(--dur-fast) var(--ease-in-out-quad);
}
.site-nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--rusty);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-in-out-circ);
}
.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}
.site-header.on-dark .site-nav__link { color: var(--cream); }

/* Right-side actions wrapper (phone pill + mobile hamburger) */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Phone pill */
.phone-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--rusty);
  color: var(--cream);
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  transition: background var(--dur-fast) var(--ease-in-out-quad),
              transform var(--dur-fast) var(--ease-in-out-quad);
  min-height: 44px;
  white-space: nowrap;
}
.phone-pill:hover,
.phone-pill:focus-visible {
  background: var(--rusty-dark);
  transform: translateY(-1px);
}

.phone-pill__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.phone-pill__label {
  display: none;
}
@media (min-width: 480px) {
  .phone-pill__label { display: inline; }
}

/* Hamburger (mobile) */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  color: var(--ink);
}
.site-header.on-dark .menu-toggle { color: var(--cream); }
.menu-toggle svg { width: 24px; height: 24px; }
@media (min-width: 1024px) {
  .menu-toggle { display: none; }
}

/* Mobile drawer */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: var(--cream);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-in-out-circ);
  display: flex;
  flex-direction: column;
  padding: 80px 24px 24px;
  overflow: hidden;
}
.mobile-drawer.is-open {
  transform: translateX(0);
}
/* Only the nav links scroll; the logo + close button stay pinned in the
   shell above. Lets the Services accordion grow past the viewport without
   pushing the close button off-screen or clipping lower links. */
.mobile-drawer__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}
.mobile-drawer__link {
  display: block;
  padding: 16px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--neutral-200);
}
.mobile-drawer__link:hover { color: var(--rusty); }
.mobile-drawer__close {
  /* Absolute within the non-scrolling shell — stays pinned top-right while
     only .mobile-drawer__scroll scrolls. */
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mobile-drawer__close svg { width: 20px; height: 20px; }

/* Blueprint mascot at the top of the open drawer — sized to match
   the header wordmark mark (60px) and left-aligned so it stacks
   directly above the "HOME" link's flush-left edge.               */
.mobile-drawer__logo {
  display: block;
  width: 60px;
  height: auto;
  margin: 0 0 16px;
  align-self: flex-start;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.15));
  user-select: none;
  pointer-events: none;
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(42, 27, 16, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-in-out-quad);
  z-index: 150;
}
.drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================================================
   Loader — split-screen curtain (ported from Brasfield & Gorrie)

   Two vertical pillars meet at the centerline. Each pillar holds one half
   of the brand lockup (mascot left, wordmark right), and the halves slide
   in from opposite directions to assemble the full lockup.

   Choreography (driven by app.js):
     1. .loader present at parse — pillars cover the screen, halves offscreen
     2. .is-ready class added on next frame — halves slide to center
     3. Progress bar fills as assets resolve
     4. .is-opening class added when load completes — curtains pull apart,
        sliding off in opposite directions; lheroReady fires simultaneously
        so the hero entrance animation runs underneath the parting curtains
     5. .is-done class added once the pull-apart finishes — pointer events off
   ========================================================================== */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  pointer-events: auto;
}
.loader.is-done {
  pointer-events: none;
}

/* ---------- Pillar (one half of the screen) ---------- */
.loader__pillar {
  position: relative;
  overflow: hidden;
  /* Curtain pull-apart: each pillar slides off in its own direction.
     750ms — 25% faster than the B&G 1:1 baseline. */
  transition: transform 750ms var(--ease-in-out-circ);
  will-change: transform;
}
.loader__pillar--left  { background: var(--ink); }
.loader__pillar--right { background: var(--ink-soft); }

.loader.is-opening .loader__pillar--left  { transform: translateX(-101%); }
.loader.is-opening .loader__pillar--right { transform: translateX( 101%); }

/* Subtle inner curtain layer — gives the pillar a hint of depth and lets
   future tweaks (a sweep, a sheen) live somewhere without restructuring. */
.loader__curtain {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(237, 221, 183, 0.04) 0%,
    rgba(0, 0, 0, 0)          50%,
    rgba(0, 0, 0, 0.18)       100%);
  pointer-events: none;
}

/* ---------- Halves (logo / wordmark inside each pillar) ---------- */
.loader__half {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  /* Slide-in is GPU transform only; transition added by .is-ready.
     750ms — 25% faster than the B&G 1:1 baseline. */
  transform: translateY(120%);
  transition: transform 750ms var(--ease-in-out-circ);
  will-change: transform;
}
.loader.is-ready .loader__half--mark { transform: translateY(0); }
.loader.is-ready .loader__half--text { transform: translateY(0); }

/* Right half (wordmark) drops in from above instead of rising from below */
.loader__half--text {
  transform: translateY(-120%);
}

/* Mark half: anchored to the right edge so the icon sits at the seam */
.loader__half--mark {
  justify-content: flex-end;
  padding-right: clamp(12px, 4vw, 32px);
}
.loader__mark {
  width: clamp(96px, 18vw, 200px);
  height: auto;
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.4));
}

/* Text half: anchored to the left edge so the wordmark sits at the seam */
.loader__half--text {
  justify-content: flex-start;
  padding-left: clamp(12px, 4vw, 32px);
}
.loader__wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1;
  font-family: var(--font-display);
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.loader__wordmark-line1 {
  font-weight: 700;
  font-size: clamp(28px, 5vw, 56px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cream);
}
.loader__wordmark-line2 {
  font-weight: 500;
  font-size: clamp(13px, 2.2vw, 22px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #d9a374;
  margin-top: 6px;
}

/* ---------- Progress bar (bottom edge) ---------- */
.loader__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(237, 221, 183, 0.12);
  overflow: hidden;
  z-index: 2;
}
@media (min-width: 1024px) {
  .loader__bar { height: 3px; }
}
.loader__bar-fill {
  width: 0%;
  height: 100%;
  background: var(--rusty);
  transform-origin: left center;
  transition: width 250ms linear;
}
/* Fade the bar out once the curtains begin pulling apart */
.loader.is-opening .loader__bar {
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-in-out-quad);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .loader { display: none; }
}

/* ==========================================================================
   Services mega-menu (desktop) + drawer accordion (mobile)

   The top nav stays 5 items; "Services" gains a hover/focus mega-menu listing
   the 5 service categories (→ /services.html#anchor) with their dedicated
   sub-pages nested underneath. Pure CSS reveal on :hover / :focus-within so it
   works for mouse + keyboard without JS. On mobile the drawer gets a JS-toggled
   accordion (the chevron button) holding the same links.
   ========================================================================== */
.site-nav__has-menu {
  position: relative;
  display: flex;
  align-items: center;
}
.site-nav__link--has-menu {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.site-nav__caret {
  width: 14px;
  height: 14px;
  transition: transform var(--dur-base) var(--ease-in-out-circ);
}
.site-nav__has-menu:hover .site-nav__caret,
.site-nav__has-menu:focus-within .site-nav__caret {
  transform: rotate(180deg);
}

/* The panel. Hidden by default; revealed on hover/focus of the wrapper. */
.nav-mega {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: min(920px, 92vw);
  background: var(--ink);
  border: 1px solid rgba(237, 221, 183, 0.14);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 28px 28px 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-in-out-quad),
              transform var(--dur-base) var(--ease-in-out-circ),
              visibility 0s linear var(--dur-base);
  z-index: 120;
}
/* Invisible hover bridge so the cursor can cross the gap to the panel. */
.nav-mega::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
}
.site-nav__has-menu:hover .nav-mega,
.site-nav__has-menu:focus-within .nav-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity var(--dur-base) var(--ease-in-out-quad),
              transform var(--dur-base) var(--ease-in-out-circ),
              visibility 0s;
}
.nav-mega__inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}
.nav-mega__head {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream);
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(237, 221, 183, 0.16);
  transition: color var(--dur-fast) var(--ease-in-out-quad);
}
.nav-mega__head:hover,
.nav-mega__head:focus-visible {
  color: var(--brown);
}
.nav-mega__link {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  color: rgba(237, 221, 183, 0.78);
  padding: 6px 0;
  transition: color var(--dur-fast) var(--ease-in-out-quad),
              padding-left var(--dur-fast) var(--ease-in-out-quad);
}
.nav-mega__link:hover,
.nav-mega__link:focus-visible {
  color: var(--cream);
  padding-left: 4px;
}
.nav-mega__note {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(237, 221, 183, 0.5);
  margin: 0;
}
.nav-mega__all {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brown);
  transition: color var(--dur-fast) var(--ease-in-out-quad);
}
.nav-mega__all:hover,
.nav-mega__all:focus-visible { color: var(--cream); }

/* Header entrance: keep the nested Services link in the cascade. */
.site-header.is-header-in .site-nav__has-menu .site-nav__link { transition-delay: 300ms; }

/* ---------- Layered Services menu (two-tier flyout) ----------
   Level 1: a compact vertical list of the 5 service categories.
   Level 2: hovering / focusing a category opens its sub-services in a panel
   to the right, each ending with a "Learn more" link to that category's
   section on /services.html. Pure CSS reveal (hover + focus-within) so it
   works for mouse and keyboard without JS, matching the top-level menu. */
.nav-mega--layered {
  width: min(264px, 92vw);
  left: 0;
  transform: translateX(0) translateY(8px);
  padding: 10px;
}
.site-nav__has-menu:hover .nav-mega--layered,
.site-nav__has-menu:focus-within .nav-mega--layered {
  transform: translateX(0) translateY(0);
}
.nav-cats {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-cat {
  position: relative;
}
.nav-cat + .nav-cat {
  border-top: 1px solid rgba(237, 221, 183, 0.10);
}
.nav-cat__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--cream);
  transition: background var(--dur-fast) var(--ease-in-out-quad),
              color var(--dur-fast) var(--ease-in-out-quad);
}
.nav-cat__caret {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--brown);
  transition: transform var(--dur-fast) var(--ease-in-out-circ);
}
.nav-cat:hover > .nav-cat__trigger,
.nav-cat:focus-within > .nav-cat__trigger {
  background: rgba(237, 221, 183, 0.07);
}
.nav-cat:hover > .nav-cat__trigger .nav-cat__caret,
.nav-cat:focus-within > .nav-cat__trigger .nav-cat__caret {
  transform: translateX(3px);
}

/* Level 2 flyout panel. */
.nav-cat__panel {
  position: absolute;
  top: -10px;
  left: calc(100% + 8px);
  width: 244px;
  background: var(--ink);
  border: 1px solid rgba(237, 221, 183, 0.14);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-6px);
  transition: opacity var(--dur-base) var(--ease-in-out-quad),
              transform var(--dur-base) var(--ease-in-out-circ),
              visibility 0s linear var(--dur-base);
  z-index: 130;
}
/* Invisible bridge so the cursor can cross the gap into the flyout. */
.nav-cat__panel::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -10px;
  width: 10px;
}
.nav-cat:hover > .nav-cat__panel,
.nav-cat:focus-within > .nav-cat__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition: opacity var(--dur-base) var(--ease-in-out-quad),
              transform var(--dur-base) var(--ease-in-out-circ),
              visibility 0s;
}
.nav-cat__link {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  color: rgba(237, 221, 183, 0.78);
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-in-out-quad),
              background var(--dur-fast) var(--ease-in-out-quad);
}
.nav-cat__link:hover,
.nav-cat__link:focus-visible {
  color: var(--cream);
  background: rgba(237, 221, 183, 0.07);
}
.nav-cat__note {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(237, 221, 183, 0.5);
  margin: 4px 8px 2px;
}
.nav-cat__more {
  display: block;
  margin: 6px 8px 2px;
  padding-top: 8px;
  border-top: 1px solid rgba(237, 221, 183, 0.12);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brown);
  transition: color var(--dur-fast) var(--ease-in-out-quad);
}
.nav-cat__more:hover,
.nav-cat__more:focus-visible {
  color: var(--cream);
}

/* ---------- Mobile drawer: Services accordion ---------- */
.mobile-drawer__group {
  border-bottom: 1px solid var(--neutral-200);
}
.mobile-drawer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobile-drawer__group .mobile-drawer__link {
  border-bottom: 0;
  flex: 1;
}
.mobile-drawer__expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  color: var(--ink);
}
.mobile-drawer__expand svg {
  width: 22px;
  height: 22px;
  transition: transform var(--dur-base) var(--ease-in-out-circ);
}
.mobile-drawer__expand[aria-expanded="true"] svg { transform: rotate(180deg); }
/* Level 1: the Services dropdown — now reveals just the 5 categories. */
.mobile-drawer__sub {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--dur-base) var(--ease-in-out-circ);
}
/* Room for the 5 category rows plus any nested service lists that get
   expanded. The inner .mobile-drawer__scroll handles overflow either way. */
.mobile-drawer__sub.is-open { max-height: 1400px; }

/* Level 2: a service category — display-font label + its own expand chevron,
   mirroring the desktop layered menu. */
.mobile-drawer__cat + .mobile-drawer__cat { border-top: 1px solid var(--neutral-200); }
.mobile-drawer__catrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobile-drawer__catlink {
  flex: 1;
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 14px 2px;
}
.mobile-drawer__catlink:hover { color: var(--rusty); }
.mobile-drawer__catexpand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  color: var(--ink-soft);
}
.mobile-drawer__catexpand svg {
  width: 18px;
  height: 18px;
  transition: transform var(--dur-base) var(--ease-in-out-circ);
}
.mobile-drawer__catexpand[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Level 3: the services inside an expanded category — same display font as the
   menu, sentence case, indented with a rule so it reads as a nested item. */
.mobile-drawer__catsub {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--dur-base) var(--ease-in-out-circ);
}
.mobile-drawer__catsub.is-open { max-height: 360px; }
.mobile-drawer__sublink--deep {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  padding: 11px 0 11px 16px;
  margin-left: 2px;
  border-left: 2px solid var(--neutral-200);
}
.mobile-drawer__sublink--deep:hover { color: var(--rusty); border-left-color: var(--rusty); }
.mobile-drawer__catsub .mobile-drawer__sublink--deep:last-child { padding-bottom: 14px; }

/* ==========================================================================
   Breadcrumb (inner pages: service + city)
   ========================================================================== */
.breadcrumb {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.01em;
}
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
}
.breadcrumb__item:not(:last-child)::after {
  content: '/';
  color: var(--brown);
  opacity: 0.6;
}
.breadcrumb__item a {
  color: var(--brown-dark);
  transition: color var(--dur-fast) var(--ease-in-out-quad);
}
.breadcrumb__item a:hover { color: var(--rusty); }
.breadcrumb__item[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

/* ---- sections.css ---- */
/* ==========================================================================
   Level Headed Construction — sections.css
   Section rhythm system: cream-soft body with raised cream panels.
   ========================================================================== */

:root {
  --section-pad-y:        96px;
  --section-pad-y-mobile: 64px;
  --panel-radius:         40px;
  --panel-shadow:         0 2px 10px rgba(42, 27, 16, 0.06);
}

/* ---------- Section base ---------- */
.section {
  position: relative;
  padding-top: var(--section-pad-y-mobile);
  padding-bottom: var(--section-pad-y-mobile);
}
@media (min-width: 768px) {
  .section {
    padding-top: var(--section-pad-y);
    padding-bottom: var(--section-pad-y);
  }
}

.section__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Variants ---------- */
.section--soft { background: transparent; } /* inherits body cream-soft */
.section--cream {
  background: var(--cream);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
}
/* Dark raised panel — inverts the cream panel to break up the scroll rhythm
   with a cinematic, reversed-out mood section. */
.section--ink {
  background: var(--ink);
  color: var(--cream-soft);
  border-radius: var(--panel-radius);
  box-shadow: 0 16px 48px rgba(42, 27, 16, 0.25);
}

/* (.section--rust variant was removed in launch polish — no element on
   any page used it. If a rust-band breaks the panel rhythm in a future
   design, re-add: background var(--rusty), cream-soft text, no radius.) */
.section--ink h2,
.section--ink h3 { color: var(--cream-soft); }
.section--ink p { color: rgba(251, 248, 241, 0.82); }
.section--ink .eyebrow { color: var(--cream); }

/* Adjacent cream panels merge seamlessly */
.section--cream + .section--cream {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: calc(var(--panel-radius) * -1);
  padding-top: calc(var(--section-pad-y-mobile) + var(--panel-radius));
}
@media (min-width: 768px) {
  .section--cream + .section--cream {
    padding-top: calc(var(--section-pad-y) + var(--panel-radius));
  }
}

/* When a raised panel (cream or ink) follows the strip, square off its
   top corners so it reads as a continuation of the strip instead of
   floating with notched top corners exposing the body cream-soft. */
.strip + .section--cream,
.strip + .section--ink {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Thin hairline between two consecutive soft sections */
.section--soft + .section--soft::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: var(--neutral-200);
}

/* ---------- Shared section heading block ---------- */
.section-head {
  max-width: var(--text-max);
  margin-bottom: 48px;
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head .eyebrow { display: block; margin-bottom: 12px; }
.section-head h2 { margin-bottom: 16px; }
.section-head p { color: var(--ink-soft); font-size: 18px; }
.section-head--center p { margin-inline: auto; }

/* ==========================================================================
   Section 1 — Service-area strip
   ========================================================================== */
.strip {
  padding: 28px 0;
  background: transparent;
}
.strip__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
}
.strip__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--rusty);
  flex-shrink: 0;
}

/* ==========================================================================
   Section 2 — Services grid
   ========================================================================== */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (min-width: 1024px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

/* Outer <li> is a reveal wrapper and the perspective container for the
   3D tilt. The child <a> owns the visuals and the rotate transforms, so
   the reveal's translate-in doesn't fight the hover tilt. */
.service-card {
  position: relative;
  display: block;
  /* Tighter perspective makes the tilt read dramatically instead of flat */
  perspective: 700px;
  perspective-origin: 50% 50%;
}

.service-card__link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  height: 100%;
  background: var(--cream-soft);
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  color: inherit;
  text-decoration: none;
  isolation: isolate;
  transform-style: preserve-3d;
  transform:
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    translateZ(var(--tz, 0px));
  transition:
    transform 220ms var(--ease-out-circ),
    box-shadow var(--dur-base) var(--ease-in-out-quad),
    border-color var(--dur-base) var(--ease-in-out-quad);
  will-change: transform;
}

/* Overlays — a rust-tinted radial wash (clickability affordance) and a
   thin specular sheen that both track the cursor via --mx/--my. */
.service-card__link::before,
.service-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-in-out-quad);
}
.service-card__link::after {
  /* Rust warmth centred on the cursor */
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(158, 60, 14, 0.16),
    rgba(158, 60, 14, 0.06) 55%,
    transparent 78%
  );
  z-index: 1;
}
.service-card__link::before {
  /* Soft diagonal sheen */
  background: linear-gradient(
    135deg,
    transparent 42%,
    rgba(253, 248, 240, 0.32) 50%,
    transparent 58%
  );
  mix-blend-mode: overlay;
  z-index: 2;
}

.service-card__link:hover,
.service-card__link:focus-visible {
  /* Heavier lift-shadow so the tilted card feels truly off the page */
  box-shadow:
    0 18px 40px rgba(42, 27, 16, 0.22),
    0 6px 14px rgba(158, 60, 14, 0.12);
  border-color: rgba(158, 60, 14, 0.32);
}
.service-card__link:hover::after,
.service-card__link:focus-visible::after { opacity: 1; }
.service-card__link:hover::before,
.service-card__link:focus-visible::before { opacity: 1; }

/* Icon and text ride slightly in front of the card plane — amplifies
   the 3D effect without being cartoonish. */
.service-card__icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transform: translateZ(46px);
  filter: drop-shadow(0 7px 9px rgba(42, 27, 16, 0.16));
  transition: transform 260ms var(--ease-out-circ),
              filter 260ms var(--ease-out-circ);
}
.service-card__link:hover .service-card__icon,
.service-card__link:focus-visible .service-card__icon {
  transform: translateZ(68px) scale(1.06) rotate(-1deg);
  filter: drop-shadow(0 12px 14px rgba(42, 27, 16, 0.22));
}
.service-card__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.service-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-transform: none;
  transform: translateZ(30px);
}
.service-card__list {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
  transform: translateZ(14px);
}

/* Touch + reduced-motion fallbacks: keep the rust tint affordance on
   hover/focus, drop the tilt. */
@media (prefers-reduced-motion: reduce), (hover: none) {
  .service-card__link {
    transform: none;
    transition:
      box-shadow var(--dur-base) var(--ease-in-out-quad),
      border-color var(--dur-base) var(--ease-in-out-quad);
  }
  .service-card__icon,
  .service-card__title,
  .service-card__list { transform: none; }
  .service-card__link:hover .service-card__icon,
  .service-card__link:focus-visible .service-card__icon {
    transform: scale(1.04);
  }
}

/* ==========================================================================
   Section 3 — About teaser
   ========================================================================== */
.about-teaser__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: 32px;
  align-items: start;
}
@media (min-width: 900px) {
  .about-teaser__inner {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
  }
}

.about-teaser__lead { align-self: start; }
.about-teaser__brand {
  display: block;
  width: clamp(120px, 16vw, 180px);
  height: auto;
  margin-top: 32px;
  opacity: 0.92;
}

.about-teaser__body p + p { margin-top: 18px; }

.about-teaser__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--neutral-200);
}
.about-teaser__stat-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 44px);
  color: var(--rusty);
  line-height: 1;
}
.about-teaser__stat-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 8px;
}

/* Section 4 — "Why Level Headed / What hiring us looks like" was removed when
   the homepage testimonials section took its place. The ~95 lines of .why-us__*
   selectors here were fully orphaned (no HTML referenced them) and the kitchen
   photos in images/why/ were deleted. Breadcrumb kept so future readers don't
   re-add a now-dead module. */

/* ==========================================================================
   Section 5 — Gallery teaser (interactive image accordion)
   Ported from a React template to vanilla. Hover (desktop) or tap (touch)
   expands a panel; others collapse. Vertical labels on collapsed panels,
   horizontal on the active one.
   ========================================================================== */
.portfolio__layout {
  display: grid;
  gap: 32px;
  align-items: center;
}
@media (min-width: 1024px) {
  .portfolio__layout {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 48px;
  }
}
.portfolio__text .btn--secondary { border-color: var(--ink); }

/* Accordion strip — desktop: fixed-height row of panels */
.portfolio__accordion {
  display: flex;
  gap: 10px;
  height: 420px;
}
@media (min-width: 1024px) {
  .portfolio__accordion { height: 460px; }
}

.portfolio__panel {
  position: relative;
  flex: 0 0 56px;
  height: 100%;
  border: 0;
  padding: 0;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  background: var(--ink);
  transition: flex-basis var(--dur-slow) var(--ease-in-out-circ);
  will-change: flex-basis;
}
.portfolio__panel.is-active { flex-basis: 360px; }

.portfolio__panel picture,
.portfolio__panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.portfolio__panel img {
  transition: transform var(--dur-slow) var(--ease-in-out-circ);
}
.portfolio__panel.is-active img { transform: scale(1.04); }

/* Dark gradient for legibility over photos. Bottom darkening dialed
   back from 0.65 → 0.45 — the label has its own text-shadow, and a
   65% black plate underneath was making the photo near the label
   read as muddy black instead of a real image.                      */
.portfolio__panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.10) 0%,
    rgba(0, 0, 0, 0.10) 40%,
    rgba(0, 0, 0, 0.45) 100%);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-in-out-quad);
}
.portfolio__panel:not(.is-active)::after { opacity: 0.85; }

/* Label — vertical when collapsed, horizontal when active */
.portfolio__label {
  position: absolute;
  color: var(--cream-soft);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: all var(--dur-base) var(--ease-in-out-quad);
}
.portfolio__panel:not(.is-active) .portfolio__label {
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
  transform-origin: center;
}
.portfolio__panel.is-active .portfolio__label {
  bottom: 24px;
  left: 24px;
  font-size: 20px;
}

.portfolio__panel:focus-visible {
  outline: 3px solid var(--rusty);
  outline-offset: 2px;
}

/* Mobile: vertical stack of full-width expand/collapse panels */
@media (max-width: 1023px) {
  .portfolio__accordion {
    flex-direction: column;
    height: auto;
    gap: 8px;
  }
  .portfolio__panel {
    flex: 0 0 72px;
    width: 100%;
    height: 72px;
    transition: height var(--dur-slow) var(--ease-in-out-circ),
                flex-basis var(--dur-slow) var(--ease-in-out-circ);
  }
  .portfolio__panel.is-active {
    flex: 0 0 280px;
    height: 280px;
  }
  .portfolio__panel:not(.is-active) .portfolio__label {
    bottom: 50%;
    left: 24px;
    transform: translateY(50%) rotate(0);
  }
  .portfolio__panel.is-active .portfolio__label {
    bottom: 20px;
    left: 20px;
  }
}

/* ==========================================================================
   Scroll reveal — ported from Brasfield & Gorrie animate() helper.
   Start: element top crosses 85% of viewport (rootMargin -15% at bottom).
   Opacity 0→1 + y 24px→0, 500ms, ease-in-out-circ (quad for opacity).
   Stagger: set style="--i: 0..n" on siblings to delay by --i * 80ms.
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-medium) var(--ease-in-out-quad),
    transform var(--dur-medium) var(--ease-in-out-circ);
  transition-delay: calc(var(--i, 0) * 80ms);
  will-change: opacity, transform;
}
.reveal--left  { transform: translateX(-24px); }
.reveal--right { transform: translateX(24px); }
.reveal--fade  { transform: none; }

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Ken-burns-on-entry for image wrappers: the wrapper fades in
   like any reveal, while the <img> inside scales from 1.5 → 1.
   Ported from B&G's scale: { start: 1.5, end: 1, duration: 0.5, ease: 'circ.out' }. */
.reveal--zoom {
  transform: none;
  transition: opacity var(--dur-medium) var(--ease-out-circ);
}
.reveal--zoom img {
  transform: scale(1.5);
  transition: transform var(--dur-medium) var(--ease-out-circ);
  will-change: transform;
}
.reveal--zoom.is-in img { transform: scale(1); }

/* Cinematic side-entrance: wrapper fades + slides in from the left while the
   inner <img> scales down from 1.08 → 1. Longer 800ms duration lets it feel
   deliberate. Ported from B&G's .animate() helper with x-offset + scale combo. */
.reveal--slide-in-left {
  transform: translateX(-80px);
  transition:
    opacity var(--dur-slow) var(--ease-out-circ),
    transform var(--dur-slow) var(--ease-out-circ);
}
.reveal--slide-in-left img {
  transform: scale(1.08);
  transition: transform var(--dur-slow) var(--ease-out-circ);
  will-change: transform;
}
.reveal--slide-in-left.is-in { transform: translateX(0); }
.reveal--slide-in-left.is-in img { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .reveal--zoom img,
  .reveal--slide-in-left,
  .reveal--slide-in-left img {
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   Section 7 — FAQ accordion (cream-soft body, rusty as accent)
   Vanilla port of the Radix plus→minus pattern using <details>.
   CSS-only animation via grid-template-rows 0fr→1fr.
   ========================================================================== */
.faq__inner {
  display: grid;
  gap: 48px;
}
@media (min-width: 900px) {
  .faq__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 80px;
    align-items: start;
  }
}

.faq__heading h2 {
  max-width: 13ch;
  line-height: 1.05;
}
.faq__heading p {
  margin-top: 20px;
  max-width: 32ch;
  font-size: 16px;
  color: var(--ink-soft);
}
.faq__heading a {
  color: var(--rusty);
  text-decoration: none;
  border-bottom: 1px solid rgba(158, 60, 14, 0.35);
  transition: border-color var(--dur-base) var(--ease-in-out-quad);
}
.faq__heading a:hover { border-bottom-color: var(--rusty); }

.faq__list { display: grid; }

.faq__item {
  border-top: 1px solid rgba(158, 60, 14, 0.22);
}
.faq__item:last-child {
  border-bottom: 1px solid rgba(158, 60, 14, 0.22);
}

/* Question button — clickable row */
.faq__q {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 16px;
  padding: 22px 4px;
  margin: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.35;
  color: var(--ink);
  transition: color var(--dur-base) var(--ease-in-out-quad);
  -webkit-appearance: none;
  appearance: none;
}
.faq__q:hover { color: var(--rusty); }
.faq__q:focus-visible {
  outline: 2px solid var(--rusty);
  outline-offset: 4px;
  border-radius: 4px;
}
.faq__q-text { flex: 1; }

/* Plus → minus icon (vertical stroke rotates 90° + fades) */
.faq__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(158, 60, 14, 0.10);
  color: var(--rusty);
  flex: none;
  transition: background var(--dur-base) var(--ease-in-out-quad),
              color var(--dur-base) var(--ease-in-out-quad);
}
.faq__icon svg { width: 18px; height: 18px; }
.faq__icon-v {
  transform-origin: center;
  transform-box: fill-box;
  transition: transform 0.28s var(--ease-in-out-quad),
              opacity 0.2s var(--ease-in-out-quad);
}
.faq__item.is-open .faq__icon { background: var(--rusty); color: var(--cream-soft); }
.faq__item.is-open .faq__icon-v { transform: rotate(90deg); opacity: 0; }

/* Answer body — JS-driven explicit-height animation (Radix pattern).
   Starts collapsed; JS measures scrollHeight and animates height 0 ↔ px value.
   After the open transition, JS sets height:auto so content reflows cleanly. */
.faq__body {
  height: 0;
  overflow: hidden;
  transition: height 0.32s var(--ease-in-out-quad);
  will-change: height;
}
.faq__body-inner {
  /* subtle fade-in on reveal — runs alongside height expansion */
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.24s var(--ease-in-out-quad) 0.04s,
              transform 0.24s var(--ease-in-out-quad) 0.04s;
}
.faq__item.is-open .faq__body-inner {
  opacity: 1;
  transform: translateY(0);
}
.faq__body p {
  margin: 0;
  padding: 0 0 24px 52px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 56ch;
}
.faq__body a {
  color: var(--rusty);
  text-decoration: none;
  border-bottom: 1px solid rgba(158, 60, 14, 0.35);
}
.faq__body a:hover { border-bottom-color: var(--rusty); }

@media (max-width: 639px) {
  .faq__q { font-size: 15.5px; padding: 18px 2px; }
  .faq__body p { padding-left: 48px; font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .faq__body,
  .faq__body-inner,
  .faq__icon-v,
  .faq__icon { transition: none; }
}

/* ==========================================================================
   Section 6 — Service area
   ========================================================================== */
.service-area__inner {
  display: grid;
  gap: 40px;
  align-items: stretch;
}
@media (min-width: 900px) {
  .service-area__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 56px;
    align-items: center;
  }
}

.service-area__copy p {
  color: var(--ink-soft);
  max-width: 48ch;
}

.service-area__meta {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--neutral-200);
  display: grid;
  gap: 18px;
}
.service-area__meta > div { display: grid; gap: 4px; }
.service-area__meta dt {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rusty);
}
.service-area__meta dd {
  margin: 0;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.5;
}
.service-area__meta a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--neutral-300);
  transition: border-color var(--dur-base) var(--ease-in-out-quad);
}
.service-area__meta a:hover { border-bottom-color: var(--rusty); }

.service-area__map {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 48px rgba(42, 27, 16, 0.18);
  aspect-ratio: 4 / 3;
  background: var(--neutral-200);
}
@media (min-width: 900px) {
  .service-area__map { aspect-ratio: 5 / 4; }
}
.service-area__map iframe,
.service-area__map-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.service-area__map-canvas {
  background: var(--neutral-200);
  object-fit: cover;
  z-index: 1;
}
/* Float the "Open in Google Maps" pill above Leaflet tiles + controls. */
.service-area__map-link {
  z-index: 500;
}
/* Tone the default Leaflet zoom control to match the warm palette. */
.service-area__map .leaflet-control-zoom a {
  background: var(--cream-soft, #f5ead4);
  color: var(--ink, #2a1b10);
  border-color: rgba(42, 27, 16, 0.18);
}
.service-area__map .leaflet-control-zoom a:hover {
  background: #fff;
}
.service-area__map .leaflet-control-attribution {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.78);
}
.service-area__map-link {
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: var(--ink);
  color: var(--cream-soft);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  transition: transform var(--dur-base) var(--ease-in-out-quad),
              background var(--dur-base) var(--ease-in-out-quad);
}
.service-area__map-link:hover {
  transform: translateY(-1px);
  background: var(--rusty);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Section 9 — Contact (legacy .contact__* + .reveal--card module) was
   removed in the launch polish pass. The homepage now uses the Formspree
   .lhc-* contact-form module (see css/contact-form.css), which made the
   ~308 lines of selectors here (#contact.section, .contact__inner / __lead
   / __form / __field / __channels, .reveal--card + @keyframes
   contact-cta-pulse) fully orphaned. Removed wholesale; no HTML or JS
   referenced any of these classes. Keep this comment as a breadcrumb so
   future readers don't try to re-add a now-dead module. */

/* ==========================================================================
   Section 10 — Footer
   The color climax. Full-bleed rusty brown, cream text. Brand column with
   a large mascot logo anchors the left; three nav columns sit to the right;
   a hairline divider separates from the bottom credits.
   ========================================================================== */
.site-footer {
  background: var(--rusty);
  color: var(--cream-soft);
  padding: 40px 0 20px;
  position: relative;
}
/* Subtle inner highlight at the top to prevent a hard break from the
   section above — pulls the rust up into the contact section visually. */
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(253, 248, 240, 0.18) 30%,
    rgba(253, 248, 240, 0.18) 70%,
    transparent 100%);
}
@media (min-width: 768px) {
  .site-footer { padding: 56px 0 24px; }
}

.site-footer__top {
  display: grid;
  gap: 32px;
  align-items: center;
}
@media (min-width: 900px) {
  .site-footer__top {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 56px;
  }
}

/* ---------- Brand column ---------- */
/* The brand block is now an <a> linking to home (mirrors the header
   wordmark behavior). Reset link styling so it visually matches the
   old <div> exactly, then layer a quiet hover lift on top so it
   reads as interactive without shouting. */
.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-base) var(--ease-in-out-quad);
}
.site-footer__brand:hover,
.site-footer__brand:focus-visible {
  transform: translateY(-2px);
}
.site-footer__brand:focus-visible {
  outline: 2px solid var(--cream-soft);
  outline-offset: 4px;
  border-radius: 4px;
}
/* Lift the mascot a touch on hover to echo the header wordmark's
   tiny interaction signal. */
.site-footer__brand:hover .site-footer__logo,
.site-footer__brand:focus-visible .site-footer__logo {
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.28));
}

.site-footer__logo {
  width: 110px;
  height: auto;
  display: block;
  /* A faint drop-shadow lifts the mascot from the rust plane */
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.22));
  transition: filter var(--dur-base) var(--ease-in-out-quad);
}
@media (min-width: 900px) {
  .site-footer__logo { width: 130px; }
}
.site-footer__brand-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.site-footer__wordmark {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cream-soft);
}
.site-footer__wordmark > span {
  display: block;
  font-size: clamp(20px, 2vw, 24px);
}
.site-footer__tagline {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(253, 248, 240, 0.7);
  max-width: 36ch;
}

/* ---------- Nav / Contact columns ---------- */
.site-footer__nav {
  display: grid;
  gap: 28px;
}
@media (min-width: 560px) {
  .site-footer__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }
}

.site-footer__col h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(253, 248, 240, 0.58);
}
.site-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.site-footer__col li {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--cream-soft);
}
.site-footer__col a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color var(--dur-base) var(--ease-in-out-quad),
              color var(--dur-base) var(--ease-in-out-quad);
}
.site-footer__col a:hover,
.site-footer__col a:focus-visible {
  border-bottom-color: rgba(253, 248, 240, 0.65);
}
.site-footer__see-all {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(253, 248, 240, 0.8) !important;
  margin-top: 6px;
}
.site-footer__see-all:hover {
  color: var(--cream-soft) !important;
}

/* ---------- Divider ---------- */
.site-footer__divider {
  height: 1px;
  background: rgba(253, 248, 240, 0.16);
  margin: 32px 0 16px;
}
@media (max-width: 767px) {
  .site-footer__divider { margin: 24px 0 14px; }
}

/* ---------- Bottom bar ---------- */
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
}
.site-footer__copy {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(253, 248, 240, 0.55);
  letter-spacing: 0.02em;
}
/* "Website designed by REGAL Designs" — very small per request */
.site-footer__credit {
  margin: 0;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(253, 248, 240, 0.4);
}
@media (max-width: 639px) {
  .site-footer__bottom { justify-content: flex-start; }
  .site-footer__copy { font-size: 11.5px; }
}

/* ---- services.css ---- */
/* ==========================================================================
   Level Headed Construction — services.css
   Page-specific styles for /services.html.

   Layout:
     1. Hero band (full-bleed dark, color/type only, no photo)
     2. Intro band (one paragraph framing the page)
     3. Five alternating service rows (image left/right with copy opposite)
     4. Process band (3-step "How it works" on raised cream panel)
     5. Final CTA band (soft, two buttons)
     6. Footer (minimal — first page on the site to get one)

   Reuses everything from base/components/sections. Only the per-page
   choreography lives here.
   ========================================================================== */

/* Parallax pairing: every direct sibling after the hero sits ABOVE it
   in stacking order so they cover the hero as the page scrolls. The
   hero itself is translated downward at half scroll speed by JS — this
   creates the "hero scrolls slower than the rest" effect, with the
   cream divider being the first thing to glide over the dark band.

   Each sibling gets an explicit cream-soft background so it actually
   covers the hero (the default body bg shows through transparent
   sections by default, which would let the dark hero leak through).
   Sections with their own explicit bg (.section--cream, the divider,
   any dark CTA) override this via more-specific rules.              */
.services-hero ~ * {
  position: relative;
  z-index: 2;
  background-color: var(--cream-soft);
}

/* Honor reduced-motion: skip parallax. The JS bails out for matching
   users; this rule resets any transform that may have been applied
   before the listener attached.                                       */
@media (prefers-reduced-motion: reduce) {
  .services-hero { transform: none !important; }
}

/* ==========================================================================
   1. HERO
   Full-bleed --ink band. Compact (~45vh desktop, ~38vh mobile). Centered
   content stack: eyebrow → thin rust rule → display title → tagline.

   Entrance choreography mirrors the homepage hero's pacing but trimmed —
   no image, no nav, no CTAs to animate. Just the type cascade.
   ========================================================================== */
.services-hero {
  position: relative;
  /* Parallax stacking: hero sits at z:0 and is translated by JS at half
     scroll speed; every sibling after it (cream divider + intro band +
     service rows + cta + footer) gets z:2 below, so they paint OVER
     the hero as they scroll up — the page covers the hero instead of
     scrolling alongside it.                                           */
  z-index: 0;
  will-change: transform;
  /* Vertical gradient from --ink at the top to a warmer medium-brown
     at the bottom. Bridges into the cream content below more naturally
     than a flat dark band, and makes the warm bottom-glow from the
     ::after radial blend in instead of fight against a flat fill.    */
  background: linear-gradient(
    180deg,
    var(--ink) 0%,
    #3D2418 50%,
    #5A3520 100%
  );
  color: var(--cream-soft);
  /* Top padding accounts for the fixed header; bottom is generous so the
     band has air. */
  padding: 140px var(--gutter) 80px;
  min-height: 38vh;
  min-height: 38svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
@media (min-width: 768px) {
  .services-hero {
    padding: 180px var(--gutter) 110px;
    min-height: 45vh;
    min-height: 45svh;
  }
}

/* Subtle warm glow from the bottom-left so the dark band doesn't read as
   completely flat. Pure CSS, GPU-cheap. */
.services-hero::after {
  content: '';
  position: absolute;
  inset: auto -10% -40% -10%;
  height: 60%;
  background: radial-gradient(
    ellipse at 20% 100%,
    rgba(168, 85, 46, 0.22) 0%,
    rgba(168, 85, 46, 0.10) 35%,
    rgba(168, 85, 46, 0)    70%
  );
  pointer-events: none;
}

.services-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
  /* Centered stack to match the About hero's identity treatment —
     eyebrow → rule → big stacked title → minimal tagline → scroll cue. */
  text-align: center;
}

/* Pre-state pinned at parse: every animated child starts hidden + offset.
   .is-entering (added on requestAnimationFrame by the inline script in
   services.html) flips them through their keyframes. */
.services-hero__eyebrow,
.services-hero__rule,
.services-hero__title,
.services-hero__tagline,
.services-hero__cue {
  opacity: 0;
}

.services-hero__eyebrow {
  display: inline-block;
  color: var(--cream);
  transform: translateY(8px);
}

/* Thin rust accent — centered now that the hero stack is center-aligned.
   Sweeps in from the center using a horizontal scale. */
.services-hero__rule {
  display: block;
  width: 64px;
  height: 2px;
  background: var(--rusty);
  margin: 16px auto 24px;
  transform: scaleX(0);
  transform-origin: center;
}

.services-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  /* Match the homepage hero title — same clamp, cream face with the
     5-step ink extrusion + soft cast so all hero titles read as one
     family across the site. */
  font-size: clamp(48px, 11vw, 128px);
  line-height: 0.92;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0 0 22px;
  transform: translateY(16px);
  text-shadow:
    1px 1px 0 var(--ink),
    2px 2px 0 var(--ink),
    3px 3px 0 var(--ink),
    4px 4px 0 var(--ink),
    5px 5px 0 var(--ink),
    7px 9px 12px rgba(0, 0, 0, 0.45);
}
/* Accent words inside the hero title render in plain Oswald — the
   global .title__accent (italic Playfair rust) is reserved for body
   contexts where the contrast carries meaning. */
.services-hero__title .title__accent {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
  font-size: 1em;
  text-transform: inherit;
}

.services-hero__tagline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 1.55vw, 19px);
  line-height: 1.55;
  color: rgba(251, 248, 241, 0.82);
  max-width: 600px;
  margin: 0 auto;
  transform: translateY(12px);
}

/* Smaller "scroll down" cue under the tagline — same treatment as the
   About hero so the two pages feel like part of the same design system.
   Muted color, smaller scale, slight letter-spacing, downward chevron
   appended via ::after.                                               */
.services-hero__cue {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(12px, 1.05vw, 14px);
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: rgba(251, 248, 241, 0.55);
  max-width: 520px;
  margin: 14px auto 0;
  transform: translateY(12px);
}
.services-hero__cue::after {
  content: " \2193"; /* ↓ */
  display: inline-block;
  margin-left: 6px;
  transform: translateY(1px);
  color: rgba(251, 248, 241, 0.45);
}

/* Entrance — fires when JS adds .is-entering on the next frame. */
.services-hero.is-entering .services-hero__eyebrow {
  animation: svcHeroFadeUp 600ms cubic-bezier(0, 0.55, 0.45, 1) 100ms both;
}
.services-hero.is-entering .services-hero__rule {
  animation: svcHeroSweep 700ms cubic-bezier(0.85, 0, 0.15, 1) 250ms both;
}
.services-hero.is-entering .services-hero__title {
  animation: svcHeroFadeUp 700ms cubic-bezier(0, 0.55, 0.45, 1) 350ms both;
}
.services-hero.is-entering .services-hero__tagline {
  animation: svcHeroFadeUp 600ms cubic-bezier(0, 0.55, 0.45, 1) 700ms both;
}
.services-hero.is-entering .services-hero__cue {
  animation: svcHeroFadeUp 600ms cubic-bezier(0, 0.55, 0.45, 1) 900ms both;
}

@keyframes svcHeroFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes svcHeroSweep {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}

/* ==========================================================================
   2. SERVICES DIVIDER
   Thin cream strip between the hero and the intro band — pure visual
   separator, no content.
   ========================================================================== */
.services-divider {
  height: 18px;
  background: var(--cream);
}

/* ==========================================================================
   3. INTRO BAND
   Tighter top padding so it reads as a continuation of the hero, not
   a fresh section.
   ========================================================================== */
.services-intro {
  padding-top: 64px;
  padding-bottom: 32px;
}
@media (min-width: 768px) {
  .services-intro {
    padding-top: 88px;
    padding-bottom: 40px;
  }
}
/* Section-head margin-bottom is too generous for an intro band that has
   no content beneath it inside the same section — pull it back. */
.services-intro .section-head {
  margin-bottom: 0;
}

/* ==========================================================================
   3. SERVICE ROWS
   Two-column grid on desktop (image | copy), stacks on mobile (image always
   above copy regardless of left/right desktop order). Even-indexed rows
   flip the grid via .service-row--reverse so the image alternates sides.
   ========================================================================== */

/* Tighten the per-row vertical padding — five rows with full section padding
   would read as a long page; we want a tighter rhythm. */
.service-row {
  padding-top: 56px;
  padding-bottom: 56px;
}
@media (min-width: 768px) {
  .service-row {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

.service-row__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
@media (min-width: 900px) {
  .service-row__grid {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
}
@media (min-width: 1200px) {
  .service-row__grid {
    gap: 96px;
  }
}

/* Reversed rows flip the column order on desktop. Mobile keeps image first. */
@media (min-width: 900px) {
  .service-row--reverse .service-row__grid {
    direction: rtl;
  }
  .service-row--reverse .service-row__grid > * {
    direction: ltr;
  }
}

/* ---- Media column ---- */
.service-row__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(42, 27, 16, 0.08),
    0 16px 40px rgba(42, 27, 16, 0.12);
  /* 3:2 aspect on the photo container so layout is stable before the image
     loads (no CLS) and so all five rows feel uniform. */
  aspect-ratio: 3 / 2;
}
.service-row__media picture,
.service-row__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Per-row aspect-ratio overrides — for rows whose source photos are
   served uncropped (per client direction), match the container's
   aspect-ratio to the image's natural ratio so object-fit: cover has
   no work to do and no horizontal trim happens. Slight height deltas
   between rows are acceptable in exchange for preserving the source. */
#remodels-interior .service-row__media {
  aspect-ratio: 1500 / 934;
}
#openings-framing .service-row__media {
  aspect-ratio: 1500 / 1108;
}
#electrical-plumbing .service-row__media {
  aspect-ratio: 1500 / 1125;
}

/* ---- Copy column ---- */
.service-row__copy {
  /* Constrain the reading width so paragraphs don't get too wide on
     ultra-wide screens. */
  max-width: 540px;
}

.service-row__index {
  display: block;
  margin-bottom: 14px;
  /* Slightly muted vs. default eyebrow rusty — the row's heading is the
     star of the row, not the index. */
  color: rgba(158, 60, 14, 0.85);
}

.service-row__copy h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 20px;
}

.service-row__copy p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 24px;
  max-width: 520px;
}

/* "What this covers" mini-label above the list */
.service-row__list-label {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--neutral-500) !important;
  margin: 0 0 12px !important;
}

/* Stacked link list — only the services with a dedicated page are listed,
   each as a row with an underline rule so it reads as navigable. A muted
   "and more" line closes the stack. Replaces the old pill-chip treatment. */
.service-row__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 340px;
}
.service-row__list li {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
/* Linked services — stacked rows divided by a hairline rule, with a rust
   arrow that slides in on hover so they clearly read as page links. */
.service-row__list li:has(a) {
  border-bottom: 1px solid rgba(42, 27, 16, 0.16);
}
.service-row__list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 2px;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-in-out-quad),
              padding-left var(--dur-fast) var(--ease-in-out-quad);
}
.service-row__list li a::after {
  content: "\2192"; /* → */
  color: var(--rusty);
  font-weight: 700;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--dur-fast) var(--ease-in-out-quad),
              transform var(--dur-fast) var(--ease-in-out-quad);
}
.service-row__list li a:hover,
.service-row__list li a:focus-visible {
  color: var(--rusty);
  padding-left: 8px;
}
.service-row__list li a:hover::after,
.service-row__list li a:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}
/* Non-linked rows — the closing "and more" line (and any service we offer
   that doesn't have its own page yet). Muted, no rule, reads as not clickable. */
.service-row__list li:not(:has(a)) {
  padding: 12px 2px 0;
  font-weight: 500;
  font-style: italic;
  color: var(--neutral-500);
}

/* ==========================================================================
   3b. ONE-STOP SHOP BAND
   Dark statement section between the service rows and the process band.
   Reuses the global .section--ink variant (dark bg, cream-soft text) and
   layers a 3-up check list + closer line on top. The parallax-pairing
   rule at the top of this file forces every hero sibling to cream-soft —
   we override its background-color here so the dark band actually paints
   dark.
   ========================================================================== */

/* Win the cascade against .services-hero ~ * { background-color: cream-soft }
   set above. Specificity (0,2,0) > (0,1,0). */
.services-hero ~ .services-one-stop {
  background-color: var(--ink);
}

.services-one-stop {
  position: relative;
  overflow: hidden;
  /* Full-bleed: drop the panel radius/shadow so the section reads as a
     horizontal band (like the hero) rather than a floating card. */
  border-radius: 0;
  box-shadow: none;
  padding-top: 88px;
  padding-bottom: 88px;
}
@media (min-width: 768px) {
  .services-one-stop {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

/* Soft warm radial glow in the bottom-right — same warm-corner treatment
   as the hero so the two dark bands on the page share a visual language. */
.services-one-stop::after {
  content: '';
  position: absolute;
  inset: auto -10% -30% -10%;
  height: 60%;
  background: radial-gradient(
    ellipse at 80% 100%,
    rgba(168, 85, 46, 0.22) 0%,
    rgba(168, 85, 46, 0.10) 35%,
    rgba(168, 85, 46, 0)    70%
  );
  pointer-events: none;
}

/* ---- Head ---- */
.services-one-stop__head {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
@media (min-width: 768px) {
  .services-one-stop__head {
    margin-bottom: 80px;
  }
}
.services-one-stop__head .eyebrow {
  display: block;
  margin-bottom: 14px;
}
.services-one-stop__head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 6vw, 72px);
  line-height: 1;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0 0 22px;
}
/* Match the hero-title behavior — .title__accent renders in Oswald rust
   instead of italic Playfair so the band feels like a continuation of
   the hero typography. */
.services-one-stop__head h2 .title__accent {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
  font-size: 1em;
  text-transform: inherit;
  color: var(--rusty);
}
.services-one-stop__lede {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.55vw, 19px);
  line-height: 1.6;
  color: rgba(251, 248, 241, 0.82);
  margin: 0 auto;
  max-width: 600px;
}

/* ---- Three-up check list ---- */
.services-one-stop__list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: 1080px;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .services-one-stop__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}
@media (min-width: 1100px) {
  .services-one-stop__list {
    gap: 56px;
  }
}

.services-one-stop__item {
  position: relative;
  /* Mobile: icon left of text. Desktop: icon stacks above text. */
  padding-left: 56px;
  min-height: 40px;
}
@media (min-width: 768px) {
  .services-one-stop__item {
    padding-left: 0;
    padding-top: 56px;
    text-align: left;
  }
}

/* Circular check badge — rust-tinted ring with rust glyph. */
.services-one-stop__check {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rusty);
  background: rgba(158, 60, 14, 0.14);
  border: 1.5px solid rgba(158, 60, 14, 0.55);
  border-radius: 50%;
}
.services-one-stop__check svg {
  width: 22px;
  height: 22px;
  display: block;
}
@media (min-width: 768px) {
  .services-one-stop__check {
    width: 48px;
    height: 48px;
  }
  .services-one-stop__check svg {
    width: 26px;
    height: 26px;
  }
}

.services-one-stop__item h3 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: clamp(18px, 1.9vw, 22px) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.005em !important;
  text-transform: uppercase;
  color: var(--cream) !important;
  margin: 0 0 10px !important;
}
.services-one-stop__item p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(251, 248, 241, 0.78);
  margin: 0;
  max-width: none;
}

/* ---- Closer line ---- */
.services-one-stop__close {
  position: relative;
  z-index: 1;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--cream-soft) !important;
  margin: 56px auto 0;
  max-width: 720px;
}
@media (min-width: 768px) {
  .services-one-stop__close {
    margin-top: 80px;
  }
}
.services-one-stop__close-accent {
  color: var(--rusty);
}

/* Stagger the three check items on reveal — uses --i set inline. */
.services-one-stop__item.reveal {
  transition-delay: calc(var(--i, 0) * 120ms);
}

/* ==========================================================================
   4. PROCESS BAND (cream raised panel, 3 steps)
   Horizontal on desktop, stacks on mobile. Big numeric markers, short copy.
   ========================================================================== */
.services-process {
  /* Pull a hair tighter than default --section pad — the band sits between
     two soft sections and we don't want it dominating the page. */
  padding-top: 80px;
  padding-bottom: 80px;
}
@media (min-width: 768px) {
  .services-process {
    padding-top: 112px;
    padding-bottom: 112px;
  }
}

.process {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 768px) {
  .process {
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
  }
}

.process__step {
  position: relative;
  padding-top: 16px;
  border-top: 2px solid var(--ink);
}

.process__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--rusty);
  margin-bottom: 14px;
}

.process__title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: clamp(22px, 2.4vw, 28px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--ink) !important;
  margin: 0 0 12px !important;
}

.process__step p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: none;
}

/* ==========================================================================
   5. FINAL CTA BAND
   Centered, single message + two buttons. Quiet — no rust band, no shouting.
   ========================================================================== */
.services-cta {
  padding-top: 88px;
  padding-bottom: 120px;
}
@media (min-width: 768px) {
  .services-cta {
    padding-top: 120px;
    padding-bottom: 160px;
  }
}

.services-cta__inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.services-cta__inner .eyebrow {
  display: block;
  margin-bottom: 12px;
}
.services-cta__inner h2 {
  margin: 0 0 12px;
  font-size: clamp(28px, 3.6vw, 40px);
  text-transform: uppercase;
  letter-spacing: -0.005em;
}
.services-cta__inner p {
  font-size: 17px;
  color: var(--ink-soft);
  margin: 0 auto 28px;
  max-width: 460px;
}

.services-cta__buttons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ==========================================================================
   6. FOOTER
   Inner-page footer uses the homepage's full layout (defined in
   sections.css) but recolored to the dark --ink band the inner pages
   already used. The override is just the background; everything
   else inherits cleanly because the homepage footer was already
   designed for cream-on-dark.
   ========================================================================== */
.site-footer {
  background: var(--ink);
}

/* ==========================================================================
   REDUCED MOTION
   Flatten every entrance animation. Hero shows finished state immediately.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .services-hero__eyebrow,
  .services-hero__rule,
  .services-hero__title,
  .services-hero__tagline {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}