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

/* ---- hero.css ---- */
/* ==========================================================================
   Level Headed Construction — hero.css
   Hero slideshow ported from Brasfield & Gorrie teardown.
   ========================================================================== */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--ink);
  /* Parallax stacking: hero pinned at z:0, every sibling at z:2 (rule
     below) so they paint OVER the hero as the page scrolls. The hero
     translates downward at half scroll speed and the cream divider +
     sections below glide up over it. Same pattern as the inner pages.

     The parallax is driven two ways depending on browser support:
       1. CSS scroll-driven animation (modern browsers) — runs on the
          compositor thread, so it's smooth on mobile AND desktop with
          zero main-thread jitter. See the @supports block below.
       2. JS fallback (inner-page.js) for older browsers WITHOUT
          scroll-driven animation support — desktop only, because the
          JS scroll-listener approach jitters on mobile Safari. */
  z-index: 0;
}
@media (min-width: 1024px) {
  .hero {
    height: min(100svh, 780px);
    /* Promote a layer for the JS-fallback parallax on older desktop
       browsers. (Modern browsers also get will-change via @supports.) */
    will-change: transform;
  }
}

/* ---------- Parallax: CSS scroll-driven animation (preferred) ----------
   The hero slides downward as the page scrolls, at roughly half scroll
   speed, while the sections above it (z-index:2) glide over the top.
   Driven entirely by the browser's compositor via animation-timeline:
   scroll(), so it can't jitter or lag the way a JS scroll listener does
   on mobile Safari. Browsers without support fall back to the JS path
   (desktop) or a static hero (older mobile) — no breakage either way. */
@keyframes heroParallax {
  from { transform: translateY(0); }
  to   { transform: translateY(50%); }
}
@supports (animation-timeline: scroll()) {
  .hero {
    will-change: transform;
    animation: heroParallax linear both;
    /* Tie the animation to the document's vertical scroll. */
    animation-timeline: scroll(root block);
    /* Play it over the first viewport-height of scrolling — i.e. while
       the hero is still on screen. After that it holds (covered by the
       sections above) thanks to fill mode `both`. */
    animation-range: 0 100vh;
  }
  @media (prefers-reduced-motion: reduce) {
    .hero { animation: none; will-change: auto; }
  }
}

/* Cream divider strip directly below the hero — same seam used on
   every inner page (.services-divider, .about-divider, etc.). */
.hero-divider {
  height: 18px;
  background: var(--cream);
}

/* Every sibling after the hero sits above it in stacking order so it
   covers the hero during the parallax scroll. The strip is transparent
   by default — give it a solid bg so the hero doesn't leak through.
   Variant sections (.section--cream, .section--ink) keep their own
   backgrounds via class specificity. */
.hero ~ * {
  position: relative;
  z-index: 2;
}
.hero ~ .strip {
  background: var(--cream-soft);
}

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

/* ---------- Stage (holds all 5 slides) ---------- */
.hero__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* ---------- Slide ---------- */
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: skewX(6deg) scale(1.25) translateX(5%);
  transition:
    opacity var(--dur-medium) var(--ease-in-out-circ),
    transform var(--dur-medium) var(--ease-in-out-circ);
  pointer-events: none;
  will-change: transform, opacity;
}
.hero__slide.is-active {
  opacity: 1;
  transform: skewX(0) scale(1) translateX(0);
  pointer-events: auto;
}
.hero__slide.is-leaving {
  opacity: 0;
  transform: skewX(-6deg) scale(1.25) translateX(-5%);
}

/* ---------- Image ---------- */
.hero__image,
.hero__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Slide 1 (Remodels & Renovations) — image mirrored horizontally per
   client. The transform applies to the <img> only, so it doesn't
   conflict with the slide-level skew/scale used by the crossfade or
   with the boot zoom keyframe (which only runs on slide 0 at first
   paint). */
.hero__slide[data-index="1"] .hero__image img {
  transform: scaleX(-1);
}

/* Per-slide crop focus on mobile — keeps the subject in frame
   when the container goes tall. */
@media (max-width: 767px) {
  .hero__slide[data-index="1"] .hero__image img { object-position: 32% 45%; }
  .hero__slide[data-index="2"] .hero__image img { object-position: 28% 70%; }
  .hero__slide[data-index="3"] .hero__image img { object-position: 12% 50%; }
}

/* Per-slide left-edge gradient — bound to each slide so it crossfades
   and transforms with the photo during slide transitions instead of
   staying static on top of the stage. Sits between the image (default
   stacking) and the content block (z:4) inside each slide.          */
.hero__slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(0, 0, 0, 0.50) 0%,
    rgba(0, 0, 0, 0.32) 18%,
    rgba(0, 0, 0, 0.14) 45%,
    rgba(0, 0, 0, 0) 75%);
  pointer-events: none;
  z-index: 1;
}

/* Top-down brown shade — improves header/wordmark legibility on
   bright/sky slides. Fades out once the header takes its solid background. */
.hero__top-shade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 220px;
  background: linear-gradient(to bottom,
    rgba(42, 27, 16, 0.65) 0%,
    rgba(42, 27, 16, 0.35) 50%,
    rgba(42, 27, 16, 0) 100%);
  pointer-events: none;
  z-index: 2;
  transition: opacity var(--dur-base) var(--ease-in-out-quad);
}
body:has(.site-header.is-stuck) .hero__top-shade {
  opacity: 0;
}

/* ---------- Content (headline + subtext + CTAs) ---------- */
.hero__content {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 120px;
  max-width: 860px;
  z-index: 4;
  opacity: 0;
  transform: translateX(16px);
  transition:
    opacity var(--dur-medium) var(--ease-in-out-quad) 75ms,
    transform var(--dur-medium) var(--ease-in-out-quad) 75ms;
  pointer-events: none;
}
.hero__slide.is-active .hero__content {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.hero__slide.is-leaving .hero__content {
  opacity: 0;
  transform: translateX(-16px);
  transition-delay: 0ms;
}

@media (min-width: 768px) {
  .hero__content { bottom: 140px; }
}
@media (min-width: 1024px) {
  .hero__content { bottom: 160px; }
}

.hero__title {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  /* Min dropped 60px → 48px so the longest single-word title
     (CONSTRUCTION, RENOVATIONS) fits within the mobile content area
     (375px viewport - 48px gutters = 327px) without clipping. The mid
     range (11vw) and max (128px) are unchanged, so desktop sizing is
     identical to the design.                                         */
  font-size: clamp(48px, 11vw, 128px);
  line-height: 0.92;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  /* Cream face from the brand palette (--cream = #EDDDB7) — same warm
     tan used for the wordmark and ghost-CTA labels across the site. */
  color: var(--cream);
  margin-bottom: 20px;
  /* Ink extrusion (--ink = #2A1B10) — the brand's deepest dark, used
     for body text and the dark raised section panels. Five hard offset
     steps build the 3D depth; a wider blurred cast sits behind for
     atmospheric drop. */
  text-shadow:
    1px 1px 0 var(--ink),
    2px 2px 0 var(--ink),
    3px 3px 0 var(--ink),
    4px 4px 0 var(--ink),
    5px 5px 0 var(--ink),
    7px 9px 12px rgba(0, 0, 0, 0.45);
}

/* Thin white rule above every title — same crisp white tilt as the
   subtitle / ghost CTA so the three elements read as one stack. The
   rule lives inside the title's box so it inherits the title's
   fade-in/out timing on slide transitions and the boot.            */
/* The accent above each title — a simple house silhouette in brand
   rust: long triangle roof + rectangular walls + a door cut into the
   bottom-right and a square window cut into the left wall. All drawn
   as one fill-rule:evenodd path so it composites cleanly with a single
   drop-shadow. The path is inlined as a data: URL so no extra request
   and no separate asset file. Same fade-in/out timing as the title.  */
.hero__title::before {
  content: '';
  display: block;
  width: clamp(110px, 12vw, 180px);
  /* House SVG aspect 144:56 ≈ 2.57:1 — wide & low. Roof: full 144 wide,
     32 tall. Walls: inset 16px on each side (112 wide), 24 tall — both
     slimmer and shorter than the roof, so the roof clearly overhangs.
     Window cut into the left wall, door notched out at the bottom.  */
  aspect-ratio: 144 / 56;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 56'><path d='M0 32L72 0L144 32L128 32L128 56L84 56L84 44L62 44L62 56L16 56L16 32L0 32ZM28 36L44 36L44 48L28 48Z' fill='%239E3C0E' fill-rule='evenodd'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* Matches the title's text-shadow: five chained drop-shadows at
     (1px, 1px) each stair-step the rust silhouette to the (5,5)
     corner in ink, then a wider blurred cast lands the form. */
  filter:
    drop-shadow(1px 1px 0 var(--ink))
    drop-shadow(1px 1px 0 var(--ink))
    drop-shadow(1px 1px 0 var(--ink))
    drop-shadow(1px 1px 0 var(--ink))
    drop-shadow(1px 1px 0 var(--ink))
    drop-shadow(7px 9px 12px rgba(0, 0, 0, 0.45));
  margin-bottom: 4px;
}
@media (min-width: 768px) {
  .hero__title::before { margin-bottom: 6px; }
}

.hero__subtitle {
  font-family: var(--font-body);
  /* Bumped 500 -> 600 so the strokes catch more light against bright
     photo zones without feeling chunky. */
  font-weight: 600;
  font-size: clamp(16px, 1.85vw, 21px);
  line-height: 1.45;
  /* Pure white tilt for max brightness against the gradient. */
  color: #FFFCF4;
  max-width: 560px;
  margin-bottom: 36px;
  /* Tight two-step shadow: a crisp 1px drop gives every glyph a sharp
     edge against bright pixels (no blur halo, so it stays clean), then
     a wider soft cast adds ambient depth without compounding into a
     muddy plate the way the old single 8px halo did.                 */
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.75),
    0 2px 10px rgba(0, 0, 0, 0.35);
}

/* Hero CTAs: bold solid pair. Primary is the rust brand color at full
   saturation with a chunky offset shadow (echoes the title's 3D feel);
   secondary is a solid cream block — flips the ghost to a real button
   so both buttons read with equal weight against any photo. */
.hero__ctas .btn--primary {
  /* Brand rust (--rusty = #9E3C0E) — same fill the site-wide primary
     button uses, so the hero CTA is locked to the palette and stays
     consistent with every other primary button on the site. */
  background: var(--rusty);
  color: #FFFCF4;
  border: 2px solid var(--rusty);
  padding: 16px 28px;
  font-size: 15px;
  letter-spacing: 0.04em;
  box-shadow:
    4px 4px 0 rgba(42, 27, 16, 0.85),
    0 8px 22px rgba(0, 0, 0, 0.30);
  transition:
    transform var(--dur-base) var(--ease-out-circ),
    box-shadow var(--dur-base) var(--ease-out-circ),
    background-color var(--dur-base) var(--ease-out-circ);
}
.hero__ctas .btn--primary:hover,
.hero__ctas .btn--primary:focus-visible {
  /* Site-wide hover state: darker rust + bigger offset shadow. */
  background: var(--rusty-dark);
  border-color: var(--rusty-dark);
  transform: translate(-2px, -2px);
  box-shadow:
    6px 6px 0 rgba(42, 27, 16, 0.85),
    0 12px 28px rgba(0, 0, 0, 0.35);
}

.hero__ctas .btn--ghost {
  /* Pure-white-tilt cream so the secondary button reads as bright. */
  background: #FFFCF4;
  color: var(--ink);
  border: 2px solid #FFFCF4;
  padding: 16px 28px;
  font-size: 15px;
  letter-spacing: 0.04em;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    4px 4px 0 rgba(42, 27, 16, 0.85),
    0 8px 22px rgba(0, 0, 0, 0.25);
  transition:
    transform var(--dur-base) var(--ease-out-circ),
    box-shadow var(--dur-base) var(--ease-out-circ),
    background-color var(--dur-base) var(--ease-out-circ);
}
.hero__ctas .btn--ghost:hover,
.hero__ctas .btn--ghost:focus-visible {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--ink);
  transform: translate(-2px, -2px);
  box-shadow:
    6px 6px 0 rgba(42, 27, 16, 0.85),
    0 12px 28px rgba(0, 0, 0, 0.30);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---------- Initial boot animation (first paint only) ----------
   Literal 1:1 port of Brasfield & Gorrie's hero entrance choreography.
   B&G's `avalanche.delay.enter` is treated as 0.5s in our timeline; every
   delay below is computed exactly the way their x-init blocks compute it.

     image       scale 1.5 → 1     0.5s circ.out         delay 0
     image       opacity 0 → 1     0.6s circ.out         delay 0
     nav border  xPercent -101→0   0.8s circ.inOut       delay 0.3s
     title       opacity 0 → 1     0.5s circ.out         delay 0.9s   (= enter+0.4)
     subtitle    opacity 0 → 1     0.5s circ.out         delay 0.9s   (concurrent with title)
     tab #1      yPercent 20 → 0   0.5s circ.out         delay 1.0s
     tab #2..n   same                                    delay 1.0s + 0.05s × index
     pause btn   same                                    delay after last tab
     CTAs        yPercent 10 → 0   0.6s circ.out         delay 1.6s   (= enter+0.4+0.7)

   Class machinery:
     .is-booting   — set in HTML at parse. Pins every animated element in
                     its pre-entrance state so nothing flashes through while
                     the loader curtains are still on top.
     .is-entering  — added by hero.js the moment lheroReady fires (curtains
                     begin pulling apart). This triggers every animation.
     Both stripped together once the full sequence settles. */

/* ---- Pre-state: pinned by .is-booting so nothing peeks past the curtain ---- */
.hero.is-booting .hero__slide.is-active .hero__image img {
  opacity: 0;
  transform: scale(1.5);
}
.hero.is-booting .hero__slide.is-active .hero__title,
.hero.is-booting .hero__slide.is-active .hero__subtitle {
  opacity: 0;
}
.hero.is-booting .hero__slide.is-active .hero__ctas {
  opacity: 0;
  transform: translateY(10%);
}
.hero.is-booting .hero__slide.is-active .hero__content {
  /* Suppress the per-active transition rules so each child animates on its own */
  transition: none;
}
.hero.is-booting .hero__nav::before {
  transform: translateX(-101%);
}
.hero.is-booting .hero__tab,
.hero.is-booting .hero__pauseplay {
  opacity: 0;
  transform: translateY(20%);
}

/* ---- Image: scale-down + fade-up (concurrent, two timing functions) ---- */
.hero.is-entering .hero__slide.is-active .hero__image img {
  animation:
    heroBootZoom 500ms cubic-bezier(0, 0.55, 0.45, 1) both,
    heroBootFade 600ms cubic-bezier(0, 0.55, 0.45, 1) both;
}
@keyframes heroBootZoom {
  from { transform: scale(1.5); }
  to   { transform: scale(1); }
}
@keyframes heroBootFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- Title + subtitle: simple fadeIn at delay 0.9s (matches B&G h2/p) ---- */
.hero.is-entering .hero__slide.is-active .hero__title,
.hero.is-entering .hero__slide.is-active .hero__subtitle {
  animation: heroBootFadeIn 500ms cubic-bezier(0, 0.55, 0.45, 1) 900ms both;
  transition: none;
}
@keyframes heroBootFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- CTAs: yPercent 10→0 + fade at delay 1.6s (matches B&G CTA block) ---- */
.hero.is-entering .hero__slide.is-active .hero__ctas {
  animation: heroBootRise 600ms cubic-bezier(0, 0.55, 0.45, 1) 1600ms both;
  transition: none;
}
@keyframes heroBootRise {
  from { opacity: 0; transform: translateY(10%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Bottom nav: top border line sweeps in left→right ----
   New ::before establishes a continuous, full-width hairline. The per-tab
   border-top is removed below in favor of this single animated line. */
.hero__nav::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(237, 221, 183, 0.2);
  transform: translateX(0);
  transform-origin: left center;
  z-index: 1;
}
.hero.is-entering .hero__nav::before {
  animation: heroBootSweep 800ms cubic-bezier(0.85, 0, 0.15, 1) 300ms both;
}
@keyframes heroBootSweep {
  from { transform: translateX(-101%); }
  to   { transform: translateX(0); }
}

/* ---- Tab buttons: rise in with 50ms stagger starting at delay 1.0s ----
   B&G: stagger = 0.05, delay = enter + 1.0. We use the same. */
.hero.is-entering .hero__tab,
.hero.is-entering .hero__pauseplay {
  animation: heroBootTabIn 500ms cubic-bezier(0, 0.55, 0.45, 1) 1000ms both;
}
.hero.is-entering .hero__tab:nth-child(1) { animation-delay: 1000ms; }
.hero.is-entering .hero__tab:nth-child(2) { animation-delay: 1050ms; }
.hero.is-entering .hero__tab:nth-child(3) { animation-delay: 1100ms; }
.hero.is-entering .hero__tab:nth-child(4) { animation-delay: 1150ms; }
.hero.is-entering .hero__tab:nth-child(5) { animation-delay: 1200ms; }
.hero.is-entering .hero__pauseplay        { animation-delay: 1250ms; }
@keyframes heroBootTabIn {
  from { opacity: 0; transform: translateY(20%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Nav (tabs + pause) ---------- */
.hero__nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  /* stretch so every tab fills the full nav height identically — prevents
     single-line labels from floating above wrapped ones at narrow widths */
  align-items: stretch;
  gap: 4px;
  padding: 16px var(--gutter);
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

/* Desktop: horizontal text tabs. Labels never wrap — we shrink font size and
   letter-spacing fluidly so the longest label ("Remodels & Renovations")
   still fits in its flex column across the full desktop range. */
.hero__tab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  /* Pad equally on top so the label baseline is identical across all tabs,
     regardless of length. */
  padding: 20px 8px;
  display: flex;
  align-items: flex-start;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(10.5px, 0.95vw, 13px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(237, 221, 183, 0.65);
  text-align: left;
  overflow: hidden;
  transition: color var(--dur-base) var(--ease-in-out-quad);
  /* Top hairline now lives on .hero__nav::before so it can sweep in as a
     single continuous line during the boot animation. */
}
.hero__tab-label {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero__tab:hover { color: var(--cream); }
.hero__tab.is-active { color: var(--cream); }

/* Active-tab underline (sweeps left→right on enter, exits right on leave) */
.hero__tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  /* 4px thick (was 2px). top: -2px so the bar sits centered on the
     nav's top edge — half above, half below — instead of riding low. */
  top: -2px;
  height: 4px;
  background: var(--rusty);
  transform: translateX(-100%);
}
.hero__tab.is-active::after {
  transform: translateX(0);
  transition: transform var(--dur-base) var(--ease-in-out-circ);
}
.hero__tab.is-leaving::after {
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-in-out-circ);
}

/* Pause / play button */
.hero__pauseplay {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--cream);
  margin-left: 8px;
  opacity: 0.7;
  transition: opacity var(--dur-fast) var(--ease-in-out-quad),
              background var(--dur-fast) var(--ease-in-out-quad);
}
.hero__pauseplay:hover,
.hero__pauseplay:focus-visible {
  opacity: 1;
  background: rgba(237, 221, 183, 0.15);
}
.hero__pauseplay svg { width: 16px; height: 16px; }
.hero__pauseplay .icon-play { display: none; }
.hero.is-paused .hero__pauseplay .icon-play { display: block; }
.hero.is-paused .hero__pauseplay .icon-pause { display: none; }

/* ---------- Prev / next arrows ---------- */
.hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  color: var(--cream-soft);
  z-index: 6;
  opacity: 0.7;
  transition: opacity var(--dur-fast) var(--ease-in-out-quad),
              background var(--dur-fast) var(--ease-in-out-quad),
              transform var(--dur-fast) var(--ease-in-out-quad);
}
.hero__arrow svg {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}
.hero__arrow:hover,
.hero__arrow:focus-visible {
  opacity: 1;
  background: rgba(237, 221, 183, 0.15);
}
.hero__arrow--prev { left: 12px; }
.hero__arrow--next { right: 12px; }
.hero__arrow--prev:hover { transform: translateY(-50%) translateX(-2px); }
.hero__arrow--next:hover { transform: translateY(-50%) translateX(2px); }

@media (min-width: 768px) {
  .hero__arrow { width: 56px; height: 56px; }
  .hero__arrow svg { width: 32px; height: 32px; }
  .hero__arrow--prev { left: 20px; }
  .hero__arrow--next { right: 20px; }
}

/* ---------- Mobile & narrow-desktop nav: dots instead of tab labels ----------
   "Remodels & Renovations" is long enough that under ~900px it would truncate
   with ellipsis even at the smallest comfortable font size, so we fall back to
   dots at tablet-and-narrow-laptop widths to keep the nav clean. */
@media (max-width: 899px) {
  .hero__nav {
    justify-content: center;
    gap: 10px;
    padding: 20px var(--gutter);
  }
  .hero__tab {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    padding: 0;
    border: 2px solid rgba(237, 221, 183, 0.6);
    border-radius: 50%;
    background: transparent;
    border-top: 2px solid rgba(237, 221, 183, 0.6);
    transition: background var(--dur-base) var(--ease-in-out-circ),
                border-color var(--dur-base) var(--ease-in-out-circ),
                transform var(--dur-base) var(--ease-in-out-circ);
  }
  .hero__tab::after { display: none; }
  .hero__tab.is-active {
    background: var(--rusty);
    border-color: var(--rusty);
    transform: scale(1.2);
  }
  .hero__tab-label {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .hero__pauseplay {
    position: absolute;
    right: var(--gutter);
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__slide,
  .hero__slide.is-active,
  .hero__slide.is-leaving {
    transform: none !important;
    transition: opacity var(--dur-base) linear !important;
  }
  .hero__content,
  .hero__slide.is-active .hero__content,
  .hero__slide.is-leaving .hero__content {
    transform: none !important;
    transition: opacity var(--dur-base) linear !important;
  }
  .hero.is-booting .hero__slide.is-active .hero__image img,
  .hero.is-booting .hero__slide.is-active .hero__content,
  .hero.is-entering .hero__slide.is-active .hero__image img,
  .hero.is-entering .hero__slide.is-active .hero__content {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

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

/* ---- reviews.css ---- */
/* ==========================================================================
   Level Headed Construction — reviews.css
   Testimonials. Home = 3-card grid (#testimonials, on a dark band).
   (About uses the stagger fan — see css/stagger-testimonials.css.)
   DISPLAY ONLY — no Review/AggregateRating JSON-LD (self-review markup is a
   Google guidelines issue; the live stars come from the GBP / Maps listing).
   Visual stars below are decorative (aria-hidden), not structured data.
   ========================================================================== */

/* ---------- shared pieces ---------- */
.tm-stars {
  color: #E6A52C;
  font-size: 17px;
  letter-spacing: 3px;
  line-height: 1;
}

.tm-card {
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 26px 26px 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: left;
}
.tm-card__quote {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--ink);
  margin: 14px 0 0;
  max-width: none;
}
.tm-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
}
.tm-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}
.tm-byline__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.tm-byline__src {
  display: block;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--neutral-500);
}

/* ---------- Home: heading + rating + 3-card grid ---------- */
.testimonials__head { text-align: center; max-width: 880px; margin: 0 auto; }
.testimonials__head h2 { font-size: clamp(36px, 5.4vw, 60px); line-height: 1.05; }
/* The "5.0" inside the home heading — switch from the italic serif accent to
   the condensed display face, in rust, so it reads as a confident score. */
.tm-score { font-family: var(--font-display); font-weight: 700; font-style: normal; color: var(--rusty); }
.testimonials__rating {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
.testimonials__rating .tm-stars { font-size: 20px; }
.testimonials__rating-text {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--cream-soft);
}
.testimonials__rating-text strong { font-family: var(--font-display); font-weight: 700; }
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 40px;
  align-items: stretch;
}
.testimonials__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  justify-content: center;
  margin-top: 36px;
}
@media (max-width: 880px) {
  .testimonials__grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
}

/* The About-page stagger fan lives in its own stylesheet,
   css/stagger-testimonials.css (a verbatim port of the shadcn component,
   default theme). The rules above style the (now-retired) 3-card grid;
   the home page reuses that same stagger component, integrated below. */

/* ---------- Home: stagger carousel integrated into the dark ink band ----------
   The shadcn component ships with a light translucent "stage" panel
   (bg-muted/30). That reads fine on the About page's light section, but on the
   home page's dark ink section it renders as a muddy grey box floating on the
   band. These overrides are scoped to `.testimonials` (a class only present on
   the home section) so the About page is untouched. We only restyle the wrapper
   chrome — the cards, animation, modal and nav are left exactly as-is. */
.testimonials .stagger-demo {
  margin-top: 44px;
  /* Full-bleed: break out of the section's max-width + gutter so the carousel
     spans the entire viewport width at any screen size, revealing more of the
     fanned cards out toward the edges. `.section__inner` is centred, so this
     offset lands the left edge exactly at the viewport edge regardless of the
     gutter; body{overflow-x:hidden} absorbs any scrollbar-width rounding. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.testimonials .stagger {
  background: transparent;   /* cards float on the ink band, no grey box */
}
/* Carousel colors (cards, centre, stars, nav buttons) are left exactly as the
   About page — only the wrapper's grey "stage" panel is dropped above so the
   cards float on the ink band instead of sitting in a box.

   EXCEPT: the dark `.section--ink` band sets light text on ALL h3/p elements
   (`.section--ink h3` / `.section--ink p`), which bleeds into the cards and
   washes the review text to near-white. The card quote is an <h3> and the
   name/source are <p>s, so re-assert the carousel's own About-page text colors
   here with enough specificity to beat those section rules. */
.testimonials .stagger__quote,
.testimonials .stagger__name { color: inherit; }
.testimonials .stagger__src { color: hsl(var(--muted-foreground)); }
.testimonials .stagger__card.is-center .stagger__src { color: rgba(42, 27, 16, 0.7); }
@media (max-width: 640px) {
  .testimonials .stagger-demo { margin-top: 32px; }
}

/* ---- stagger-testimonials.css ---- */
/* ==========================================================================
   stagger-testimonials.css
   VERBATIM vanilla port of the shadcn "stagger-testimonials" React component.
   This reproduces the component's DEFAULT shadcn theme exactly (light-grey
   stage, near-black "primary" centre card) so it renders pixel-identical to
   the source demo. Branding + real reviews are layered on AFTERWARDS.

   Source mapping (Tailwind/shadcn -> CSS):
     bg-muted/30      -> hsl(var(--muted) / 0.3)        (stage backdrop)
     bg-card / border -> white card, light-grey 2px border
     bg-primary       -> near-black centre card, near-white text
     p-8              -> 32px padding
     transition-all duration-500 ease-in-out
     clip-path        -> 50px chamfer on all corners except bottom-left
     h-14 w-12 img    -> 56x48 rectangular avatar, object-cover object-top
     h3 text-base sm:text-xl font-medium
     p  absolute bottom-8 left-8 right-8 text-sm italic
     nav h-14 w-14 text-2xl, hover bg-primary
   ========================================================================== */

.stagger-demo {
  /* shadcn default (neutral) light theme tokens, reproduced verbatim. */
  --background:          0 0% 100%;
  --foreground:          222.2 84% 4.9%;
  --card:                0 0% 100%;
  --card-foreground:     222.2 84% 4.9%;
  --primary:             222.2 47.4% 11.2%;
  --primary-foreground:  210 40% 98%;
  --muted:               210 40% 96.1%;
  --muted-foreground:    215.4 16.3% 46.9%;
  --border:              214.3 31.8% 91.4%;
  --ring:                222.2 84% 4.9%;

  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

/* The component root: relative, full-width, 600px tall, clipped, muted/30 bg. */
.stagger {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
  background: hsl(var(--muted) / 0.3);
}

/* Stage fills the component so absolutely-positioned cards centre on it. */
.stagger__stage { position: absolute; inset: 0; }

.stagger__card {
  position: absolute;
  left: 50%;
  top: 50%;
  cursor: pointer;
  border: 2px solid hsl(var(--border));
  padding: 32px;
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  /* transition-all duration-500 ease-in-out */
  transition: all 0.5s ease-in-out;
  clip-path: polygon(50px 0%, calc(100% - 50px) 0%, 100% 50px, 100% 100%, calc(100% - 50px) 100%, 50px 100%, 0 100%, 0 0);
}
/* Brand: the front-and-centre card is LHC cream (was shadcn navy/black),
   with ink text so the review stays readable on the light card. */
.stagger__card.is-center {
  z-index: 10;
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}
.stagger__card:not(.is-center) { z-index: 0; }
.stagger__card:not(.is-center):hover { border-color: hsl(var(--primary) / 0.5); }

/* The 45deg bevel reinforcing the clipped top-right corner.
   width = Math.sqrt(5000) px, anchored at right:-2 top:48, origin top-right. */
.stagger__bevel {
  position: absolute;
  display: block;
  right: -2px;
  top: 48px;
  width: 70.71067811865476px;
  height: 2px;
  transform-origin: top right;
  transform: rotate(45deg);
  background: hsl(var(--border));
}

/* Google-style header: avatar on the left, name + source to its right. */
.stagger__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
/* Brand avatars are circular Google-style PFPs. Sized down ~40% from 56px to
   34px so they read at Google's review-avatar scale next to the name. */
.stagger__avatar {
  flex-shrink: 0;
  height: 34px;
  width: 34px;
  border-radius: 50%;
  background: hsl(var(--muted));
  object-fit: cover;
  box-shadow: 2px 2px 0px hsl(var(--background));
}
.stagger__meta { min-width: 0; }
.stagger__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: inherit;
}
.stagger__src {
  margin: 2px 0 0;
  font-size: 12.5px;
  font-style: italic;
  color: hsl(var(--muted-foreground));
}
.stagger__card.is-center .stagger__src { color: rgba(42, 27, 16, 0.7); }

/* 5-star rating row (gold), sits between the avatar and the quote. */
.stagger__stars {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 2px;
  color: #E6A52C;
}

/* h3: text-base sm:text-xl font-medium.
   Real Google reviews run long, so clamp to keep them off the absolute byline
   (the demo's one-liners didn't need this). */
.stagger__quote {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  color: inherit;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
@media (min-width: 640px) {
  .stagger__quote {
    font-size: 20px;
    line-height: 1.4;
    -webkit-line-clamp: 6;
    line-clamp: 6;
  }
}

/* (The bottom byline was replaced by the name/source header beside the avatar.) */

/* nav: absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 */
.stagger__controls {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 20;
}
/* button: h-14 w-14 text-2xl bg-background border-2 border-border,
   hover bg-primary text-primary-foreground, transition-colors */
.stagger__nav {
  display: flex;
  height: 56px;
  width: 56px;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: hsl(var(--background));
  border: 2px solid hsl(var(--border));
  color: hsl(var(--foreground));
  transition: background-color 150ms, color 150ms;
}
.stagger__nav:hover { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.stagger__nav:focus-visible { outline: none; box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)); }
.stagger__nav svg { width: 24px; height: 24px; }

/* "Read full review" cue — only the centred (cream) card shows it. */
.stagger__more { display: none; }
.stagger__card.is-center .stagger__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: absolute;
  left: 32px;
  bottom: 26px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rusty);
}
.stagger__more svg { width: 14px; height: 14px; }

/* Photo-stack cue (top-right of any card with attached photos): the first
   photo on top-left, the rest fanned ~1/4 to the right, "+N" badge for extras.
   pointer-events:none so a click still falls through to the card → opens modal.
   Sits below the 50px chamfered corner so the clip-path doesn't cut it. */
.stagger__stack {
  position: absolute;
  top: 34px;
  right: 24px;
  height: 48px;
  width: calc(48px + (var(--count, 1) - 1) * 12px);
  pointer-events: none;
}
.stagger__stack-thumb {
  position: absolute;
  top: 0;
  width: 48px;
  height: 48px;
  border-radius: 7px;
  overflow: hidden;
  border: 2px solid var(--white);
  background: var(--neutral-200);
  box-shadow: 0 2px 7px rgba(42, 27, 16, 0.28);
}
.stagger__stack-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stagger__stack-more {
  position: absolute;
  right: -5px;
  bottom: -5px;
  z-index: 30;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--rusty);
  color: var(--cream);
  border: 2px solid var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11.5px;
  line-height: 1;
  box-shadow: 0 2px 5px rgba(42, 27, 16, 0.3);
}
@media (max-width: 640px) {
  .stagger__stack { top: 30px; right: 20px; height: 42px; width: calc(42px + (var(--count, 1) - 1) * 12px); }
  .stagger__stack-thumb { width: 42px; height: 42px; }
}

/* ==========================================================================
   Expanded review modal (lightbox). Lives at <body> level (outside the
   .stagger-demo shadcn-token scope), so it uses the brand tokens from :root.
   ========================================================================== */
.rev-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.rev-modal[hidden] { display: none; }

.rev-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(42, 27, 16, 0.66);
  opacity: 0;
  transition: opacity 0.24s ease;
}
.rev-modal.is-open .rev-modal__scrim { opacity: 1; }

.rev-modal__panel {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: 88vh;
  background: var(--cream-soft);
  color: var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(42, 27, 16, 0.45);
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity 0.24s ease, transform 0.24s var(--ease-out-circ);
}
.rev-modal.is-open .rev-modal__panel { opacity: 1; transform: none; }

.rev-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--neutral-200);
  color: var(--ink);
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.rev-modal__close:hover { background: var(--rusty); color: var(--cream); border-color: var(--rusty); }
.rev-modal__close svg { width: 20px; height: 20px; }

.rev-modal__scroll {
  max-height: 88vh;
  overflow-y: auto;
  padding: 36px 36px 32px;
}

.rev-modal__head { display: flex; align-items: center; gap: 12px; }
.rev-modal__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.rev-modal__meta { min-width: 0; }
.rev-modal__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  color: var(--ink);
}
.rev-modal__src { margin: 1px 0 0; font-size: 13px; font-style: italic; color: var(--neutral-500); }

.rev-modal__stars { margin: 14px 0 0; font-size: 17px; letter-spacing: 2px; line-height: 1; color: #E6A52C; }

.rev-modal__quote {
  margin: 14px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: none;
}

.rev-modal__gallery { margin-top: 22px; }
.rev-modal__gallery[hidden] { display: none; }
.rev-modal__stage {
  position: relative;
  background: var(--ink);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Show the whole photo at its natural proportions — no crop, no forced
   full-width letterboxing. The browser scales it to fit max-width + max-height
   while preserving aspect ratio, centred on the stage. */
.rev-modal__photo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 62vh;
  margin: 0 auto;
}
.rev-modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.rev-modal__nav:hover { background: var(--rusty); color: var(--cream); }
.rev-modal__nav--prev { left: 12px; }
.rev-modal__nav--next { right: 12px; }
.rev-modal__nav svg { width: 22px; height: 22px; }

.rev-modal__thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
/* Fixed height, auto width: each preview keeps the photo's real aspect ratio,
   so the strip shows the FULL photo with no cropping. */
.rev-modal__thumb {
  height: 50px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  opacity: 0.6;
  background: var(--neutral-200);
  flex: 0 0 auto;
  transition: opacity var(--dur-fast), border-color var(--dur-fast);
}
.rev-modal__thumb img { height: 100%; width: auto; display: block; }
.rev-modal__thumb:hover { opacity: 1; }
.rev-modal__thumb.is-active { opacity: 1; border-color: var(--rusty); }

@media (max-width: 640px) {
  .rev-modal { padding: 0; }
  .rev-modal__panel { max-width: none; max-height: 100vh; height: 100%; border-radius: 0; }
  .rev-modal__scroll { max-height: 100vh; padding: 28px 20px 24px; }
  .rev-modal__photo { max-height: 52vh; }
  .rev-modal__thumb { height: 44px; }
}

/* ---- contact-form.css ---- */
/* ==========================================================================
   Level Headed Construction — contact-form.css

   Self-contained contact-form module, ported pixel-for-pixel from the
   handoff prototype (level-headed-construction-website-design /
   project / contact.jsx). Used on both /contact.html and on the
   homepage #contact section so the two forms read identically.

   The module owns its own type stack (Anton / Bitter / Inter) and color
   tokens, defined locally on the .lhc-contact wrapper so they don't
   bleed into the rest of the page. Anton + Bitter + Inter must be
   loaded by the host page; the wrapper falls back to system stacks if
   they're not available.

   Layout:
     - Two-column grid at >= 880px: form card on the LEFT, rust side
       panel on the RIGHT.
     - Stacks to a single column below 880px (form first, then panel).
   ========================================================================== */

.lhc-contact {
  /* Module-scoped tokens. Slightly different from the global brand
     palette (the handoff design uses warmer cream + a brighter rust). */
  --lhc-ink:        #1d130f;
  --lhc-cream:      #f5efe4;
  --lhc-cream-2:    #ece4d3;
  --lhc-rust:       #b8470e;
  --lhc-rust-2:     #d05a1c;
  --lhc-rust-soft:  #8a3508;
  --lhc-line-dark:  rgba(36, 23, 18, 0.14);

  background: var(--lhc-cream);
  color: var(--lhc-ink);
  padding: 80px 0 100px;
  font-family: "Bitter", Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

.lhc-contact__container {
  width: min(1200px, calc(100% - 64px));
  margin: 0 auto;
}

.lhc-contact__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: stretch;
}
@media (max-width: 880px) {
  .lhc-contact__grid { grid-template-columns: 1fr; }
}

/* --- Display & label utility classes (scoped to this module) --- */
.lhc-contact .display {
  font-family: "Anton", Impact, sans-serif;
  letter-spacing: 0.01em;
}
.lhc-contact .label {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}


/* ==========================================================================
   1. FORM CARD (LEFT)
   Cream card, rounded 6px, top accent bar (gradient), soft layered
   shadow. Form fields stack vertically with one 1.3:1 row for email +
   phone.
   ========================================================================== */

.lhc-form {
  position: relative;
  background: var(--lhc-cream);
  padding: 40px 44px 36px;
  border-radius: 6px;
  border: 1px solid rgba(29, 19, 15, 0.06);
  box-shadow:
    0 1px 0 rgba(29, 19, 15, 0.04),
    0 12px 32px -16px rgba(29, 19, 15, 0.18),
    0 4px 12px -6px rgba(29, 19, 15, 0.08);
}

/* Top accent bar — rust gradient + soft glow. */
.lhc-form__accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(
    90deg,
    var(--lhc-rust-soft) 0%,
    var(--lhc-rust) 50%,
    var(--lhc-rust-2) 100%);
  border-radius: 6px 6px 0 0;
  box-shadow: 0 1px 4px rgba(184, 71, 14, 0.25);
}

/* --- Field --- */
.lhc-field {
  margin-bottom: 22px;
}
.lhc-field__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.lhc-field__label {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lhc-rust);
}
.lhc-field__optional {
  font-family: "Bitter", Georgia, serif;
  font-style: italic;
  font-size: 12px;
  color: rgba(29, 19, 15, 0.45);
  letter-spacing: 0;
  text-transform: none;
}

/* Email + phone row: 1.3fr / 1fr until it collapses on mobile. */
.lhc-field-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 20px;
}
@media (max-width: 880px) {
  .lhc-field-row { grid-template-columns: 1fr; }
}

/* --- Inputs / textarea / select share the same base. --- */
.lhc-input {
  width: 100%;
  padding: 14px 16px;
  background: var(--lhc-cream);
  border: 1px solid rgba(29, 19, 15, 0.18);
  border-radius: 4px;
  color: var(--lhc-ink);
  font-family: "Bitter", Georgia, serif;
  font-size: 15px;
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    background 0.15s;
}
.lhc-input::placeholder {
  color: rgba(29, 19, 15, 0.5);
}
.lhc-input:focus {
  border-color: var(--lhc-rust);
  box-shadow: 0 0 0 3px rgba(184, 71, 14, 0.12);
  background: #fffbf3;
}

.lhc-textarea {
  resize: vertical;
  line-height: 1.55;
}

/* Custom select — strip native chrome, add a rust caret on the right. */
.lhc-select-wrap {
  position: relative;
}
.lhc-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  cursor: pointer;
}
/* Show the placeholder option (value="") in muted ink when nothing is
   selected. Browsers with :has() support get this; others fall back to
   normal ink color which is still legible. */
.lhc-select:has(option[value=""]:checked) {
  color: rgba(29, 19, 15, 0.5);
}
.lhc-select__caret {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  pointer-events: none;
}

/* --- Submit row --- */
.lhc-form__submit {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.lhc-form__note {
  font-family: "Bitter", Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(29, 19, 15, 0.55);
}

/* Send button — rust gradient pill with right-arrow that nudges on hover. */
.lhc-send {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border: none;
  border-radius: 4px;
  background: linear-gradient(
    180deg,
    var(--lhc-rust) 0%,
    var(--lhc-rust-soft) 100%);
  color: var(--lhc-cream);
  font-family: "Anton", Impact, sans-serif;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow:
    0 3px 10px -4px rgba(138, 53, 8, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.lhc-send:hover,
.lhc-send:focus-visible {
  background: linear-gradient(
    180deg,
    var(--lhc-rust-2) 0%,
    var(--lhc-rust) 100%);
  box-shadow:
    0 6px 18px -6px rgba(138, 53, 8, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}
.lhc-send__arrow {
  width: 14px;
  height: 14px;
  transition: transform 0.2s;
}
.lhc-send:hover .lhc-send__arrow,
.lhc-send:focus-visible .lhc-send__arrow {
  transform: translateX(2px);
}

/* Attention animation — fires once when the button scrolls into view
   for the first time. JS in the page-bottom Formspree init block adds
   .is-noticed via an IntersectionObserver. The button lifts (gaining a
   chunky drop-shadow so it reads as 3D), wiggles side-to-side a few
   times, then settles back. */
.lhc-send.is-noticed {
  animation: lhcSendAttention 1300ms cubic-bezier(0.34, 1.56, 0.64, 1) 250ms both;
}

@keyframes lhcSendAttention {
  /* Rest */
  0% {
    transform: translateY(0) rotate(0);
    box-shadow:
      0 3px 10px -4px rgba(138, 53, 8, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }
  /* Push out — lift + chunky cast shadow reads as 3D depth */
  18% {
    transform: translateY(-10px) rotate(0);
    box-shadow:
      0 22px 30px -8px rgba(0, 0, 0, 0.35),
      0 8px 16px -4px rgba(138, 53, 8, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.24);
  }
  /* Wiggle left */
  34% {
    transform: translateY(-10px) rotate(-4deg);
    box-shadow:
      0 22px 30px -8px rgba(0, 0, 0, 0.35),
      0 8px 16px -4px rgba(138, 53, 8, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.24);
  }
  /* Wiggle right */
  50% {
    transform: translateY(-10px) rotate(4deg);
    box-shadow:
      0 22px 30px -8px rgba(0, 0, 0, 0.35),
      0 8px 16px -4px rgba(138, 53, 8, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.24);
  }
  /* Wiggle left, smaller */
  66% {
    transform: translateY(-10px) rotate(-2deg);
    box-shadow:
      0 22px 30px -8px rgba(0, 0, 0, 0.35),
      0 8px 16px -4px rgba(138, 53, 8, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.24);
  }
  /* Settle to neutral but still lifted */
  82% {
    transform: translateY(-3px) rotate(0);
    box-shadow:
      0 12px 18px -6px rgba(0, 0, 0, 0.22),
      0 4px 10px -3px rgba(138, 53, 8, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.20);
  }
  /* Rest back at original position */
  100% {
    transform: translateY(0) rotate(0);
    box-shadow:
      0 3px 10px -4px rgba(138, 53, 8, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lhc-send.is-noticed { animation: none; }
}


/* ==========================================================================
   2. SIDE PANEL (RIGHT)
   Rust gradient block with a subtle radial highlight + a faint diagonal
   line texture on top. Display heading where the second line ends in
   an italic Bitter accent ("day."). 1px hairline divider before the
   contact rows.
   ========================================================================== */

.lhc-panel {
  position: relative;
  overflow: hidden;
  padding: 44px 40px;
  border-radius: 6px;
  color: var(--lhc-cream);
  background:
    radial-gradient(circle at 85% 15%,
      rgba(255, 255, 255, 0.06) 0%,
      transparent 50%),
    linear-gradient(155deg,
      var(--lhc-rust) 0%,
      var(--lhc-rust-soft) 100%);
  box-shadow:
    0 12px 32px -16px rgba(138, 53, 8, 0.4),
    0 4px 12px -6px rgba(138, 53, 8, 0.2);
}

/* Subtle texture overlay: dark bottom-left blob + diagonal line tile. */
.lhc-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 80%,
      rgba(0, 0, 0, 0.12) 0%,
      transparent 40%),
    repeating-linear-gradient(45deg,
      rgba(0, 0, 0, 0.025) 0 1px,
      transparent 1px 4px);
  pointer-events: none;
}

.lhc-panel > * {
  position: relative;  /* sit above the ::before texture */
}

.lhc-panel__eyebrow {
  display: block;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 239, 228, 0.85);
  margin-bottom: 18px;
}

.lhc-panel__heading {
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(36px, 4.6vw, 52px);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--lhc-cream);
  margin: 0;
}
.lhc-panel__accent {
  /* Match the surrounding "WE'LL GET BACK" heading — same Anton
     display sans, uppercase, full-cream. Reads as one unified
     headline instead of two-fonts side-by-side. */
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  color: var(--lhc-cream);
  text-transform: inherit;
  letter-spacing: inherit;
}

.lhc-panel__intro {
  margin: 22px 0 36px;
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(245, 239, 228, 0.88);
}

/* Hairline divider between the heading block and the contact rows. */
.lhc-panel__rule {
  height: 1px;
  background: rgba(245, 239, 228, 0.18);
  margin-bottom: 28px;
}

/* --- Contact rows --- */
.lhc-row {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(245, 239, 228, 0.14);
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s;
}
.lhc-row:last-of-type { border-bottom: none; }
a.lhc-row:hover,
a.lhc-row:focus-visible {
  transform: translateX(3px);
}

.lhc-row__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(245, 239, 228, 0.10);
  border: 1px solid rgba(245, 239, 228, 0.22);
  color: var(--lhc-cream);
  transition: background 0.18s;
}
a.lhc-row:hover .lhc-row__icon,
a.lhc-row:focus-visible .lhc-row__icon {
  background: rgba(245, 239, 228, 0.18);
}
.lhc-row__icon svg {
  width: 16px;
  height: 16px;
}

.lhc-row__label {
  display: block;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 239, 228, 0.7);
  margin-bottom: 3px;
}
.lhc-row__value {
  display: block;
  font-family: "Bitter", Georgia, serif;
  font-weight: 600;
  /* Shrink one step on narrow viewports so the longest value
     ("levelheadedconstruction@gmail.com") clears the column at the
     <wbr> break point instead of splitting mid-word. The browser
     prefers the explicit wbr opportunity to a mid-character break,
     but only if "levelheadedconstruction" itself fits on one line.
     At 15px Bitter, 23 chars is just barely too wide for the 175px
     value column on a 375px viewport; at 14px it fits with margin. */
  font-size: 14px;
  color: var(--lhc-cream);
  /* overflow-wrap: anywhere honors <wbr> first and falls back to a
     character break only as a last resort — preferable to the legacy
     word-break: break-word which is too eager to mid-word break. */
  overflow-wrap: anywhere;
}
@media (min-width: 480px) {
  .lhc-row__value { font-size: 15px; }
}

/* ==========================================================================
   Submission states (Formspree SDK populates these via [data-fs-*])
   --------------------------------------------------------------------------
   .lhc-form__success and .lhc-form__error are populated only on
   submit outcome — empty by default, hidden via :empty. Field-level
   errors render below each input via [data-fs-error="<name>"]. The SDK
   also adds aria-invalid="true" to the offending input so we can paint
   the field red.
   ========================================================================== */
.lhc-form__success:empty,
.lhc-form__error:empty,
.lhc-field__error:empty {
  display: none;
}

/* The SDK populates .lhc-form__success with a plain success message —
   we keep it for screen-reader announcement (role="status") but hide
   it visually since .lhc-form__sent below provides the rich animated
   state. The visually-hidden pattern keeps it in the a11y tree.    */
.lhc-form__success:not(:empty) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Sent animation
   --------------------------------------------------------------------------
   When the SDK drops content into [data-fs-success], the inline init
   script on each page adds .is-sent to the form. That hides the form
   fields, error containers, and submit, and reveals .lhc-form__sent
   with a draw-in checkmark followed by a fade-up title + subtitle.
   ========================================================================== */
.lhc-form__sent {
  display: none;
  text-align: center;
  padding: 20px 16px 8px;
}
.lhc-form.is-sent .lhc-form__sent {
  display: block;
}

/* Hide the active form contents once submission is confirmed. */
.lhc-form.is-sent .lhc-field,
.lhc-form.is-sent .lhc-field-row,
.lhc-form.is-sent .lhc-form__submit,
.lhc-form.is-sent .lhc-form__error {
  display: none;
}

/* Checkmark — circle ring draws first, then the tick. */
.lhc-form__check {
  display: block;
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  color: #4A7C3C; /* matches global --success token */
}
.lhc-form__check-ring {
  /* circumference of r=28: 2π·28 ≈ 175.93 */
  stroke-dasharray: 176;
  stroke-dashoffset: 176;
  animation: lhcCheckRing 520ms cubic-bezier(0.65, 0, 0.35, 1) 100ms forwards;
}
.lhc-form__check-tick {
  /* approx path length for "M20 33 L29 42 L46 24" */
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: lhcCheckTick 360ms cubic-bezier(0.65, 0, 0.35, 1) 520ms forwards;
}
@keyframes lhcCheckRing { to { stroke-dashoffset: 0; } }
@keyframes lhcCheckTick { to { stroke-dashoffset: 0; } }

.lhc-form__sent-title {
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(28px, 3vw, 36px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--lhc-ink);
  margin: 0 0 8px;
  opacity: 0;
  animation: lhcSentFadeUp 500ms cubic-bezier(0.16, 1, 0.3, 1) 720ms forwards;
}
.lhc-form__sent-sub {
  font-family: "Bitter", Georgia, serif;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(29, 19, 15, 0.7);
  margin: 0 auto;
  max-width: 360px;
  opacity: 0;
  animation: lhcSentFadeUp 500ms cubic-bezier(0.16, 1, 0.3, 1) 860ms forwards;
}
@keyframes lhcSentFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reduced motion: skip the draw-in and the fade-up, just show the
   finished success state. */
@media (prefers-reduced-motion: reduce) {
  .lhc-form__check-ring,
  .lhc-form__check-tick {
    stroke-dashoffset: 0;
    animation: none;
  }
  .lhc-form__sent-title,
  .lhc-form__sent-sub {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

.lhc-form__error:not(:empty) {
  margin: 0 0 8px;
  padding: 14px 16px;
  background: rgba(184, 71, 14, 0.06);
  border: 1px solid rgba(184, 71, 14, 0.32);
  border-radius: 6px;
  font-family: "Bitter", Georgia, serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--lhc-rust-soft);
}

.lhc-field__error:not(:empty) {
  display: block;
  margin-top: 6px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: var(--lhc-rust-soft);
}

/* Invalid input — paint the border red and add a soft red wash without
   touching the rest of the input styling. */
.lhc-input[aria-invalid="true"] {
  border-color: var(--lhc-rust-soft);
  background: rgba(184, 71, 14, 0.04);
}
.lhc-input[aria-invalid="true"]:focus {
  border-color: var(--lhc-rust-soft);
  box-shadow: 0 0 0 3px rgba(184, 71, 14, 0.16);
}

/* In-flight state — the SDK disables [data-fs-submit-btn] during
   submission and re-enables on completion. */
.lhc-send[disabled],
.lhc-send[aria-disabled="true"] {
  opacity: 0.65;
  cursor: progress;
}