/* ---- 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; }
}

/* ---- service-detail.css ---- */
/* ==========================================================================
   Level Headed Construction — service-detail.css
   Styles for the dedicated service spoke pages (/services/<slug>.html).
   Reuses the shared system (.section, .btn, .faq, .process, .services-cta);
   this file only adds what those pages need on top: a compact inner hero with
   a breadcrumb, the two-column body (prose + sticky aside), the "what's
   included" checklist, quick-facts card, photo band, and the areas-served row.
   Mobile-first. Animates transform/opacity only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. INNER HERO — compact dark band, left-aligned, with breadcrumb + actions.
   Shares the homepage/services hero color family but is shorter and not
   parallaxed (these are utility pages, not a landing moment).
   -------------------------------------------------------------------------- */
.svc-hero {
  position: relative;
  background: linear-gradient(180deg, var(--ink) 0%, #3D2418 55%, #5A3520 100%);
  color: var(--cream-soft);
  padding: 120px var(--gutter) 56px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .svc-hero { padding: 160px var(--gutter) 80px; }
}
.svc-hero::after {
  content: '';
  position: absolute;
  inset: auto -10% -40% -10%;
  height: 60%;
  background: radial-gradient(ellipse at 22% 100%,
    rgba(168, 85, 46, 0.22) 0%, rgba(168, 85, 46, 0.08) 38%, rgba(168, 85, 46, 0) 72%);
  pointer-events: none;
}
.svc-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
}

/* Breadcrumb recolored for the dark hero (overrides components.css defaults) */
.svc-hero .breadcrumb { margin-bottom: 22px; }
.svc-hero .breadcrumb__item { color: rgba(251, 248, 241, 0.6); }
.svc-hero .breadcrumb__item a { color: rgba(251, 248, 241, 0.85); }
.svc-hero .breadcrumb__item a:hover { color: var(--cream); }
.svc-hero .breadcrumb__item:not(:last-child)::after { color: var(--brown); opacity: 0.8; }
.svc-hero .breadcrumb__item[aria-current="page"] { color: var(--cream); }

.svc-hero__eyebrow {
  display: inline-block;
  color: var(--brown);
  margin-bottom: 14px;
}
.svc-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 6.5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0;
  max-width: 16ch;
  text-shadow: 1px 1px 0 var(--ink), 2px 2px 0 var(--ink), 4px 6px 12px rgba(0, 0, 0, 0.4);
}
.svc-hero__tagline {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.6vw, 19px);
  line-height: 1.55;
  color: rgba(251, 248, 241, 0.82);
  max-width: 56ch;
  margin: 20px 0 0;
}
.svc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* The secondary ("Call …") button is the light-on-dark partner here: it sits on
   the dark hero, inside the dark aside CTA card (.svc-card--cta), and on the dark
   .section--ink closing band. The shared .btn--secondary is dark-ink text/border
   (built for light backgrounds), so on these dark surfaces it goes invisible.
   Recolor it to the cream/ghost treatment in every dark context; hover fills
   cream with ink text. One rule fixes every service page. */
.svc-hero .btn--secondary,
.svc-card--cta .btn--secondary,
.section--ink .btn--secondary {
  color: var(--cream);
  border-color: rgba(237, 221, 183, 0.55);
}
.svc-hero .btn--secondary:hover,
.svc-hero .btn--secondary:focus-visible,
.svc-card--cta .btn--secondary:hover,
.svc-card--cta .btn--secondary:focus-visible,
.section--ink .btn--secondary:hover,
.section--ink .btn--secondary:focus-visible {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}

/* Closing CTA band (.section--ink) is dark, but the shared .section-head intro
   paragraph defaults to --ink-soft (dark, for light sections) — invisible here.
   Lift it to soft cream so the subtitle actually reads against the dark band. */
.section--ink .section-head p {
  color: var(--cream-soft);
  opacity: 0.9;
}

/* --------------------------------------------------------------------------
   2. BODY — two columns on desktop: prose (main) + sticky aside.
   -------------------------------------------------------------------------- */
.svc-body__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 940px) {
  .svc-body__grid {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 56px;
    align-items: start;
  }
}
.svc-body__main > * + * { margin-top: 20px; }
.svc-body__main h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.svc-body__main h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 2.2vw, 22px);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin-top: 32px;
}
.svc-body__main p,
.svc-body__main li {
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--ink-soft);
}
.svc-body__main p a {
  color: var(--rusty);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.svc-body__main p a:hover { color: var(--rusty-dark); }
.svc-body__lead {
  font-size: 19px !important;
  line-height: 1.6 !important;
  color: var(--ink) !important;
}

/* "What's included" checklist */
.svc-included {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
@media (min-width: 560px) {
  .svc-included { grid-template-columns: 1fr 1fr; }
}
.svc-included li {
  position: relative;
  padding-left: 30px;
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.svc-included li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--rusty);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EDDDB7' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
  background-size: 13px;
  background-position: center;
  background-repeat: no-repeat;
}
.svc-included__note {
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.svc-included__note a { color: var(--rusty); font-weight: 600; }

/* --------------------------------------------------------------------------
   3. ASIDE — quick-facts + estimate card. Sticky on desktop.
   -------------------------------------------------------------------------- */
.svc-aside {
  display: grid;
  gap: 20px;
}
@media (min-width: 940px) {
  .svc-aside { position: sticky; top: 96px; }
}
.svc-card {
  background: var(--cream-soft);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.svc-card--cta {
  background: var(--ink);
  border-color: rgba(237, 221, 183, 0.14);
  color: var(--cream-soft);
}
.svc-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 14px;
}
.svc-card--cta .svc-card__title { color: var(--cream); }
.svc-facts { list-style: none; margin: 0; padding: 0; }
.svc-facts li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--neutral-200);
}
.svc-facts li:last-child { border-bottom: 0; }
.svc-facts dt, .svc-facts .svc-facts__k { color: var(--ink-soft); opacity: 0.75; }
.svc-facts .svc-facts__v { font-weight: 600; color: var(--ink); text-align: right; }
.svc-card--cta p {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(251, 248, 241, 0.82);
  margin: 0 0 16px;
}
.svc-card--cta .btn { width: 100%; margin-bottom: 10px; }
.svc-card--cta .btn:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   4. PHOTO BAND
   -------------------------------------------------------------------------- */
.svc-media { margin-top: 8px; }
.svc-media picture,
.svc-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}
/* Real project photos pulled from social are small natives (~440–590px). We never
   upscale them; instead we cap the display width *below* the native pixel width so
   the browser always downscales — which keeps them sharp and free of distortion —
   and center them in the column. One modifier per aspect so each renders cleanly. */
.svc-media--portrait img, .svc-media--portrait picture { max-width: 400px; margin-inline: auto; }  /* ~443px-wide verticals */
.svc-media--square   img, .svc-media--square picture   { max-width: 460px; margin-inline: auto; }  /* ~590px squares       */
.svc-media--small    img, .svc-media--small picture    { max-width: 560px; margin-inline: auto; }  /* ~590px-wide landscape */
.svc-media figcaption {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  opacity: 0.8;
  margin-top: 10px;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   4b. PHOTO FAN — "held cards" selector. The active photo sits forward and
   upright; the neighbours fan out behind it, angled left and right, like three
   cards held in a hand. JS (data-fan) sets per-card --fx/--fr/--fs + z/opacity;
   CSS only owns the look and the (transform/opacity-only) transition.
   Native social photos are small (~443px wide); each card is sized BELOW its
   native width so the browser always downscales — sharp, never blown up.
   -------------------------------------------------------------------------- */
.svc-fan { margin-top: 8px; }

/* "View Gallery" CTA centered under the fan — more of this work lives there. */
.svc-fan__more {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

.svc-fan__stage {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  /* reserves layout height so neighbours have room to fan without clipping */
  aspect-ratio: 443 / 660;
  /* let the angled side-cards peek beyond the centre card */
  overflow: visible;
}
.svc-fan--portrait .svc-fan__stage { max-width: 480px; aspect-ratio: 443 / 660; }
.svc-fan--square   .svc-fan__stage { max-width: 540px; aspect-ratio: 1 / 1.18; }
.svc-fan--small    .svc-fan__stage { max-width: 600px; aspect-ratio: 590 / 430; }

.svc-fan__deck {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.svc-fan__card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72%;
  margin: 0;
  cursor: pointer;
  transform-origin: 50% 92%;
  transform:
    translate(-50%, -50%)
    translateX(var(--fx, 0))
    rotate(var(--fr, 0deg))
    scale(var(--fs, 1));
  transition: transform 0.52s cubic-bezier(0.22, 0.7, 0.2, 1),
              opacity 0.42s ease;
  will-change: transform, opacity;
  /* No-JS baseline: hide all but the first card so the figure degrades to a
     single clean photo. JS sets opacity inline and takes over once ready. */
  opacity: 0;
}
.svc-fan__card:first-child { opacity: 1; z-index: 30; }
.svc-fan--small .svc-fan__card { width: 66%; }
.svc-fan__card.is-active { cursor: default; }

.svc-fan__card picture,
.svc-fan__card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}
.svc-fan__card img {
  /* cream "mat" + lift so each photo reads as a physical card */
  border: 5px solid var(--cream-soft);
  box-shadow: 0 10px 26px rgba(42, 27, 16, 0.28),
              0 2px 6px rgba(42, 27, 16, 0.18);
  background: var(--cream-soft);
}
.svc-fan__card.is-active img {
  box-shadow: 0 18px 40px rgba(42, 27, 16, 0.34),
              0 4px 10px rgba(42, 27, 16, 0.20);
}

/* Prev / next controls — circular, sit over the lower corners of the stage */
.svc-fan__nav {
  position: absolute;
  bottom: 4%;
  z-index: 40;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--cream);
  background: var(--rusty);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-fast) var(--ease-in-out-quad),
              background var(--dur-fast) var(--ease-in-out-quad);
}
.svc-fan__nav:hover { background: var(--ink); transform: scale(1.08); }
.svc-fan__nav:active { transform: scale(0.96); }
.svc-fan__nav svg { width: 22px; height: 22px; }
.svc-fan__nav--prev { left: -6px; }
.svc-fan__nav--next { right: -6px; }
@media (min-width: 560px) {
  .svc-fan__nav--prev { left: 2%; }
  .svc-fan__nav--next { right: 2%; }
}

/* Caption + dots */
.svc-fan__caption {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  opacity: 0.85;
  margin: 18px auto 0;
  max-width: 46ch;
  text-align: center;
  font-style: italic;
}
.svc-fan__dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 14px;
}
.svc-fan__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: var(--neutral-300, #cbb98f);
  opacity: 0.7;
  transition: transform var(--dur-fast) var(--ease-in-out-quad),
              background var(--dur-fast) var(--ease-in-out-quad),
              opacity var(--dur-fast) var(--ease-in-out-quad);
}
.svc-fan__dot:hover { opacity: 1; }
.svc-fan__dot[aria-selected="true"] {
  background: var(--rusty);
  opacity: 1;
  transform: scale(1.25);
}

/* No-JS / reduced-motion fallbacks */
.svc-fan[data-fan] .svc-fan__nav,
.svc-fan[data-fan] .svc-fan__dots { visibility: hidden; }
.svc-fan.is-ready .svc-fan__nav,
.svc-fan.is-ready .svc-fan__dots { visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .svc-fan__card { transition: none; }
}

/* --------------------------------------------------------------------------
   5. AREAS SERVED — chip row linking toward city pages / service area.
   -------------------------------------------------------------------------- */
.svc-areas__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}
.svc-areas__list li {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--cream-soft);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
}

/* --------------------------------------------------------------------------
   6. RELATED SERVICES — simple link cards back into the cluster.
   -------------------------------------------------------------------------- */
.svc-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 8px;
}
@media (min-width: 620px) {
  .svc-related__grid { grid-template-columns: repeat(3, 1fr); }
}
.svc-related__card {
  display: block;
  background: var(--cream-soft);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  padding: 20px;
  transition: transform var(--dur-fast) var(--ease-in-out-quad),
              box-shadow var(--dur-fast) var(--ease-in-out-quad),
              border-color var(--dur-fast) var(--ease-in-out-quad);
}
.svc-related__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--brown);
}
.svc-related__card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0 0 6px;
}
.svc-related__card p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}