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

/* vietnamese */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/anton-1Ptgg87LROyAm3K8-C8QSw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/anton-1Ptgg87LROyAm3K9-C8QSw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/anton-1Ptgg87LROyAm3Kz-C8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/bitter-rax-HiqOu8IVPmn7erxmJD1img.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/bitter-rax-HiqOu8IVPmn7erxvJD1img.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/bitter-rax-HiqOu8IVPmn7erxkJD1img.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/bitter-rax-HiqOu8IVPmn7erxlJD1img.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/bitter-rax-HiqOu8IVPmn7erxrJD0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/bitter-rax8HiqOu8IVPmn7coxpPDk.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/bitter-rax8HiqOu8IVPmn7e4xpPDk.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/bitter-rax8HiqOu8IVPmn7cIxpPDk.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/bitter-rax8HiqOu8IVPmn7cYxpPDk.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/bitter-rax8HiqOu8IVPmn7f4xp.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/lato-S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/lato-S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/lato-S6u9w4BMUTPHh6UVSwaPGR_p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/lato-S6u9w4BMUTPHh6UVSwiPGQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/oswald-TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlbHYjedg.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/oswald-TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlSHYjedg.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/oswald-TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlZHYjedg.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/oswald-TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlYHYjedg.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/oswald-TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlWHYg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/oswald-TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlbHYjedg.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/oswald-TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlSHYjedg.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/oswald-TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlZHYjedg.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/oswald-TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlYHYjedg.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/oswald-TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlWHYg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/playfairdisplay-nuFkD-vYSZviVYUb_rj3ij__anPXDTnohkk72xU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/playfairdisplay-nuFkD-vYSZviVYUb_rj3ij__anPXDTnojUk72xU.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/playfairdisplay-nuFkD-vYSZviVYUb_rj3ij__anPXDTnojEk72xU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/playfairdisplay-nuFkD-vYSZviVYUb_rj3ij__anPXDTnogkk7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/playfairdisplay-nuFkD-vYSZviVYUb_rj3ij__anPXDTnohkk72xU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/playfairdisplay-nuFkD-vYSZviVYUb_rj3ij__anPXDTnojUk72xU.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/playfairdisplay-nuFkD-vYSZviVYUb_rj3ij__anPXDTnojEk72xU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/playfairdisplay-nuFkD-vYSZviVYUb_rj3ij__anPXDTnogkk7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.faq__list { display: grid; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ---- about.css ---- */
/* =====================================================================
   about.css — page-specific styles for /about.html
   ---------------------------------------------------------------------
   Loaded AFTER base/components/sections so it can override.
   Phases:
     2  hero — interactive spirit level (no photo)
     3  story
     4  values strip
     5  practical info  (removed 2026-04-30)
     7  reviews — empty-state CTA
     8  final CTA
     9  mascot poses (hero, story panel, values cards)
   ===================================================================== */


/* =====================================================================
   PHASE 2 — HERO (interactive spirit level)
   ---------------------------------------------------------------------
   Dark band, no photo. Stack:
     1. Eyebrow → rust rule → display heading → tagline (centered)
     2. The level (HTML/CSS, JS-driven tilt + bubble)
     3. Cursor hint (auto-hides on touch / after first interaction)

   Level metaphor: cursor moves right, level tilts down on the right,
   bubble runs UPHILL to the left — the way a real bubble level reads.
   Touch / reduced-motion gets a calm sine drift instead.
   ===================================================================== */

.about-hero {
  position: relative;
  /* Same dark→warm-brown gradient as the services hero — keeps the
     two inner-page heroes in the same family.                      */
  background: linear-gradient(
    180deg,
    var(--ink) 0%,
    #3D2418 50%,
    #5A3520 100%
  );
  color: var(--cream-soft);
  /* Parallax stacking: hero sits at z:0 and is translated by JS at half
     scroll speed; every sibling section after it (story / values /
     reviews / cta) gets z:2 below, so they paint OVER the hero as
     they scroll up — the page covers the hero instead of scrolling
     alongside it.                                                    */
  z-index: 0;
  will-change: transform;
  /* Top padding accounts for the fixed header. */
  padding: 130px var(--gutter) 90px;
  min-height: 78vh;
  min-height: 78svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 768px) {
  .about-hero {
    padding: 170px var(--gutter) 120px;
    min-height: 86vh;
    min-height: 86svh;
  }
}

/* Each hero-sibling section gets an explicit cream-soft background so
   it actually covers the hero (transparent .section--soft would let
   the dark hero leak through). Sections with their own explicit bg
   (.section--cream, etc.) override this via more-specific rules.    */
.about-hero ~ * {
  position: relative;
  z-index: 2;
  background-color: 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) {
  .about-hero { transform: none !important; }
}

/* Thin cream divider strip between the hero and the story section —
   matches the services page divider so both inner-page heroes hand
   off into the cream content with the same visual seam.            */
.about-divider {
  height: 18px;
  background: var(--cream);
}

/* Same warm rust glow as the services hero — keeps the inner-page hero
   family visually consistent. */
.about-hero::after {
  content: '';
  position: absolute;
  inset: auto -10% -40% -10%;
  height: 60%;
  background: radial-gradient(
    ellipse at 50% 100%,
    rgba(168, 85, 46, 0.22) 0%,
    rgba(168, 85, 46, 0.10) 35%,
    rgba(168, 85, 46, 0)    72%
  );
  pointer-events: none;
  z-index: 0;
}

.about-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}
@media (min-width: 768px) {
  .about-hero__inner { gap: 72px; }
}

/* ---- INTRO COPY STACK ---- */
.about-hero__intro {
  text-align: center;
  max-width: 760px;
}

.about-hero__eyebrow,
.about-hero__rule,
.about-hero__title,
.about-hero__tagline,
.about-hero__cue {
  opacity: 0;
}
.about-hero__eyebrow {
  display: inline-block;
  color: var(--cream);
  transform: translateY(8px);
}
.about-hero__rule {
  display: block;
  width: 64px;
  height: 2px;
  background: var(--rusty);
  margin: 16px auto 28px;
  transform: scaleX(0);
  transform-origin: center;
}
.about-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  /* Match the homepage hero title — same clamp, cream face with the
     5-step ink extrusion + soft cast so all hero titles read as one
     family across the site. */
  font-size: clamp(48px, 11vw, 128px);
  line-height: 0.92;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0 0 22px;
  transform: translateY(16px);
  text-shadow:
    1px 1px 0 var(--ink),
    2px 2px 0 var(--ink),
    3px 3px 0 var(--ink),
    4px 4px 0 var(--ink),
    5px 5px 0 var(--ink),
    7px 9px 12px rgba(0, 0, 0, 0.45);
}
/* Accent words inside the hero title render in plain Oswald. */
.about-hero__title .title__accent {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
  font-size: 1em;
  text-transform: inherit;
}
.about-hero__tagline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 1.55vw, 19px);
  line-height: 1.55;
  color: rgba(251, 248, 241, 0.82);
  max-width: 600px;
  margin: 0 auto;
  transform: translateY(12px);
}

/* Smaller "keep reading" cue under the main tagline. Visually separated:
   muted color, smaller scale, slight letter-spacing, and a downward
   chevron after the text so it reads as a scroll hint, not a second
   sentence of the tagline. */
.about-hero__cue {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(12px, 1.05vw, 14px);
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: rgba(251, 248, 241, 0.55);
  max-width: 520px;
  margin: 14px auto 0;
  opacity: 0;
  transform: translateY(12px);
}
.about-hero__cue::after {
  content: " \2193"; /* ↓ */
  display: inline-block;
  margin-left: 6px;
  transform: translateY(1px);
  color: rgba(251, 248, 241, 0.45);
}

/* Entrance — fired by inline script on next frame. */
.about-hero.is-entering .about-hero__eyebrow {
  animation: aboutHeroFadeUp 600ms cubic-bezier(0, 0.55, 0.45, 1) 100ms both;
}
.about-hero.is-entering .about-hero__rule {
  animation: aboutHeroSweep 700ms cubic-bezier(0.85, 0, 0.15, 1) 250ms both;
}
.about-hero.is-entering .about-hero__title {
  animation: aboutHeroFadeUp 700ms cubic-bezier(0, 0.55, 0.45, 1) 350ms both;
}
.about-hero.is-entering .about-hero__tagline {
  animation: aboutHeroFadeUp 600ms cubic-bezier(0, 0.55, 0.45, 1) 700ms both;
}
.about-hero.is-entering .about-hero__cue {
  animation: aboutHeroFadeUp 600ms cubic-bezier(0, 0.55, 0.45, 1) 900ms both;
}

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

@media (prefers-reduced-motion: reduce) {
  .about-hero.is-entering .about-hero__eyebrow,
  .about-hero.is-entering .about-hero__rule,
  .about-hero.is-entering .about-hero__title,
  .about-hero.is-entering .about-hero__tagline,
  .about-hero.is-entering .about-hero__cue {
    animation: none;
    opacity: 1;
    transform: none;
  }
}


/* =====================================================================
   PHASE 3 — STORY
   ---------------------------------------------------------------------
   Two-column band: a typographic "panel" (no photo — we don't have one
   of Mike, and we won't fabricate) sits beside the body copy.
   ===================================================================== */
.about-story {
  padding-top: 80px;
  padding-bottom: 80px;
}
@media (min-width: 768px) {
  .about-story {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

.about-story__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 900px) {
  .about-story__grid {
    grid-template-columns: 5fr 7fr;
    gap: 64px;
  }
}
@media (min-width: 1200px) {
  .about-story__grid { gap: 88px; }
}

/* ---- Brand panel: corkboard with a pinned business card ----
   Composition is layered with no images:
     - .about-story__board    = wooden frame around a cork surface
       The cork surface is painted on the ::before pseudo via a stack of
       small radial-gradients (specks) + tonal blotches + base cork tint
       + an inset vignette.
     - .about-story__pin      = rust pushpin, made entirely of radial
       gradients with a small cast shadow. Counter-rotated to the card so
       it stays vertically pinned even as the card tilts.
     - .about-story__card     = the paper business card. Slightly rotated,
       two-stage drop shadow (close + ambient), faint paper grain.
       Inner content is built like a real builder's card: corner ink stamp,
       a level-icon "monogram", name, italic title, dotted divider, three
       fact rows, condensed wordmark footer.                              */
.about-story__panel {
  position: relative;
  isolation: isolate;
}

.about-story__board {
  position: relative;
  padding: 22px;
  border-radius: 6px;
  /* Wooden frame: subtle vertical striations + warm wood gradient.
     Inset highlight on top edge + inset shadow on bottom edge gives a
     thin bevel so the cork sinks into the frame.                        */
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.045) 0 1px,
      transparent 1px 7px),
    linear-gradient(180deg,
      #5C3A22 0%,
      #4A2D1A 50%,
      #5C3A22 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 30px 60px -25px rgba(0, 0, 0, 0.55),
    0 4px 10px rgba(0, 0, 0, 0.18);
}
@media (min-width: 768px) {
  .about-story__board { padding: 28px; }
}

/* Cork surface — 12 specks + 2 tonal blotches + base tan + vignette.
   Specks are tiled (300px tile) so the texture extends the full board
   no matter the column width.                                          */
.about-story__board::before {
  content: '';
  position: absolute;
  inset: 22px;
  border-radius: 2px;
  background:
    radial-gradient(circle at 12% 18%,  #5A3D24 0 1.2px, transparent 1.5px),
    radial-gradient(circle at 38% 9%,   #5A3D24 0 1px,   transparent 1.3px),
    radial-gradient(circle at 67% 22%,  #644028 0 1.5px, transparent 1.8px),
    radial-gradient(circle at 89% 12%,  #543822 0 1px,   transparent 1.3px),
    radial-gradient(circle at 8% 47%,   #604027 0 1.3px, transparent 1.6px),
    radial-gradient(circle at 28% 55%,  #533720 0 1px,   transparent 1.3px),
    radial-gradient(circle at 56% 41%,  #5A3D24 0 1.4px, transparent 1.7px),
    radial-gradient(circle at 81% 58%,  #604027 0 1.2px, transparent 1.5px),
    radial-gradient(circle at 18% 78%,  #533720 0 1px,   transparent 1.3px),
    radial-gradient(circle at 44% 88%,  #5A3D24 0 1.3px, transparent 1.6px),
    radial-gradient(circle at 73% 79%,  #604027 0 1.2px, transparent 1.5px),
    radial-gradient(circle at 92% 92%,  #543822 0 1px,   transparent 1.3px),
    radial-gradient(ellipse at 20% 30%, rgba(200, 158, 110, 0.28), transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(120, 84, 50, 0.30), transparent 50%),
    linear-gradient(135deg, #C99A6A 0%, #BC8C58 100%);
  background-size:
    300px 300px, 300px 300px, 300px 300px, 300px 300px,
    300px 300px, 300px 300px, 300px 300px, 300px 300px,
    300px 300px, 300px 300px, 300px 300px, 300px 300px,
    auto, auto, auto;
  background-repeat:
    repeat, repeat, repeat, repeat,
    repeat, repeat, repeat, repeat,
    repeat, repeat, repeat, repeat,
    no-repeat, no-repeat, no-repeat;
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(0, 0, 0, 0.28);
  z-index: 0;
}

/* Business card on the cork. Margins around it expose cork edges, so
   the card reads as one item pinned to a larger surface, not a card
   that fills the whole frame.                                          */
.about-story__card {
  position: relative;
  z-index: 1;
  margin: 32px 24px;
  padding: 38px 28px 24px;
  text-align: center;
  color: var(--ink);
  background:
    /* Faint horizontal paper grain — barely-there warm stripes. */
    repeating-linear-gradient(180deg,
      rgba(170, 130, 80, 0.025) 0 2px,
      transparent 2px 5px),
    var(--cream-soft);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 2px;
  /* Two-stage shadow: tight contact + larger ambient. Slight bottom-
     right bias matches the card's CCW rotation (light from upper left). */
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.10),
    0 6px 14px -4px rgba(0, 0, 0, 0.22),
    0 22px 36px -12px rgba(0, 0, 0, 0.18);
  transform: rotate(-2.6deg);
  transform-origin: 50% 30%;
}
@media (min-width: 768px) {
  .about-story__card {
    margin: 50px 36px;
    padding: 46px 36px 28px;
  }
}

/* Corner stamp — looks like a circular ink stamp impression. Faded ink
   (rust @ 0.6 alpha) and a slight rotation sell the "applied with a
   physical stamp" feel.                                                 */
.about-story__card-stamp {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 4px;
  border: 2px solid rgba(158, 60, 14, 0.55);
  border-radius: 50%;
  font-family: var(--font-display);
  text-transform: uppercase;
  color: rgba(158, 60, 14, 0.62);
  letter-spacing: 0.15em;
  line-height: 1;
  transform: rotate(8deg);
  /* Subtle worn / partially-inked feel via slight inset highlight. */
  box-shadow: inset 0 0 6px rgba(255, 248, 241, 0.4);
}
.about-story__card-stamp-top  { font-size: 9px;  font-weight: 500; margin-bottom: 3px; }
.about-story__card-stamp-year { font-size: 16px; font-weight: 700; letter-spacing: 0.04em; }

/* Tiny level icon as a brand mark on the card. */
.about-story__card-mark {
  display: block;
  width: 96px;
  height: 18px;
  margin: 4px auto 22px;
}

.about-story__card-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 36px);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 6px;
}

.about-story__card-title {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(13px, 1.4vw, 15px);
  color: rgba(42, 27, 16, 0.65);
  margin: 0 0 22px;
}

.about-story__card-rule {
  display: block;
  width: 60px;
  height: 1px;
  margin: 0 auto 22px;
  background: linear-gradient(90deg,
    transparent,
    rgba(42, 27, 16, 0.4) 20%,
    rgba(42, 27, 16, 0.4) 80%,
    transparent);
}

/* Three fact rows — label/value, dotted underline, never boxed. */
.about-story__card-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  max-width: 260px;
  margin: 0 auto 20px;
  text-align: left;
}
.about-story__card-facts > div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px dotted rgba(42, 27, 16, 0.22);
}
.about-story__card-facts > div:last-child { border-bottom: 0; }
.about-story__card-facts dt {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(42, 27, 16, 0.55);
}
.about-story__card-facts dd {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  text-align: right;
  letter-spacing: 0.02em;
}

/* Footer wordmark on the card — small condensed all-caps. */
.about-story__card-foot {
  display: block;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(42, 27, 16, 0.45);
  margin-top: 8px;
}

/* Pushpin — sits over the top-center of the card. Counter-rotated to the
   card so it stays plumb. Body is a layered radial gradient: small bright
   highlight + warm rust falloff + dark edge. Drop shadow extends onto the
   card. The ::after creates a faint indent halo around the pierce point. */
.about-story__pin {
  /* Positioned over the card top-edge so ~70% of the pin sits on the
     paper and ~30% sticks above into cork. Stays vertical (no rotation)
     because pins go in plumb regardless of paper angle.                 */
  position: absolute;
  z-index: 2;
  top: 36px;
  left: 50%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, 0);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%,
      rgba(255, 232, 210, 0.95) 0%,
      rgba(255, 232, 210, 0) 22%),
    radial-gradient(circle at 50% 50%,
      #D45A1F 0%,
      #B14213 60%,
      #6E2606 100%);
  box-shadow:
    inset 0 -1px 1px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(0, 0, 0, 0.2),
    /* Tight cast shadow on the card immediately to the lower-right. */
    1px 2px 2px rgba(0, 0, 0, 0.45),
    /* Soft halo. */
    0 4px 6px -2px rgba(0, 0, 0, 0.25);
}
/* Tiny indent halo: only ~3px around the pin, like a ring of pressed
   fibers around the pinpoint. Subtle, not a saucer. */
.about-story__pin::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 55%,
    rgba(0, 0, 0, 0.18) 0%,
    rgba(0, 0, 0, 0.06) 50%,
    transparent 75%);
  z-index: -1;
}
@media (min-width: 768px) {
  .about-story__pin { top: 52px; width: 24px; height: 24px; }
}

/* ---- Copy column ----
   Story title is intentionally LARGE so the section reads with the
   weight of the corkboard panel beside it. The lead paragraph is a
   touch heavier and larger than following body copy — gives the eye
   a deliberate first stop before the regular-weight follow-ups.    */
.about-story__title,
.about-story__copy h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 6.5vw, 84px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 12px 0 28px;
  text-wrap: balance;
}
.about-story__lead {
  /* Lead paragraph: bigger and slightly heavier than the rest of
     the body copy — gives the eye a deliberate first stop before
     the regular-weight follow-up paragraphs. */
  font-size: clamp(17px, 1.55vw, 20px);
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 22px;
}
.about-story__copy p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 18px;
  max-width: 56ch;
}
.about-story__copy p:last-child { margin-bottom: 0; }


/* =====================================================================
   PHASE 4 — VALUES STRIP
   ---------------------------------------------------------------------
   Three cards on the cream raised panel. Each card: rust-tinted icon
   square, title, paragraph. Cards stack on mobile, three-up at >= 768px.
   ===================================================================== */
.about-values {
  /* Inherits .section--cream styling — raised cream panel. */
}

.about-values__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .about-values__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
}
@media (min-width: 1100px) {
  .about-values__grid { gap: 36px; }
}

.about-values__card {
  position: relative;
  background: var(--cream-soft);
  border-radius: var(--radius-lg, 14px);
  padding: 32px 28px;
  border: 1px solid rgba(168, 85, 46, 0.12);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 12px 28px -22px rgba(42, 27, 16, 0.35);
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 320ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 320ms ease;
}
@media (min-width: 768px) {
  .about-values__card { padding: 36px 32px; }
}

@media (hover: hover) and (pointer: fine) {
  .about-values__card:hover {
    transform: translateY(-3px);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.5) inset,
      0 22px 40px -22px rgba(42, 27, 16, 0.45);
    border-color: rgba(168, 85, 46, 0.28);
  }
}

.about-values__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: linear-gradient(150deg,
    rgba(168, 85, 46, 0.15) 0%,
    rgba(158, 60, 14, 0.10) 100%);
  border: 1px solid rgba(158, 60, 14, 0.25);
  color: var(--rusty-dark, #6E2A0A);
  margin-bottom: 20px;
}
.about-values__icon svg {
  width: 28px;
  height: 28px;
  display: block;
}

.about-values__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0 0 12px;
}

.about-values__card p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
}


/* =====================================================================
   PHASE 5 — PRACTICAL INFO
   ---------------------------------------------------------------------
   Removed 2026-04-30: section was redundant with info already covered
   in services.html, the homepage about teaser, and the footer.
   ===================================================================== */


/* =====================================================================
   PHASE 7 — REVIEWS
   ---------------------------------------------------------------------
   Single empty-state CTA on the dark band. Once 2+ real reviews come
   in this section can host a real testimonial layout.
   ===================================================================== */
.about-reviews {
  background: var(--ink);
  color: var(--cream-soft);
  padding-top: 80px;
  padding-bottom: 96px;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .about-reviews {
    padding-top: 110px;
    padding-bottom: 130px;
  }
}

.about-reviews__empty {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}
.about-reviews__empty-line {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.5;
  color: rgba(251, 248, 241, 0.85);
  margin: 0 0 24px;
}
.about-reviews__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.about-reviews__cta-icon {
  width: 16px;
  height: 16px;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.about-reviews__cta:hover .about-reviews__cta-icon {
  transform: translateX(3px);
}
.about-reviews__empty-fineprint {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(251, 248, 241, 0.5);
  margin: 22px 0 0;
}

/* When data-review-count is 2+, the empty state hides itself. Future
   carousel markup will live next to it. */
.about-reviews__empty[data-review-count="0"],
.about-reviews__empty[data-review-count="1"] {
  display: block;
}


/* =====================================================================
   PHASE 8 — FINAL CTA
   ---------------------------------------------------------------------
   Mirrors services-cta — quiet, centered, two buttons.
   ===================================================================== */
.about-cta {
  padding-top: 88px;
  padding-bottom: 120px;
}
@media (min-width: 768px) {
  .about-cta {
    padding-top: 120px;
    padding-bottom: 160px;
  }
}

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

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


/* =====================================================================
   PHASE 9 — MASCOT POSES (values cards only)
   ---------------------------------------------------------------------
   Three poses, one per values card. All aria-hidden; copy carries the
   meaning. Each pose has a different aspect ratio so the row sizes by
   HEIGHT (not width) to keep rhythm.
   ===================================================================== */

.about-values__mascot {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  height: 120px;
  margin-bottom: 16px;
  /* Reserve a fixed block so title baselines align across the 3 cards. */
}
.about-values__mascot img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  filter: drop-shadow(0 10px 18px rgba(42, 27, 16, 0.22));
}
@media (min-width: 768px) {
  .about-values__mascot { height: 140px; margin-bottom: 18px; }
}
@media (min-width: 1100px) {
  .about-values__mascot { height: 160px; margin-bottom: 20px; }
}


/* ==========================================================================
   FOOTER — recolor only.
   The inner-page footer uses the homepage's full layout (defined in
   sections.css). Override just the background so it sits on the dark
   --ink band the rest of the inner pages already use, instead of the
   homepage's rust climax.
   ========================================================================== */
.site-footer {
  background: var(--ink);
}