/* Source: fonts.css */
/* Original Google Fonts declarations; only font URLs changed. Licenses: ../fonts/LICENSE.html */
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/manrope-cyrillic-ext.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: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/manrope-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/manrope-greek.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: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/manrope-vietnamese.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: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/manrope-latin-ext.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: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/manrope-latin.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: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/manrope-cyrillic-ext.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: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/manrope-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/manrope-greek.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: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/manrope-vietnamese.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: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/manrope-latin-ext.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: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/manrope-latin.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: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/manrope-cyrillic-ext.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: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/manrope-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/manrope-greek.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: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/manrope-vietnamese.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: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/manrope-latin-ext.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: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/manrope-latin.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: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/manrope-cyrillic-ext.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: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/manrope-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/manrope-greek.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: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/manrope-vietnamese.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: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/manrope-latin-ext.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: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/manrope-latin.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: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/manrope-cyrillic-ext.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: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/manrope-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/manrope-greek.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: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/manrope-vietnamese.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: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/manrope-latin-ext.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: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/manrope-latin.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: 'Unbounded';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/unbounded-cyrillic-ext.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: 'Unbounded';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/unbounded-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/unbounded-vietnamese.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: 'Unbounded';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/unbounded-latin-ext.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: 'Unbounded';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/unbounded-latin.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: 'Unbounded';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/unbounded-cyrillic-ext.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: 'Unbounded';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/unbounded-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/unbounded-vietnamese.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: 'Unbounded';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/unbounded-latin-ext.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: 'Unbounded';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/unbounded-latin.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: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/unbounded-cyrillic-ext.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: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/unbounded-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/unbounded-vietnamese.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: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/unbounded-latin-ext.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: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/unbounded-latin.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: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/unbounded-cyrillic-ext.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: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/unbounded-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/unbounded-vietnamese.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: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/unbounded-latin-ext.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: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/unbounded-latin.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: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/unbounded-cyrillic-ext.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: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/unbounded-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/unbounded-vietnamese.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: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/unbounded-latin-ext.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: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/unbounded-latin.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: 'Unbounded';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../fonts/unbounded-cyrillic-ext.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: 'Unbounded';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../fonts/unbounded-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../fonts/unbounded-vietnamese.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: 'Unbounded';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../fonts/unbounded-latin-ext.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: 'Unbounded';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../fonts/unbounded-latin.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;
}

/* Source: base.css */
/* Webify — base. Cascade and constraints: docs/DESIGN.md. */

:root {
  --paper: #f3f1ea;
  --ink: #151715;
  --lime: #d5f15a;
  --gray: #64665d;
  --line: #cacbc0;
  --dark-line: #42453c;
  --end-bg: #151715;
  --display: 'Unbounded','Avenir Next',Arial,sans-serif;
  --body: 'Manrope','Avenir Next',Arial,sans-serif;
}

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

html,body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  overscroll-behavior-y: none;
  background: var(--end-bg);
  color: var(--ink);
}

body {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

img {
  height: auto;
}

/* Draw arrows as vectors so mobile fonts cannot substitute emoji. */
.inline-arrow {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  flex: 0 0 auto;
  vertical-align: -.15em;
}

a {
  color: inherit;
  text-decoration: none;
}

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

button {
  font: inherit;
}

::selection {
  background: var(--lime);
  color: var(--ink);
}

a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
}

:root {
  color-scheme: light;
}

.site-shell {
  background-color: var(--paper);
}

.skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 20;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-180%);
}

.skip-link:focus {
  transform: none;
}

:where(#work, #services, #approach, #contact) {
  scroll-margin-top: 24px;
}

[tabindex="-1"]:focus {
  outline: none;
}

/* Source: components.css */
/* Webify — components. Cascade and constraints: docs/DESIGN.md. */

.wrap {
  width: calc(100% - 112px);
  max-width: 1328px;
  margin: 0 auto;
}

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  line-height: 1.4;
}

.section-number {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--gray);
}

.header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 96px;
  border-bottom: 1px solid var(--ink);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -1.7px;
  line-height: 1;
}

.wordmark small {
  font-size: 10px;
  align-self: flex-start;
  letter-spacing: 0;
  margin: 2px 0 0 -6px;
}

.nav {
  display: flex;
  gap: 32px;
  font-size: 14px;
  font-weight: 600;
}

.header-contact {
  font-size: 14px;
  font-weight: 700;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
}

.hero-backdrop {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: transparent;
  padding-bottom: 40px;
}

.hero {
  padding-top: 32px;
}

.hero-top {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
}

.hero-top .eyebrow:last-child {
  color: var(--gray);
}

.hero-main {
  display: block;
}

.hero-main h1 {
  max-width: 950px;
}

h1 {
  font-family: var(--display);
  font-size: clamp(58px,8.4vw,121px);
  font-weight: 700;
  line-height: 1.09;
  letter-spacing: -.045em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

h1 span {
  display: block;
}

.title-final {
  position: relative;
  width: fit-content;
}

.title-final::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  height: clamp(2px, .035em, 4px);
  bottom: -.08em;
  transform-origin: left center;
  background: var(--lime);
  transform: rotate(-1.6deg);
}

.hero-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 48px;
  padding: 0 0 48px;
  align-items: center;
}

.intro {
  font-size: 18px;
  line-height: 1.65;
  max-width: 475px;
  color: var(--gray);
}

.intro strong {
  font-weight: 600;
  color: var(--ink);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 32px;
  justify-content: flex-end;
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 20px 24px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  font-weight: 700;
  min-width: 230px;
}

.cta svg {
  width: 24px;
  height: 24px;
}

.sub-link {
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  white-space: nowrap;
}

.ticker {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  gap: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.ticker i {
  width: 9px;
  height: 9px;
  display: block;
  background: var(--ink);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.work {
  padding: 96px 0;
}

.section-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 32px;
  align-items: start;
  margin-bottom: 48px;
}

.section-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  max-width: 245px;
}

.section-head h2 {
  font-family: var(--display);
  font-size: clamp(32px,3.5vw,50px);
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -.055em;
}

.section-head h2 em {
  font-style: normal;
  color: var(--gray);
}

.projects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
  row-gap: 48px;
}

.project-featured {
  grid-column: 1/-1;
}

.project-media {
  position: relative;
  aspect-ratio: 1.48;
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}

.project-featured .project-media {
  aspect-ratio: 2.36;
  background: #dfe5d7;
}

.project-name {
  position: absolute;
  left: 32px;
  top: 28px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  z-index: 4;
}

.project-name span {
  display: block;
  margin-top: 6px;
  font-weight: 500;
  letter-spacing: 0;
  opacity: .6;
  font-size: 12px;
}

.project-tag {
  position: absolute;
  right: 24px;
  top: 24px;
  border: 1px solid currentColor;
  padding: 6px 10px;
  font-size: 10px;
  letter-spacing: .08em;
  z-index: 3;
}

.project-watermark {
  position: absolute;
  font-family: var(--display);
  font-size: clamp(55px,8vw,120px);
  letter-spacing: -.045em;
  font-weight: 600;
  line-height: 1;
  z-index: 0;
  left: 32px;
  bottom: 24px;
  color: #9baa8a;
}

.project-window {
  position: absolute;
  z-index: 2;
  width: 70%;
  height: 78%;
  right: 6%;
  bottom: -3%;
  border: 6px solid var(--paper);
  border-radius: 9px;
  background-color: var(--paper);
  background-size: cover;
  background-position: center top;
  box-shadow: 0 16px 48px #15171520;
  transform: rotate(-5deg);
}

.eco .project-window {
  background-image: none;
  overflow: hidden;
}

.eco .project-watermark {
  transform: rotate(-90deg);
  transform-origin: top left;
  font-size: 75px;
  left: 35px;
  bottom: -58px;
  white-space: nowrap;
}

.project-link:not(.project-featured) .eco .project-watermark {
  transform: none;
  top: 100px;
  bottom: auto;
  left: 32px;
  font-size: clamp(44px, 5vw, 68px);
}

.project-link:not(.project-featured) .eco .project-window {
  width: 86%;
  height: auto;
  aspect-ratio: 1898 / 1079;
  right: -4%;
  bottom: 8%;
}

.fallback-eco {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #f7f9f6;
  display: flex;
  align-items: center;
  padding: 40px;
  color: #476247;
}

.fallback-eco h3 {
  font-family: var(--display);
  font-size: clamp(48px,6vw,88px);
  line-height: 1.1;
  letter-spacing: -.07em;
  font-weight: 500;
  margin-top: 16px;
}

.fallback-eco p {
  font-size: 12px;
  margin-top: 12px;
}

.fallback-eco .climate-lines {
  height: 120px;
  align-self: center;
  border-radius: 16px;
  background: repeating-linear-gradient(0deg,#dfe7da 0px,#dfe7da 3px,#f7f9f6 3px,#f7f9f6 20px);
  border: 1px solid #dfe7da;
}

.anima {
  background: #292c33;
  color: var(--paper);
}

.anima .project-window {
  background-color: #101114;
  background-image: none;
  width: 79%;
  height: 65%;
  bottom: 6%;
  right: -4%;
  transform: rotate(-5deg);
  border-color: #50534f;
}

.anima .project-watermark {
  font-size: 75px;
  left: 22px;
  top: 90px;
  bottom: auto;
  color: var(--lime);
  letter-spacing: -.08em;
}

.anima .project-window::before {
  content: 'ANIMA';
  position: absolute;
  inset: 0;
  z-index: -1;
  display: grid;
  place-items: center;
  font: 700 50px var(--display);
  color: var(--lime);
}

.rgs {
  background: #cccfc8;
}

.rgs .project-window {
  background-color: var(--ink);
  background-image: none;
  width: 82%;
  height: 63%;
  bottom: 7%;
  right: -3%;
  border-color: #f3f1ea;
  transform: rotate(-5deg);
}

.rgs .project-watermark {
  font-size: 67px;
  left: 22px;
  top: 90px;
  bottom: auto;
  color: #767b70;
}

.rgs .project-window::before {
  content: attr(data-project-wordmark);
  position: absolute;
  inset: 0;
  z-index: -1;
  display: grid;
  place-items: center;
  text-align: center;
  font: 700 32px var(--display);
  color: var(--paper);
}

.new-city, .eco { background: #dfe5d7; color: #1d2822; }
.new-city .project-watermark { top: 112px; bottom: auto; font-size: clamp(44px,5vw,78px); color: #82937c; }
.new-city .project-window { width: 76%; height: auto; aspect-ratio: 16 / 7; right: -1%; bottom: 3%; }
.new-city .project-shot { object-fit: contain; background: #15171a; }

.project-bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 20px;
  margin-top: 20px;
}

.project-bottom h3 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.035em;
}

.project-bottom p {
  font-size: 14px;
  color: var(--gray);
  margin-top: 5px;
  max-width: 630px;
}

.project-index {
  font-family: var(--display);
  font-size: 13px;
  padding-top: 5px;
  letter-spacing: -.05em;
}

.project-featured .project-bottom h3 {
  font-size: 25px;
}

.project-featured .project-bottom {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.expertise {
  background: var(--ink);
  color: var(--paper);
  padding: 88px 0;
}

.expertise .section-head h2 em {
  color: #95998c;
}

.expertise .section-number {
  color: #95998c;
}

.expertise .section-head {
  margin-bottom: 48px;
}

.service-row {
  display: grid;
  grid-template-columns: 56px 1.2fr 1.3fr 180px;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--dark-line);
  align-items: center;
}

.service-row:last-child {
  border-bottom: 1px solid var(--dark-line);
}

.service-row .num {
  font-size: 12px;
  color: #999e8e;
}

.service-row h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 23px;
  letter-spacing: -.06em;
}

.service-row p {
  font-size: 14px;
  line-height: 1.65;
  color: #b2b6a8;
  max-width: 310px;
}

.price {
  text-align: right;
  font-size: 20px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.price small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: #999e8e;
  margin-top: 4px;
}

.service-featured {
  color: var(--lime);
}

.service-featured .num {
  color: var(--lime);
}

.services-note {
  font-size: 12px;
  color: #999e8e;
  margin-top: 24px;
  max-width: 630px;
}

.approach {
  padding: 96px 0;
}

.approach-grid {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 80px;
}

.manifesto {
  position: relative;
  isolation: isolate;
  background: var(--lime);
  padding: 40px;
  min-height: 470px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.manifesto .eyebrow {
  position: relative;
  z-index: 1;
}

.manifesto h2 {
  font-family: var(--display);
  font-size: clamp(37px,3.45vw,50px);
  letter-spacing: -.065em;
  line-height: 1.22;
  font-weight: 600;
  z-index: 1;
}

.manifesto h2 span {
  display: block;
}

.manifesto .mini-symbol {
  position: absolute;
  width: 260px;
  height: 260px;
  right: -76px;
  bottom: -100px;
  opacity: .12;
}

.manifesto .eyebrow:last-child {
  font-size: 10px;
  margin-top: 32px;
}

.approach-copy>h2 {
  font-family: var(--display);
  font-size: 31px;
  line-height: 1.35;
  letter-spacing: -.05em;
  font-weight: 500;
  margin: 8px 0 24px;
}

.approach-copy>p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--gray);
  margin-bottom: 32px;
  max-width: 440px;
}

.principle {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  border-top: 1px solid var(--line);
  padding: 20px 0;
}

.principle .num {
  font-size: 11px;
  padding-top: 4px;
  color: var(--gray);
}

.principle h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
}

.principle p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--gray);
}

.process {
  border-top: 1px solid var(--ink);
  padding: 32px 0 80px;
}

.process-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
}

.process-title h2 {
  font-size: 20px;
  letter-spacing: -.03em;
  font-weight: 600;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}

.step-num {
  font-family: var(--display);
  font-size: 38px;
  letter-spacing: -.06em;
  font-weight: 400;
  margin-bottom: 24px;
  color: #8c9080;
}

.step h3 {
  font-size: 16px;
  margin-bottom: 8px;
  font-weight: 700;
}

.step p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--gray);
  max-width: 240px;
}

.contact {
  background: var(--lime);
  padding: 64px 0 0;
  overflow: visible;
}

.contact-top {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  margin-bottom: 40px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  align-items: end;
}

.contact h2 {
  font-family: var(--display);
  font-size: clamp(35px,4.4vw,64px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.065em;
}

.contact-copy p {
  font-size: 15px;
  line-height: 1.7;
  max-width: 320px;
  margin-bottom: 24px;
}

.contact .cta {
  min-width: 260px;
}

.contact-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 600;
  margin-top: 20px;
}

.contact-wordmark {
  font-weight: 800;
  font-size: clamp(120px,24vw,360px);
  letter-spacing: -.09em;
  line-height: .9;
  margin: 64px 0 -10px;
  position: relative;
  left: -.025em;
}

.contact-wordmark sup {
  position: absolute;
  right: 2%;
  top: 17%;
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: -.04em;
  font-weight: 400;
}

.footer {
  background: var(--ink);
  color: var(--paper);
  padding: 24px 0;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-size: 11px;
  color: #aaaF9e;
}

.footer-inner span:first-child {
  color: var(--paper);
  font-weight: 600;
}

.footer-inner a {
  border-bottom: 1px solid #515548;
  padding-bottom: 2px;
}

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

.work {
  padding-top: 64px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.theme-sun {
  display: none;
}

.theme-moon {
  display: block;
}

.project-link {
  display: block;
  min-width: 0;
  cursor: pointer;
}

.project-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 8px;
}

.project-link-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  font-size: 12px;
  font-weight: 700;
  border-bottom: 1px solid var(--line);
  padding-bottom: 5px;
}

.project-link-label svg {
  width: 18px;
  height: 18px;
}

.project-link:hover .project-link-label,.project-link:focus-visible .project-link-label {
  border-color: currentColor;
}

.project-link:hover .project-tag,.project-link:focus-visible .project-tag {
  background: var(--paper);
  color: var(--ink);
}

.hero-backdrop > .wrap {
  position: relative;
  z-index: 2;
}

.hero-background-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  mask-image: linear-gradient(180deg,transparent 0%,#000 9%,#000 68%,transparent 100%);
  -webkit-mask-image: linear-gradient(180deg,transparent 0%,#000 9%,#000 68%,transparent 100%);
}

.hero-background-light {
  display: block;
  opacity: .85;
}

.hero-background-dark {
  display: block;
  opacity: 0;
}

.hero-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,rgba(243,241,234,.10),rgba(243,241,234,.05) 65%);
}

.manifesto .mini-symbol {
  z-index: 1;
}

.contact > .wrap {
  position: relative;
  z-index: 1;
}

.footer {
  position: relative;
  z-index: 2;
}

main {
  overflow: clip;
}

.contact-copy .contact-hours {
  font-size: 12px;
  line-height: 1.7;
  margin: 16px 0 0;
  opacity: .8;
}

/* Native details keeps mobile navigation usable even without JavaScript. */
.mobile-menu { display: none; }
.mobile-menu summary {
  display: grid;
  place-items: center;
  width: 44px;
  min-height: 44px;
  border: 1px solid var(--line);
  cursor: pointer;
  list-style: none;
}
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary svg { width: 24px; height: 24px; }
.mobile-menu summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.mobile-menu-panel {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  z-index: 10;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 12px;
  box-shadow: 0 18px 32px rgba(0, 0, 0, .12);
}
.mobile-menu-panel a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 12px;
  font-size: 15px;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.mobile-menu-panel a:last-child { border-bottom: 0; }
.mobile-menu[open] summary { background: var(--ink); color: var(--paper); }
.price--custom { white-space: normal; font-size: 18px; line-height: 1.4; }
.price small { white-space: normal; line-height: 1.5; }
.services-note { line-height: 1.7; }
.project-link, .hero-bottom > *, .service-row > * { min-width: 0; }

/* Contact actions remain above the decorative wordmark and arc. */
.contact-grid { position: relative; z-index: 2; }
.contact-copy { position: relative; z-index: 2; }
.contact-wordmark { pointer-events: none; user-select: none; }
.contact-links a, .contact-email-trigger {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  cursor: pointer;
  pointer-events: auto;
}
.contact-links a:hover, .contact-email-trigger:hover { text-decoration-thickness: 2px; }
.contact-links a { gap: .35em; }
.contact-email { position: relative; display: inline-flex; align-items: center; }
.contact-email-trigger { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; }
.contact-email-trigger:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.contact-copy .contact-copy-status {
  position: absolute;
  z-index: 3;
  top: calc(100% + 4px);
  left: 0;
  width: max-content;
  max-width: min(280px, calc(100vw - 48px));
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(-3px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
.contact-copy .contact-copy-status.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .contact-copy .contact-copy-status { transition: none; transform: none; }
}

/* The homepage selects three highlights; this link leads to the full archive. */
.portfolio-link { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 88px; margin-top: 48px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 20px; font-weight: 700; }
.portfolio-link-end { display: flex; align-items: center; gap: 32px; }
.portfolio-link svg, .portfolio-contact-link svg { width: 28px; height: 28px; flex: 0 0 auto; }
.portfolio-count { font-family: var(--display); font-size: 12px; color: var(--gray); }
.portfolio-link:focus-visible, .portfolio-back:focus-visible, .portfolio-contact-link:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
.portfolio-intro { padding: 48px 0 56px; }
.portfolio-intro-top, .portfolio-intro-bottom { display: flex; justify-content: space-between; align-items: baseline; gap: 32px; }
.portfolio-back { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; text-decoration: underline; text-underline-offset: 5px; }
.portfolio-intro-top .eyebrow { color: var(--gray); font-size: 11px; text-align: right; }
.portfolio-intro h1 { max-width: 1100px; margin: 40px 0; font-family: var(--display); font-size: clamp(38px, 5.1vw, 74px); line-height: 1.18; letter-spacing: -.06em; font-weight: 500; overflow-wrap: break-word; }
.portfolio-intro h1 em { font-style: normal; color: var(--gray); }
.portfolio-intro-bottom > p { max-width: 600px; font-size: 17px; color: var(--gray); }
.portfolio-total { display: flex; align-items: center; gap: 32px; white-space: nowrap; font-size: 12px; }
.portfolio-total > span:last-child { font-family: var(--display); font-size: 20px; }
.portfolio-list { padding: 48px 0 96px; border-top: 1px solid var(--line); }
.portfolio-list .new-city .project-window { width: 90%; bottom: 6%; }
.portfolio-list .new-city .project-watermark { top: 100px; font-size: 56px; }
.portfolio-list .project-bottom { padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.portfolio-contact { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 56px 0 72px; border-top: 1px solid var(--line); }
.portfolio-contact h2 { font-family: var(--display); font-size: clamp(24px, 3vw, 42px); line-height: 1.25; letter-spacing: -.05em; font-weight: 500; }
.portfolio-contact-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 56px; padding: 8px 0; border-bottom: 1px solid var(--ink); font-size: 17px; font-weight: 600; }

/* A short trust section before the portfolio. One letter stays horizontal. */
.portfolio-letters { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr); gap: 32px; align-items: center; padding: 28px 0; border-top: 1px solid var(--line); }
.portfolio-letters h2 { font-family: var(--display); font-size: 18px; font-weight: 500; line-height: 1.5; letter-spacing: -.035em; }
.letter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.letter-grid:has(> :only-child) { grid-template-columns: minmax(0, 430px); }
.letter-card { display: grid; grid-template-columns: 56px minmax(0, 1fr) 20px; gap: 20px; align-items: center; min-height: 112px; padding: 16px 20px; border: 1px solid var(--line); }
.letter-card > img { width: 56px; height: 79px; object-fit: contain; background: #fff; }
.letter-card > svg { width: 20px; height: 20px; }
.letter-card-copy { display: grid; gap: 3px; min-width: 0; }
.letter-card-copy strong { font-size: 15px; font-weight: 600; }
.letter-card-copy > span { font-size: 12px; color: var(--gray); }
.letter-card-copy .letter-card-action { padding-top: 8px; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .letter-card:hover { border-color: var(--ink); } }
@media (max-width: 1100px) {
  .portfolio-letters { grid-template-columns: minmax(0,1fr); gap: 18px; }
}
@media (max-width: 760px) {
  .portfolio-letters { grid-template-columns: minmax(0,1fr); gap: 18px; padding: 24px 0; }
  .portfolio-letters h2 { font-size: 16px; }
  .letter-grid:has(> :only-child) { grid-template-columns: minmax(0,1fr); }
  .letter-card { gap: 14px; padding: 14px 16px; }
  .letter-grid:has(> :nth-child(2)) .letter-card { position: relative; grid-template-columns: minmax(0,1fr); gap: 10px; }
  .letter-grid:has(> :nth-child(2)) .letter-card > img { grid-column: 1 / -1; }
  .letter-grid:has(> :nth-child(2)) .letter-card-copy { grid-column: 1 / -1; }
  .letter-grid:has(> :nth-child(2)) .letter-card > svg { position: absolute; top: 14px; right: 14px; }
}
/* Portfolio groups extend the existing card composition. */
.portfolio-group-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 40px; }
.portfolio-group-heading h2 { font: 500 clamp(24px,3vw,42px)/1.25 var(--display); letter-spacing: -.045em; max-width: 850px; }
.portfolio-group-heading p { color: var(--gray); font-size: 15px; max-width: 650px; margin-top: 16px; }
.portfolio-group-heading > span { font: 400 14px var(--display); color: var(--gray); padding-top: 8px; }
.portfolio-disclaimer { padding-top: 20px; margin-top: 40px; border-top: 1px solid var(--line); }
.portfolio-disclaimer p { font-size: 12px; line-height: 1.7; color: var(--gray); }
.portfolio-disclaimer p + p { margin-top: 8px; }
.karkas-meister { background: #d8dfd0; color: #263328; }
.parfumed { background: #e5dfd5; color: #39302a; }
.lash-skincare { background: #ddd9e4; color: #352d41; }
.dive-center { background: #b9def4; color: #153e5a; }
:is(.karkas-meister, .parfumed, .lash-skincare, .dive-center) .project-watermark { top: 100px; bottom: auto; font-size: 56px; }
.karkas-meister .project-watermark { color: #7b8c70; }
.parfumed .project-watermark { color: #aa9781; }
.lash-skincare .project-watermark { color: #94849d; }
.dive-center .project-watermark { color: #4788b0; }
:is(.karkas-meister, .parfumed, .lash-skincare, .dive-center) .project-window { width: 82%; height: 63%; right: -3%; bottom: 7%; overflow: hidden; }
.portfolio-list .project-name > [data-no-translate] { margin-top: 0; opacity: 1; font: inherit; color: inherit; }
@media (max-width: 760px) {
  .portfolio-group-heading { gap: 16px; margin-bottom: 28px; }
  .portfolio-group-heading h2 { font-size: 24px; }
  .portfolio-group-heading p { font-size: 14px; }
  .portfolio-disclaimer { margin-top: 28px; }
  :is(.karkas-meister, .parfumed, .lash-skincare, .dive-center) .project-watermark { left: 18px; top: 76px; font-size: clamp(32px,7vw,44px); }
  :is(.karkas-meister, .parfumed, .lash-skincare, .dive-center) .project-name { max-width: calc(100% - 135px); }
}

/* Source: themes.css */
/* Webify — themes. Cascade and constraints: docs/DESIGN.md. */

html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #111214;
  --ink: #efeee9;
  --gray: #a9abb0;
  --line: #36383c;
  --dark-line: #34363a;
  --lime: #d9e985;
  --metal: #c6a389;
  --end-bg: #101113;
  --grain: url("../icons/grain.svg");
}

html[data-theme="dark"] .site-shell {
  background-color: var(--paper);
  background-image: var(--grain),radial-gradient(ellipse at 95% 4%,rgba(166,119,83,.10),transparent 25%),radial-gradient(ellipse at 0% 42%,rgba(148,156,175,.065),transparent 27%);
  background-size: 192px 192px,100% 100%,100% 100%;
}

html[data-theme="dark"] .theme-sun {
  display: block;
}

html[data-theme="dark"] .theme-moon {
  display: none;
}

html[data-theme="dark"] .header {
  border-color: var(--line);
}

html[data-theme="dark"] .hero-backdrop {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: transparent;
  padding-bottom: 64px;
}

html[data-theme="dark"] .title-final {
  color: var(--ink);
}

html[data-theme="dark"] .title-final::after {
  background: var(--metal);
  opacity: .9;
}

html[data-theme="dark"] .cta {
  background: #e7e2d9;
  color: #18191c;
}

html[data-theme="dark"] .cta:hover {
  background: #fffaf0;
}

html[data-theme="dark"] .ticker {
  border-color: #48494c;
}

html[data-theme="dark"] .ticker i {
  background: var(--metal);
}

html[data-theme="dark"] .expertise .section-head h2 em,html[data-theme="dark"] .expertise .section-number,html[data-theme="dark"] .service-row .num,html[data-theme="dark"] .price small,html[data-theme="dark"] .services-note {
  color: var(--gray);
}

html[data-theme="dark"] .expertise .service-featured,html[data-theme="dark"] .service-featured .num {
  color: var(--metal);
}

html[data-theme="dark"] .project-featured .project-media,
html[data-theme="dark"] .eco,
html[data-theme="dark"] .new-city {
  background-color: #24262a;
  background-image: var(--grain),radial-gradient(ellipse at 8% 100%,#393c40,transparent 65%);
  color: var(--ink);
}

html[data-theme="dark"] .eco .project-watermark {
  color: #62696b;
}
html[data-theme="dark"] .new-city .project-watermark { color: #94a584; }

html[data-theme="dark"] .anima {
  background: #222329;
  color: var(--ink);
}

html[data-theme="dark"] .anima .project-watermark {
  color: #b8b2c9;
}

html[data-theme="dark"] .rgs {
  background: #302a26;
  color: var(--ink);
}

html[data-theme="dark"] .rgs .project-watermark {
  color: #988170;
}

html[data-theme="dark"] .project-window {
  border-color: #55565a;
  background-color: #202124;
  box-shadow: 0 16px 48px rgba(0,0,0,.45);
}

html[data-theme="dark"] .manifesto .eyebrow {
  color: #c5b7aa;
}

html[data-theme="dark"] .manifesto .mini-symbol {
  color: var(--metal);
  opacity: .23;
}

html[data-theme="dark"] .contact .section-number {
  color: var(--gray);
}

html[data-theme="dark"] .contact .cta {
  background: #e7e2d9;
  color: #18191c;
}

html[data-theme="dark"] .contact-wordmark {
  color: #797570;
  background-image: linear-gradient(140deg,#d8d4ce 10%,#686b73 42%,#b7967c 72%,#4b4743);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

html[data-theme="dark"] .contact-wordmark sup {
  background: none;
  -webkit-text-fill-color: #c2b6aa;
}

html[data-theme="dark"] .footer {
  background: #101113;
  color: var(--ink);
  border-top: 1px solid #303236;
}

html[data-theme="dark"] .footer-inner {
  color: var(--gray);
}

html[data-theme="dark"] .footer-inner span:first-child {
  color: var(--ink);
}

html[data-theme="dark"] ::selection {
  background: var(--metal);
  color: var(--paper);
}

html[data-theme="dark"] .project-link:hover .project-link-label,html[data-theme="dark"] .project-link:focus-visible .project-link-label {
  color: var(--metal);
}

html[data-theme="dark"] h1 {
  text-shadow: 0 3px 30px rgba(0,0,0,.25);
}

html[data-theme="dark"] .hero-top .eyebrow:last-child {
  color: #c6c3bd;
}

html[data-theme="dark"] .intro {
  color: #c0c1c3;
}

html[data-theme="dark"] .work {
  position: relative;
  isolation: isolate;
  padding-top: 48px;
}

html[data-theme="dark"] .contact::before {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 90%;
  aspect-ratio: 1.7;
  right: -35%;
  top: 8%;
  border: 1px solid rgba(203,179,155,.20);
  border-radius: 50%;
  transform: rotate(-32deg);
  box-shadow: 0 0 80px rgba(183,142,111,.035),0 0 0 42px rgba(183,142,111,.025),0 0 0 108px rgba(224,225,228,.018);
}

html[data-theme="dark"] .hero-background-light {
  opacity: 0;
}

html[data-theme="dark"] .hero-background-dark {
  display: block;
  opacity: 1;
  object-position: center 45%;
  mask-image: linear-gradient(180deg,transparent 0%,#000 9%,#000 100%);
  -webkit-mask-image: linear-gradient(180deg,transparent 0%,#000 9%,#000 100%);
}

html[data-theme="dark"] .hero-backdrop::after {
  background: linear-gradient(90deg,rgba(17,18,20,.24),rgba(17,18,20,.05) 65%);
}

html[data-theme="dark"] .expertise {
  background: linear-gradient(180deg,transparent 0%,#17181b 88px,#17181b calc(100% - 88px),transparent 100%);
  color: var(--ink);
  border: 0;
}

html[data-theme="dark"] .manifesto {
  background: transparent;
  color: var(--ink);
  border: 0;
}

html[data-theme="dark"] .manifesto::before {
  background: radial-gradient(ellipse at 50% 50%,rgba(78,65,56,.64) 0%,rgba(46,44,43,.7) 35%,rgba(36,37,41,0) 68%);
}

html[data-theme="dark"] .contact {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg,transparent 0%,rgba(26,27,30,.48) 72px,#1a1b1e 180px);
  color: var(--ink);
  border: 0;
}

html[data-theme="dark"] .hero-background-dark,html[data-theme="dark"] .hero-backdrop::after {
  mask-image: linear-gradient(180deg,transparent 0%,#000 9%,#000 calc(100% - 200px),rgba(0,0,0,.85) calc(100% - 144px),rgba(0,0,0,.5) calc(100% - 94px),rgba(0,0,0,.14) calc(100% - 40px),transparent calc(100% - 6px),transparent 100%);
  -webkit-mask-image: linear-gradient(180deg,transparent 0%,#000 9%,#000 calc(100% - 200px),rgba(0,0,0,.85) calc(100% - 144px),rgba(0,0,0,.5) calc(100% - 94px),rgba(0,0,0,.14) calc(100% - 40px),transparent calc(100% - 6px),transparent 100%);
}

html[data-theme="dark"] .mobile-menu-panel {
  background: #1a1b1e;
}

/* Selection contrasts with both the lime contact section and dark footer strip. */
html[data-theme="light"] .contact::selection,
html[data-theme="light"] .contact *::selection { background: #151715; color: #f3f1ea; }
html[data-theme="light"] .footer::selection,
html[data-theme="light"] .footer *::selection { background: #f3f1ea; color: #151715; }

/* New portfolio cards follow the charcoal/bronze dark-theme palette. */
html[data-theme="dark"] .karkas-meister { background: #292d29; color: var(--ink); }
html[data-theme="dark"] .karkas-meister .project-watermark { color: #91a184; }
html[data-theme="dark"] .parfumed { background: #302b28; color: var(--ink); }
html[data-theme="dark"] .parfumed .project-watermark { color: #b39a83; }
html[data-theme="dark"] .lash-skincare { background: #2c2931; color: var(--ink); }
html[data-theme="dark"] .lash-skincare .project-watermark { color: #a79ab2; }

html[data-theme="dark"] .dive-center { background: #143f63; color: var(--ink); }
html[data-theme="dark"] .dive-center .project-watermark { color: #6bb4df; }

/* Source: responsive.css */
/* Tablet and phone layouts. Keep dark-background masks paired. */

/* Mobile composition: prices and descriptions get their own rows. */
@media (max-width: 1000px) {
  .projects { grid-template-columns: minmax(0, 1fr); }
  .project-featured { grid-column: auto; }
}

@media (max-width: 1100px) {
  .wrap { width: calc(100% - 64px); }
  .header-actions { gap: 16px; }
  .nav { gap: 16px; }
  .hero-main h1 { font-size: 7.3vw; }
  .hero-bottom { gap: 32px; }
  .intro { font-size: 16px; }
  .section-head { grid-template-columns: .8fr 2fr; }
  .approach-grid { gap: 40px; }
  .manifesto { padding: 32px; min-height: 430px; }
  .service-row h3 { font-size: 20px; }
  .price { font-size: 18px; }
  .project-window { border-width: 4px; }
  .contact-grid { grid-template-columns: 1.3fr 1fr; }
  .service-row { grid-template-columns: 32px minmax(0, 1.1fr) minmax(0, 1fr) 170px; }
  .hero-actions { flex-wrap: wrap; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .wrap { width: calc(100% - 40px); }
  .nav, .header-contact { display: none; }
  .hero { padding-top: 24px; }
  .hero-top .eyebrow:last-child { display: none; }
  .hero-bottom { grid-template-columns: 1fr; padding-bottom: 32px; }
  .hero-background-light { object-position: 40% center; }
  .work, .approach { padding: 64px 0; }
  .work { padding-top: 40px; }
  .section-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; }
  .section-label { max-width: none; padding: 0; }
  .projects { grid-template-columns: 1fr; gap: 32px; }
  .project-featured { grid-column: auto; }
  .project-featured .project-bottom h3 { font-size: 20px; }
  .project-shot { object-fit: contain; background: #f7f9f6; }
  .anima .project-shot, .rgs .project-shot { background: #151715; }
  .dive-center .project-shot { object-fit: cover; background: #081724; }
  .eco .project-watermark { transform: none; bottom: auto; left: 20px; }
  .expertise { padding: 64px 0; }
  .approach-grid { grid-template-columns: 1fr; gap: 40px; }
  .approach-copy > h2 { font-size: 28px; }
  .approach-copy > p { max-width: none; }
  .process { padding: 24px 0 56px; }
  .process-title .eyebrow { font-size: 9px; }
  .step-num { font-size: 30px; margin-bottom: 12px; }
  .contact { padding-top: 40px; }
  .contact-top { margin-bottom: 32px; }
  .contact-top .eyebrow { font-size: 10px; }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-copy p { max-width: 400px; }
  .hero-backdrop { padding-bottom: 24px; }
  html[data-theme="dark"] .hero-backdrop { padding-bottom: 40px; }
  html[data-theme="dark"] .hero-background-dark { object-position: 64% center; }
  html[data-theme="dark"] .hero-backdrop::after { background: linear-gradient(90deg, rgba(17,18,20,.66), rgba(17,18,20,.25) 90%); }
  html[data-theme="dark"] .work { padding-top: 32px; }
  html[data-theme="dark"] .expertise { background: linear-gradient(180deg, transparent 0%, #17181b 48px, #17181b calc(100% - 48px), transparent 100%); }
  html[data-theme="dark"] .hero-background-dark,
  html[data-theme="dark"] .hero-backdrop::after {
    mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 calc(100% - 140px), rgba(0,0,0,.85) calc(100% - 101px), rgba(0,0,0,.5) calc(100% - 66px), rgba(0,0,0,.14) calc(100% - 28px), transparent calc(100% - 6px), transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 calc(100% - 140px), rgba(0,0,0,.85) calc(100% - 101px), rgba(0,0,0,.5) calc(100% - 66px), rgba(0,0,0,.14) calc(100% - 28px), transparent calc(100% - 6px), transparent 100%);
  }
  .header { min-height: 80px; gap: 12px; }
  .header-actions { gap: 8px; }
  .mobile-menu { display: block; }
  .wordmark { font-size: 27px; }
  .theme-toggle { min-width: 44px; min-height: 44px; }
  .hero-main { display: block; }
  .hero-main h1 { font-size: clamp(34px, 10vw, 68px); max-width: 100%; }
  .hero-top { margin-bottom: 36px; }
  .hero-bottom { margin-top: 32px; gap: 24px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 12px; }
  .hero-actions .cta { width: 100%; min-width: 0; min-height: 56px; }
  .sub-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; }
  .intro { font-size: 15px; line-height: 1.75; }
  .hero-top .eyebrow { font-size: 9px; max-width: 290px; }
  .ticker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; padding: 18px 0; }
  .ticker i { display: none; }
  .ticker span:last-of-type { display: block; }
  .ticker span { font-size: 9px; line-height: 1.5; letter-spacing: .05em; }
  .service-row { grid-template-columns: 24px minmax(0, 1fr); gap: 8px 16px; padding: 28px 0; }
  .service-row .num { grid-column: 1; grid-row: 1; padding-top: 6px; }
  .service-row h3 { grid-column: 2; grid-row: 1; font-size: 20px; line-height: 1.35; }
  .service-row:last-child h3 { max-width: none; }
  .service-row .price { grid-column: 2; grid-row: 2; text-align: left; font-size: 18px; white-space: normal; }
  .price small { font-size: 11px; margin-top: 2px; }
  .service-row p { grid-column: 2; grid-row: 3; font-size: 14px; max-width: none; margin-top: 4px; }
  .services-note { font-size: 13px; }
  .section-head h2 { font-size: clamp(27px, 7.2vw, 38px); }
  .project-featured .project-media { aspect-ratio: 1.2; }
  .project-media { aspect-ratio: 1.18; }
  .project-name { left: 18px; top: 18px; font-size: 10px; }
  .project-name span { font-size: 10px; }
  .project-tag { right: 16px; top: 16px; font-size: 8px; }
  .project-window { width: 90%; height: 65%; right: -7%; bottom: 7%; }
  :is(.anima, .rgs, .karkas-meister, .parfumed, .lash-skincare, .dive-center) .project-window { width: 90%; height: 63%; right: -5%; bottom: 7%; }
  .new-city .project-window { width: 92%; height: auto; right: -5%; bottom: 12%; }
  .new-city .project-watermark { top: 88px; font-size: 40px; }
  .eco .project-watermark { top: 76px; font-size: 42px; }
  .project-link:not(.project-featured) .eco .project-watermark { top: 76px; left: 18px; font-size: 42px; }
  .project-link:not(.project-featured) .eco .project-window { width: 90%; }
  .anima .project-watermark, .rgs .project-watermark { top: 72px; font-size: 44px; }
  .project-link-label { min-height: 44px; margin-top: 8px; }
  .project-bottom { gap: 12px; }
  .project-bottom p { font-size: 14px; line-height: 1.7; }
  .manifesto { min-height: 330px; padding: 28px; }
  .manifesto h2 { font-size: clamp(33px, 9.2vw, 44px); }
  .manifesto .eyebrow:last-of-type { font-size: 9px; letter-spacing: .06em; }
  .principle p { font-size: 14px; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .step { min-width: 0; }
  .step p { max-width: none; overflow-wrap: break-word; }
  .step h3 { font-size: 15px; overflow-wrap: break-word; }
  .step p { font-size: 13px; }
  .process-title { flex-direction: column; align-items: flex-start; gap: 12px; }
  .contact h2 { font-size: clamp(34px, 9.2vw, 46px); }
  .contact .cta { min-width: 0; width: 100%; min-height: 56px; }
  .contact-links { gap: 12px 24px; }
  .contact-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .contact-wordmark { font-size: 24vw; line-height: 1; margin-top: 40px; margin-bottom: 0; padding-bottom: 20px; }
  .contact-wordmark sup { position: static; display: block; font-size: 10px; text-align: right; line-height: 1.3; letter-spacing: 0; margin-top: 6px; }
  .footer-inner { align-items: flex-start; flex-direction: column; gap: 12px; font-size: 12px; }
  .footer-inner a { display: inline-flex; align-items: center; min-height: 44px; margin-left: 0; }
}

@media (max-width: 480px) {
  .theme-toggle { padding: 10px; }
  #theme-label { display: none; }
}

@media (max-width: 359px) {
  .wrap { width: calc(100% - 32px); }
  .wordmark { font-size: 24px; }
  .hero-main h1 { font-size: 9.6vw; }
  .service-row { gap: 8px 12px; }
}

@media (max-width: 760px) {
  .portfolio-intro { padding: 24px 0 32px; }
  .portfolio-intro-top { gap: 16px; }
  .portfolio-intro-top .eyebrow { max-width: 52%; font-size: 9px; }
  .portfolio-intro h1 { margin: 32px 0 24px; font-size: clamp(30px, 6.5vw, 48px); }
  .portfolio-intro-bottom { flex-direction: column; gap: 24px; }
  .portfolio-intro-bottom > p { font-size: 15px; }
  .portfolio-total { width: 100%; justify-content: space-between; }
  .portfolio-list { padding: 32px 0 56px; }
  .portfolio-list .new-city .project-window { width: 90%; bottom: 8%; }
  .portfolio-list .new-city .project-watermark { top: 88px; font-size: 44px; }
  .portfolio-link { min-height: 76px; margin-top: 32px; font-size: 18px; }
  .portfolio-contact { align-items: flex-start; flex-direction: column; gap: 24px; padding: 40px 0 56px; }
  .portfolio-contact-link { width: 100%; font-size: 16px; }
}

/* Source: projects.css */
/* Native modal: editorial case study, with the page preserved underneath. */
html { scrollbar-gutter: stable; }
html.case-open { overflow-y: hidden; }

.case-dialog {
  position: fixed;
  inset: 0;
  width: min(1560px, calc(100% - 80px));
  height: min(820px, calc(100dvh - 80px));
  max-width: none;
  max-height: calc(100dvh - 80px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 32px 100px rgba(0, 0, 0, .35);
  overflow: clip;
  overscroll-behavior: contain;
}
.case-dialog:not([open]) { display: none; }
.case-dialog::backdrop { background: rgba(9, 10, 12, .78); }
.case-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); animation: case-enter 480ms var(--ease-out) both; }
.case-dialog[open]::backdrop { animation: surface-enter 400ms ease both; }
.case-dialog.is-closing { animation: case-exit 200ms ease both; }
.case-dialog.is-closing::backdrop { animation: case-backdrop-exit 200ms ease both; }
.case-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 68px;
  padding: 12px 28px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.case-close, .case-next {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.case-close { margin-right: -12px; font-size: 13px; font-weight: 600; }
.case-close svg, .case-next svg { width: 24px; height: 24px; flex-shrink: 0; }
.case-close:focus-visible, .case-next:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.case-content {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(360px, 1fr);
  gap: 32px;
  padding: 28px;
  min-height: 0;
}
.case-story { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 12px; }
.case-gallery { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 12px; min-width: 0; min-height: 0; }
.case-gallery-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.case-image-caption { font-size: 12px; text-align: center; color: var(--gray); }
.case-image-arrow { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 8px; border: 1px solid var(--line); background: transparent; color: inherit; cursor: pointer; }
.case-image-arrow svg { width: 24px; height: 24px; }
.case-thumbnails { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; overscroll-behavior-x: contain; }
.case-thumb { width: 96px; height: 64px; flex: 0 0 auto; padding: 3px; border: 1px solid var(--line); background: transparent; cursor: pointer; }
.case-thumb img { width: 100%; height: 100%; object-fit: contain; }
.case-thumb[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
html[data-theme="dark"] .case-thumb[aria-pressed="true"] { border-color: var(--metal); box-shadow: 0 0 0 1px var(--metal); }
.case-image-arrow:focus-visible, .case-thumb:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .case-image-arrow:hover { background: var(--ink); color: var(--paper); }
  .case-thumb:hover { border-color: var(--ink); }
}
.case-heading { max-width: 800px; }
.case-category { color: var(--gray); }
.case-heading h2 {
  margin: 20px 0;
  font-family: var(--display);
  font-size: clamp(30px, 3vw, 52px);
  line-height: 1.12;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
}
.case-heading h2:focus { outline: none; }
.case-lead { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.55; }
.case-scope { margin-top: 20px; font-size: 13px; color: var(--gray); }
.case-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 16px; }
.case-action { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 0; border: 0; background: transparent; color: inherit; font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.case-action svg { width: 18px; height: 18px; flex-shrink: 0; }
.case-action:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.case-status { color: var(--gray); font-size: 13px; }
.case-actions [hidden] { display: none; }
.case-preview {
  margin: 0;
  min-height: 0;
  padding: 12px;
  background: #e2e5d9;
  border: 1px solid var(--line);
}
.case-preview img { width: 100%; height: 100%; object-fit: contain; }
.case-dialog[data-project="anima"] .case-preview { background: #23212c; }
.case-dialog[data-project="rgs-service"] .case-preview { background: #ddd9d1; }
html[data-theme="dark"] .case-preview { background: #24262a; }
html[data-theme="dark"] .case-dialog[data-project="anima"] .case-preview { background: #222329; }
html[data-theme="dark"] .case-dialog[data-project="rgs-service"] .case-preview { background: #302a26; }
.case-details { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 32px; }
.case-details h3 { margin-bottom: 20px; color: var(--gray); }
.case-details p { font-size: 15px; line-height: 1.75; }
.case-features { margin: 24px 0 0; padding: 0; list-style: none; }
.case-features li { padding: 12px 0 12px 22px; border-top: 1px solid var(--line); position: relative; line-height: 1.6; font-size: 14px; }
.case-features li::before { content: ''; position: absolute; left: 0; top: 21px; width: 5px; height: 5px; background: var(--ink); transform: rotate(45deg); }
html[data-theme="dark"] .case-features li::before { background: var(--metal); }
.case-stack { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.case-stack > p { color: var(--gray); }
.case-stack ul { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; margin: 16px 0 0; padding: 0; }
.case-stack li { padding: 6px 12px; border: 1px solid var(--line); font-size: 12px; }
.case-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.case-next { text-align: left; padding-right: 0; }
.case-next span { display: grid; gap: 4px; font-size: 12px; color: var(--gray); }
.case-next strong { color: var(--ink); font-size: 16px; font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .case-close:hover { background: var(--ink); color: var(--paper); }
  .case-next:hover svg { transform: translate(3px, -3px); }
}
.case-close { transition: color 200ms ease, background-color 200ms ease; }
.case-next svg { transition: transform 250ms var(--ease-out); }
@keyframes case-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes case-exit { to { opacity: 0; transform: translateY(8px); } }
@keyframes case-backdrop-exit { to { opacity: 0; } }
@media (max-width: 1050px) {
  .case-dialog { width: min(880px, calc(100% - 24px)); height: auto; max-height: calc(100dvh - 24px); overflow: auto; }
  .case-dialog[open] { display: block; }
  .case-bar { min-height: 64px; padding: 10px 20px; }
  .case-content { grid-template-columns: 1fr; gap: 32px; padding: 24px 20px 20px; }
  .case-story { overflow: visible; padding-right: 0; }
  .case-gallery { grid-template-rows: auto auto auto; }
  .case-category { font-size: 10px; letter-spacing: .06em; }
  .case-preview { padding: 8px; aspect-ratio: 16 / 10; }
  .case-details { grid-template-columns: 1fr; gap: 28px; margin-top: 28px; }
  .case-details h3 { margin-bottom: 12px; }
  .case-details p, .case-features li { font-size: 15px; }
  .case-stack, .case-bottom { margin-top: 28px; }
}

@media (max-width: 480px) {
  .case-close span { display: none; }
  .case-close { padding: 10px; margin-right: -10px; }
}

/* A screenshot can be viewed almost edge-to-edge above its case dialog. */
.case-image-open { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: inherit; cursor: zoom-in; }
.case-image-open:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.case-enlarge-label { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: .35em; padding: 8px 12px; background: #111214; color: #efeee9; border: 1px solid #56585b; font-size: 12px; pointer-events: none; }
.image-dialog {
  position: fixed;
  inset: 0;
  width: calc(100% - 32px);
  height: calc(100dvh - 32px);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 12px 20px;
  border: 1px solid #36383c;
  background: #101113;
  color: #efeee9;
  overflow: clip;
  color-scheme: dark;
  overscroll-behavior: contain;
}
.image-dialog:not([open]) { display: none; }
.image-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; animation: image-view-enter 300ms var(--ease-out) both; }
.image-dialog::backdrop { background: rgba(5, 6, 8, .94); }
.image-dialog[open]::backdrop { animation: surface-enter 250ms ease both; }
.image-dialog.is-closing { animation: image-view-exit 180ms ease both; }
.image-dialog.is-closing::backdrop { animation: case-backdrop-exit 180ms ease both; }
.image-view-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.image-view-bar .eyebrow { font-size: 11px; letter-spacing: .06em; }
.image-view-close { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border: 1px solid #55575b; background: transparent; color: inherit; font-size: 13px; cursor: pointer; }
.image-view-close svg { width: 24px; height: 24px; flex-shrink: 0; }
.image-view-close:focus-visible, .image-dialog .case-image-arrow:focus-visible { outline: 2px solid #efeee9; outline-offset: 3px; }
.image-viewport { min-height: 0; min-width: 0; }
.image-viewport img { width: 100%; height: 100%; object-fit: scale-down; }
.image-view-controls { display: flex; align-items: center; justify-content: center; gap: 24px; }
.image-view-controls p { text-align: center; font-size: 12px; color: #c0c1c3; }
.image-dialog .case-image-arrow { border-color: #55575b; color: #efeee9; }
@media (hover: hover) and (pointer: fine) {
  .image-view-close:hover, .image-dialog .case-image-arrow:hover { background: #efeee9; color: #111214; }
  .case-image-open:hover .case-enlarge-label { background: #efeee9; color: #111214; }
}
@media (max-width: 760px) {
  .image-dialog { width: calc(100% - 12px); height: calc(100dvh - 12px); padding: 8px; }
  .image-view-bar { gap: 12px; align-items: flex-start; }
  .image-view-bar .eyebrow { max-width: 48%; padding-top: 12px; overflow-wrap: anywhere; }
  .image-view-close { gap: 8px; font-size: 11px; padding: 8px; }
  .image-view-controls { gap: 12px; }
  .case-enlarge-label { right: 8px; bottom: 8px; font-size: 11px; padding: 6px 8px; }
}
@keyframes image-view-enter { from { opacity: 0; transform: scale(.99); } to { opacity: 1; transform: none; } }
@keyframes image-view-exit { to { opacity: 0; } }

/* Japanese letter transcript beside the original action; uses the case's own scroll. */
.case-letter-translation { margin-top: 20px; border-block: 1px solid var(--line); }
.case-letter-translation[hidden] { display: none; }
.case-letter-translation summary { min-height: 44px; padding: 12px 4px; cursor: pointer; font-size: 14px; font-weight: 600; }
.case-letter-translation summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.letter-translation-body { padding: 8px 4px 20px; overflow-wrap: anywhere; font-size: 15px; line-height: 1.9; }
.letter-translation-body p + p { margin-top: 18px; }
.letter-translation-body h3 { margin: 24px 0 16px; font-size: 20px; font-weight: 600; }
.letter-translation-body .letter-translation-note { margin-bottom: 24px; font-size: 12px; color: var(--gray); }
.letter-translation-signoff { text-align: right; }

html.letter-open { overflow-y: hidden; }
.letter-dialog { position: fixed; inset: 0; width: min(860px, calc(100% - 48px)); height: min(1060px, calc(100dvh - 48px)); max-width: none; max-height: calc(100dvh - 48px); margin: auto; padding: 0; border: 1px solid var(--line); background: var(--paper); color: var(--ink); box-shadow: 0 32px 100px rgba(0,0,0,.35); overflow: clip; overscroll-behavior: contain; }
.letter-dialog:not([open]) { display: none; }
.letter-dialog[open] { display: grid; grid-template-rows: auto minmax(0,1fr) auto; animation: case-enter 360ms var(--ease-out) both; }
.letter-dialog::backdrop { background: rgba(9,10,12,.78); }
.letter-dialog.is-closing { animation: case-exit 180ms ease both; }
.letter-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 24px; border-bottom: 1px solid var(--line); }
.letter-bar .eyebrow { font-size: 10px; color: var(--gray); }
.letter-bar h2 { margin-top: 6px; font-size: 17px; font-weight: 600; }
.letter-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px; }
.letter-original { width: min(100%,625px); height: auto; margin-inline: auto; background: #fff; }
.letter-footer { padding: 12px 24px; border-top: 1px solid var(--line); }
.letter-footer .case-action { display: flex; justify-content: space-between; min-height: 48px; }
@media (max-width: 760px) {
  .letter-dialog { width: calc(100% - 16px); height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); }
  .letter-bar { padding: 12px 16px; gap: 12px; }
  .letter-bar h2 { font-size: 15px; }
  .letter-content { padding: 16px; }
  .letter-footer { padding: 10px 16px; }
}
@media (prefers-reduced-motion: reduce) { .letter-dialog[open], .letter-dialog.is-closing { animation: none; } }

/* Repeated gallery clicks must not select or drag the image strip. */
.case-gallery, .image-dialog { -webkit-user-select: none; user-select: none; }
.case-gallery img, .image-dialog img { -webkit-user-drag: none; }

/* Full pages remain readable at their original pixel size without upscaling. */
.image-view-actions { display: flex; align-items: center; gap: 12px; }
.image-view-zoom { padding: 8px 12px; min-height: 44px; border: 1px solid #55575b; color: inherit; background: transparent; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.image-view-zoom[aria-pressed="true"] { background: #efeee9; color: #111214; }
.image-view-zoom:focus-visible, .image-viewport:focus-visible { outline: 2px solid #efeee9; outline-offset: 2px; }
.image-dialog.is-natural-size .image-viewport { display: flex; overflow: auto; overscroll-behavior: contain; }
.image-dialog.is-natural-size .image-viewport img { display: block; width: auto; height: auto; max-width: none; max-height: none; flex-shrink: 0; margin: auto; }
@media (max-width: 760px) {
  .image-view-bar { flex-wrap: wrap; }
  .image-view-bar > .eyebrow { max-width: none; width: 100%; padding-top: 0; }
  .image-view-actions { gap: 8px; margin-left: auto; }
  .image-view-zoom { font-size: 11px; padding: 8px; }
}

/* Loading stays in the image area; original screenshot geometry never changes. */
.case-preview, .image-viewport { position: relative; }
.case-preview img, .image-viewport img { transition: opacity 180ms ease; }
.case-preview img[data-load-state="loading"], .case-preview img[data-load-state="error"],
.image-viewport img[data-load-state="loading"], .image-viewport img[data-load-state="error"] { opacity: 0; }
.gallery-feedback { position: absolute; inset: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: inherit; font-size: 13px; text-align: center; pointer-events: none; }
.gallery-feedback[hidden], .gallery-feedback button[hidden] { display: none; }
.gallery-feedback button { min-height: 44px; padding: 8px 16px; border: 1px solid currentColor; color: inherit; background: transparent; cursor: pointer; pointer-events: auto; }
.case-image-open { touch-action: pan-y; }
.image-dialog:not(.is-natural-size) .image-viewport { touch-action: pan-y; }
.case-request { font-weight: 600; }
.request-project-context { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 12px 0; margin: 16px 0 4px; border-bottom: 1px solid var(--line); font-size: 13px; }
.request-project-context[hidden] { display: none; }
.request-project-context button { min-height: 44px; color: inherit; background: none; border: 0; text-decoration: underline; cursor: pointer; }
.case-static { margin: 40px 0 72px; max-width: 1000px; }
.case-static h2 { font: 500 clamp(28px,6vw,64px)/1.15 var(--display); margin: 16px 0; }
.case-static h3 { margin: 24px 0 12px; }
.case-static p { max-width: 760px; line-height: 1.7; margin: 16px 0; }
.case-static img { width: 100%; height: auto; margin: 24px 0; }
.case-static .case-actions { margin: 24px 0; }
.not-found { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); align-items: center; gap: 24px; padding-top: clamp(64px,10vh,120px); padding-bottom: 80px; min-height: 70vh; }
.not-found h1 { font: 500 clamp(36px,5vw,76px)/1.1 var(--display); letter-spacing: -.045em; max-width: 1000px; margin: 32px 0; }
.not-found-copy > p { max-width: 580px; line-height: 1.7; color: var(--gray); }
.not-found-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.not-found-actions a { min-height: 48px; padding: 12px 20px; border: 1px solid var(--line); display: inline-flex; align-items: center; gap: 24px; }
.not-found-actions a:first-child { background: var(--ink); color: var(--paper); }
@media (prefers-reduced-motion: reduce) { .case-preview img, .image-viewport img { transition: none; } }

/* Closed alpha-cutout sculptures, with a soft safety fade around the canvas. */
.not-found-copy { min-width: 0; position: relative; z-index: 1; }
.not-found-art { display: grid; place-items: center; min-width: 0; margin: 0; width: 100%; aspect-ratio: 1; pointer-events: none; user-select: none; -webkit-mask-image: radial-gradient(ellipse at center,#000 62%,#000 72%,transparent 100%); mask-image: radial-gradient(ellipse at center,#000 62%,#000 72%,transparent 100%); }
.not-found-art img { grid-area: 1 / 1; width: 100%; height: auto; object-fit: contain; }
.not-found-art-light { display: none; }
html[data-theme="light"] .not-found-art-light { display: block; }
html[data-theme="light"] .not-found-art-dark { display: none; }
@media (max-width: 900px) {
  .not-found { grid-template-columns: minmax(0,1fr); gap: 12px; padding-top: 56px; padding-bottom: 40px; }
  .not-found h1 { font-size: clamp(36px,8vw,64px); }
  .not-found-art { width: min(70vw,320px); justify-self: center; }
}

/* Source: motion.css */
/* Motion is enhancement: content stays visible without JavaScript. */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --motion-fast: 180ms;
}

.hero-line {
  overflow: clip;
  padding: 0 .05em .13em;
  margin: 0 -.05em -.13em;
}

/* Extra room keeps the lowered, rotated underline inside the reveal clip. */
.hero-line:last-child { padding-bottom: .26em; margin-bottom: -.26em; }

.hero-line-inner {
  width: fit-content;
  max-width: 100%;
}

.motion-ready .hero-line-inner {
  animation: hero-line-enter 1000ms var(--ease-out) both;
}

.motion-ready .hero-line:nth-child(2) .hero-line-inner { animation-delay: 100ms; }
.motion-ready .hero-line:nth-child(3) .hero-line-inner { animation-delay: 200ms; }
.motion-ready .title-final::after {
  animation: underline-enter 850ms var(--ease-out) 700ms both;
}

.cta, .theme-toggle, .project-tag, .project-link-label {
  transition: color var(--motion-fast), background-color var(--motion-fast), border-color var(--motion-fast);
}

.cta svg, .project-link-label svg {
  transition: transform 250ms var(--ease-out);
}

.project-window {
  --preview-rotation: -5deg;
  transform: rotate(var(--preview-rotation));
  transition: transform 450ms var(--ease-out);
}

.reveal-pending { opacity: 0; }
.is-revealed[data-reveal] {
  animation: heading-enter 750ms var(--ease-out) var(--reveal-delay, 0ms) backwards;
}
.is-revealed[data-reveal="project"] { animation-name: project-enter; animation-duration: 850ms; }
.is-revealed[data-reveal="row"] { animation-name: row-enter; animation-duration: 600ms; }
.is-revealed[data-reveal="step"] { animation-name: step-enter; }
.is-revealed[data-reveal="manifesto"] { animation-name: surface-enter; }
.is-revealed[data-reveal="wordmark"] { animation-name: wordmark-enter; animation-duration: 950ms; }

html[data-theme="dark"].motion-ready .contact::before { opacity: 0; }
html[data-theme="dark"].motion-ready .contact.is-in-view::before {
  opacity: 1;
  animation: arc-enter 1200ms var(--ease-out) backwards;
}

@media (hover: hover) and (pointer: fine) {
  .cta:hover svg, .project-link:hover .project-link-label svg { transform: translate(3px, -3px); }
  .project-link:hover .project-window { transform: translateY(-6px) rotate(calc(var(--preview-rotation) * .8)) scale(1.015); }
  .theme-toggle:hover { background-color: var(--ink); color: var(--paper); }
}

.cta:focus-visible svg, .project-link:focus-visible .project-link-label svg { transform: translate(3px, -3px); }

@keyframes hero-line-enter {
  from { transform: translateY(110%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes underline-enter {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0); }
}
@keyframes heading-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes project-enter {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes row-enter {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: none; }
}
@keyframes step-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes surface-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes wordmark-enter {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes arc-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 760px) {
  .motion-ready .hero-line-inner { animation-duration: 850ms; }
  .is-revealed[data-reveal="project"] { animation-name: heading-enter; }
  .project-window { --preview-rotation: -3deg; transform: rotate(var(--preview-rotation)); }
}

/* Snapshot crossfade also blends photo/gradient changes. No animation on load. */
html.theme-transition::view-transition-group(root) { animation: none; }
html.theme-transition::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
html.theme-transition::view-transition-new(root) {
  animation: theme-dissolve 650ms cubic-bezier(.4, 0, .2, 1) both;
  mix-blend-mode: normal;
}
html.theme-transition::view-transition { pointer-events: none; }
@keyframes theme-dissolve { from { opacity: 0; } to { opacity: 1; } }

/* Older browsers interpolate colours and crossfade the two hero images. */
html.theme-fallback, html.theme-fallback body,
html.theme-fallback .site-shell, html.theme-fallback .site-shell *,
html.theme-fallback .site-shell *::before, html.theme-fallback .site-shell *::after,
html.theme-fallback .footer, html.theme-fallback .footer * {
  transition: color 650ms ease, background-color 650ms ease, border-color 650ms ease, box-shadow 650ms ease;
}
html.theme-fallback .hero-background-image { transition: opacity 650ms ease; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .image-dialog::backdrop, .case-dialog::backdrop { animation: none !important; }
  ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .reveal-pending { opacity: 1; }
  html[data-theme="dark"].motion-ready .contact::before { opacity: 1; }
}

/* Source: language.css */
/* Expandable locale selector. Native names and SVGs avoid flags/emoji fonts. */
.language-switch { position: relative; flex: none; color: var(--ink); }
.language-switch[hidden] { display: none; }
.language-switch summary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 8px 10px; border: 1px solid var(--line);
  font-size: 12px; font-weight: 700; cursor: pointer; list-style: none;
  background: transparent;
}
.language-switch summary::-webkit-details-marker { display: none; }
.language-switch svg { fill: none; stroke: currentColor; stroke-width: 1.5; flex: none; }
.language-globe { width: 18px; height: 18px; }
.language-chevron { width: 12px; height: 12px; transition: transform .25s ease; }
.language-switch[open] .language-chevron { transform: rotate(180deg); }
.language-switch[open] summary { background: var(--ink); color: var(--paper); }
.language-options {
  position: absolute; z-index: 30; top: calc(100% + 10px); right: 0;
  width: 220px; max-width: calc(100vw - 32px); max-height: min(360px, 65vh);
  overflow-y: auto; padding: 6px; background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); box-shadow: 0 16px 40px rgb(0 0 0 / .16);
}
.language-switch[open] .language-options { animation: language-enter .22s ease-out both; }
.language-options button {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px;
  padding: 10px 12px; border: 0; text-align: left; background: transparent;
  color: inherit; font-family: var(--body); font-size: 14px; cursor: pointer;
}
.language-options button:lang(ja) { font-family: 'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif; }
.language-options button:lang(zh) { font-family: 'PingFang SC','Microsoft YaHei','Noto Sans CJK SC',sans-serif; }
.language-code { min-width: 26px; font-family: 'Manrope',Arial,sans-serif; font-size: 10px; font-weight: 700; opacity: .6; }
.language-options button::after { content: ''; margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: transparent; flex: none; }
.language-options button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.language-options button[aria-pressed="true"]::after { background: currentColor; }
.language-options button:hover:not([aria-pressed="true"]) { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.language-switch summary:focus-visible, .language-options button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@keyframes language-enter { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .language-switch[open] .language-options { animation: none; }
  .language-chevron { transition: none; }
}
/* System CJK fonts keep download size unchanged. */
html:lang(ja) {
  --display: 'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;
  --body: 'Manrope','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;
}
html:lang(zh) {
  --display: 'PingFang SC','Microsoft YaHei','Noto Sans CJK SC',sans-serif;
  --body: 'Manrope','PingFang SC','Microsoft YaHei','Noto Sans CJK SC',sans-serif;
}
html:is(:lang(ja), :lang(zh)) body { line-break: strict; }
html:is(:lang(ja), :lang(zh)) :is(h1, h2, h3) { letter-spacing: -.025em; }
html:is(:lang(ja), :lang(zh)) .hero-main h1 { font-size: clamp(54px, 7.8vw, 112px); line-height: 1.2; }
html:is(:lang(ja), :lang(zh)) .eyebrow { letter-spacing: .05em; }
html:is(:lang(ja), :lang(zh)) :is(.project-watermark, .contact-wordmark) { font-family: 'Unbounded',Arial,sans-serif; }
html:is(:lang(ja), :lang(zh), :lang(en)) .price { white-space: normal; }
html:is(:lang(ja), :lang(zh), :lang(en)) .service-row h3 { overflow-wrap: anywhere; }
html:is(:lang(ja), :lang(zh)) .manifesto h2 { line-height: 1.25; }
html:lang(en) .hero-main h1 { font-size: clamp(48px, 7.2vw, 104px); }
.header-actions { gap: 16px; }
@media (max-width: 1100px) {
  .header-contact { display: none; }
  #theme-label { display: none; }
  .header { gap: 20px; }
}
@media (max-width: 760px) {
  .header { gap: 12px; }
  .header-actions { gap: 6px; position: relative; }
  .language-switch { position: static; }
  .language-switch summary { gap: 5px; padding-inline: 7px; }
  .language-globe { width: 16px; height: 16px; }
  html:is(:lang(ja), :lang(zh)) .hero-main h1 { font-size: clamp(32px, 8.8vw, 60px); }
  html:lang(en) .hero-main h1 { font-size: clamp(30px, 8.2vw, 56px); }
  html:is(:lang(ja), :lang(zh)) .contact h2 { font-size: clamp(29px, 7.9vw, 42px); }
  html:is(:lang(ja), :lang(zh)) .manifesto h2 { font-size: clamp(31px, 8.5vw, 42px); }
}

/* User-initiated locale changes dissolve both text and changed layout. */
html.language-transition::view-transition-group(root) { animation: none; }
html.language-transition::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
html.language-transition::view-transition-new(root) {
  animation: language-dissolve 420ms cubic-bezier(.4, 0, .2, 1) both;
  mix-blend-mode: normal;
}
html.language-transition::view-transition { pointer-events: none; }
@keyframes language-dissolve { from { opacity: 0; } to { opacity: 1; } }
html.language-fade-out :is(.site-shell, .footer, dialog[open]) {
  opacity: .25; transition: opacity 150ms ease;
}
html.language-fade-in :is(.site-shell, .footer, dialog[open]) {
  opacity: 1; transition: opacity 300ms ease;
}
@media (prefers-reduced-motion: reduce) {
  html.language-transition::view-transition-new(root) { animation: none; }
  html:is(.language-fade-out, .language-fade-in) :is(.site-shell, .footer, dialog[open]) { opacity: 1; transition: none; }
}

/* Localized company/store estimates share a service row; RU/JA retain one price. */
.price-tier { display: block; }
.price-tier-label, .price-tier--store { display: none; }
html:is(:lang(en), :lang(zh)) .price-tier-label {
  display: block; font-size: 11px; font-weight: 400; line-height: 1.5; opacity: .72;
}
html:is(:lang(en), :lang(zh)) .price-tier--store { display: block; margin-top: 10px; }

/* Source: form.css */
/* Enquiry preview uses the contact section palette in both themes. */
.contact-grid { align-items: start; }
.contact-grid > h2 { position: sticky; top: 120px; }
.contact-copy > p:first-child { max-width: 38ch; margin-bottom: 28px; }
.request-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 18px; margin: 0 0 20px; min-width: 0; }
.request-field { display: grid; align-content: start; gap: 10px; min-width: 0; }
.request-field-wide, .request-form > .cta, .request-availability, .request-status { grid-column: 1 / -1; }
.request-form label { font-size: 12px; font-weight: 600; line-height: 1.5; }
.request-form input, .request-form textarea { display: block; width: 100%; min-width: 0; min-height: 54px; padding: 15px 16px; border: 1px solid rgb(21 23 21 / .26); border-radius: 8px; background: rgb(255 255 255 / .16); color: inherit; font: inherit; font-size: 16px; line-height: 1.5; transition: border-color .2s, background-color .2s; }
.request-form textarea { min-height: 144px; resize: vertical; }
.request-form :is(input,textarea):hover { border-color: rgb(21 23 21 / .55); }
.request-form :is(input,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 3px; background: rgb(255 255 255 / .26); }
.request-form .cta { width: 100%; min-width: 0; margin-top: 2px; border: 1px solid currentColor; }
.contact .request-form .cta:disabled { background: transparent; color: inherit; border-color: rgb(21 23 21 / .25); opacity: .48; cursor: not-allowed; }
.contact-copy .request-availability { max-width: 44ch; margin: -8px 0 4px; font-size: 12px; line-height: 1.7; opacity: .72; }
.contact-copy .request-status { max-width: none; margin: 0; overflow-wrap: anywhere; font-size: 14px; }
.request-status:empty { display: none; }
.request-trap { display: none; }
.contact-copy > .cta { display: flex; width: 100%; min-width: 0; }
html[data-theme="dark"] .request-form :is(input,textarea) { border-color: rgb(231 226 217 / .25); background: rgb(231 226 217 / .035); }
html[data-theme="dark"] .request-form :is(input,textarea):hover { border-color: rgb(231 226 217 / .5); }
html[data-theme="dark"] .request-form :is(input,textarea):focus-visible { background: rgb(231 226 217 / .075); }
html[data-theme="dark"] .contact .request-form .cta:disabled { border-color: rgb(231 226 217 / .3); }
@media(max-width:1000px) { .request-form { grid-template-columns: minmax(0,1fr); gap: 18px; } }
@media(max-width:760px) { .contact-grid > h2 { position: static; } .request-form { gap: 18px; } .request-form textarea { min-height: 132px; } }
@media(prefers-reduced-motion:reduce) { .request-form :is(input,textarea) { transition: none; } }