/* Philip Sams portfolio: hand-written static rebuild of the Framer site. */

/* Fonts: Inter (Framer-hosted files) + Inter 600/900, Inter Tight 600, Poppins (Google Fonts), all self-hosted */
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(../assets/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYAZJhiI2B.woff2) format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(../assets/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYAZthiI2B.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(../assets/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYAZNhiI2B.woff2) format("woff2");unicode-range:U+1F00-1FFF}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(../assets/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYAZxhiI2B.woff2) format("woff2");unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(../assets/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYAZBhiI2B.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}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(../assets/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYAZFhiI2B.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}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(../assets/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYAZ9hiA.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}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:600;font-display:swap;src:url(../assets/InterTight-NGSnv5HMAFg6IuGlBNMjxJEL2VmU3NS7Z2mj0QiaVi5SkK8.woff2) format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:600;font-display:swap;src:url(../assets/InterTight-NGSnv5HMAFg6IuGlBNMjxJEL2VmU3NS7Z2mj0QiaXy5SkK8.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:600;font-display:swap;src:url(../assets/InterTight-NGSnv5HMAFg6IuGlBNMjxJEL2VmU3NS7Z2mj0QiaVy5SkK8.woff2) format("woff2");unicode-range:U+1F00-1FFF}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:600;font-display:swap;src:url(../assets/InterTight-NGSnv5HMAFg6IuGlBNMjxJEL2VmU3NS7Z2mj0QiaWC5SkK8.woff2) format("woff2");unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:600;font-display:swap;src:url(../assets/InterTight-NGSnv5HMAFg6IuGlBNMjxJEL2VmU3NS7Z2mj0QiaVC5SkK8.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}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:600;font-display:swap;src:url(../assets/InterTight-NGSnv5HMAFg6IuGlBNMjxJEL2VmU3NS7Z2mj0QiaVS5SkK8.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}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:600;font-display:swap;src:url(../assets/InterTight-NGSnv5HMAFg6IuGlBNMjxJEL2VmU3NS7Z2mj0QiaWy5S.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}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format("woff2");unicode-range:U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/pxiEyp8kv8JHgFVrJJnecmNE.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}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/pxiEyp8kv8JHgFVrJJfecg.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}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(../assets/pxiByp8kv8JHgFVrLEj6Z11lFc-K.woff2) format("woff2");unicode-range:U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(../assets/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.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}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(../assets/pxiByp8kv8JHgFVrLEj6Z1xlFQ.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}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(../assets/pxiByp8kv8JHgFVrLCz7Z11lFc-K.woff2) format("woff2");unicode-range:U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(../assets/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.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}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(../assets/pxiByp8kv8JHgFVrLCz7Z1xlFQ.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}
@font-face{font-family:"Inter";font-style:normal;font-weight:900;font-display:swap;src:url(../assets/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuBWYAZJhiI2B.woff2) format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:"Inter";font-style:normal;font-weight:900;font-display:swap;src:url(../assets/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuBWYAZthiI2B.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Inter";font-style:normal;font-weight:900;font-display:swap;src:url(../assets/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuBWYAZNhiI2B.woff2) format("woff2");unicode-range:U+1F00-1FFF}
@font-face{font-family:"Inter";font-style:normal;font-weight:900;font-display:swap;src:url(../assets/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuBWYAZxhiI2B.woff2) format("woff2");unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:900;font-display:swap;src:url(../assets/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuBWYAZBhiI2B.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}
@font-face{font-family:"Inter";font-style:normal;font-weight:900;font-display:swap;src:url(../assets/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuBWYAZFhiI2B.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}
@font-face{font-family:"Inter";font-style:normal;font-weight:900;font-display:swap;src:url(../assets/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuBWYAZ9hiA.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}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/5vvr9Vy74if2I6bQbJvbw7SY1pQ.woff2) format("woff2");unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/EOr0mi4hNtlgWNn9if640EZzXCo.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/Y9k9QrlZAqio88Klkmbd8VoMQc.woff2) format("woff2");unicode-range:U+1F00-1FFF}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/OYrD2tBIBPvoJXiIHnLoOXnY9M.woff2) format("woff2");unicode-range:U+0370-03FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/JeYwfuaPfZHQhEG8U5gtPDZ7WQ.woff2) format("woff2");unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/GrgcKwrN6d3Uz8EwcLHZxwEfC4.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/b6Y37FthZeALduNqHicBT6FutY.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(../assets/5A3Ce6C9YYmCjpQx9M4inSaKU.woff2) format("woff2");unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(../assets/Qx95Xyt0Ka3SGhinnbXIGpEIyP4.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(../assets/6mJuEAguuIuMog10gGvH5d3cl8.woff2) format("woff2");unicode-range:U+1F00-1FFF}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(../assets/xYYWaj7wCU5zSQH0eXvSaS19wo.woff2) format("woff2");unicode-range:U+0370-03FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(../assets/otTaNuNpVK4RbdlT7zDDdKvQBA.woff2) format("woff2");unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(../assets/UjlFhCnUjxhNfep4oYBPqnEssyo.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(../assets/DolVirEGb34pEXEp8t8FQBSK4.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url(../assets/DpPBYI0sL4fYLgAkX8KXOPVt7c.woff2) format("woff2");unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url(../assets/4RAEQdEOrcnDkhHiiCbJOw92Lk.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url(../assets/1K3W8DizY3v4emK8Mb08YHxTbs.woff2) format("woff2");unicode-range:U+1F00-1FFF}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url(../assets/tUSCtfYVM1I1IchuyCwz9gDdQ.woff2) format("woff2");unicode-range:U+0370-03FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url(../assets/VgYFWiwsAC5OYxAycRXXvhze58.woff2) format("woff2");unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url(../assets/syRNPWzAMIrcJ3wIlPIP43KjQs.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url(../assets/GIryZETIX4IFypco5pYZONKhJIo.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url(../assets/DXD0Q7LSl7HEvDzucnyLnGBHM.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter";font-style:italic;font-weight:700;font-display:swap;src:url(../assets/H89BbHkbHDzlxZzxi8uPzTsp90.woff2) format("woff2");unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:"Inter";font-style:italic;font-weight:700;font-display:swap;src:url(../assets/u6gJwDuwB143kpNK1T1MDKDWkMc.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Inter";font-style:italic;font-weight:700;font-display:swap;src:url(../assets/43sJ6MfOPh1LCJt46OvyDuSbA6o.woff2) format("woff2");unicode-range:U+1F00-1FFF}
@font-face{font-family:"Inter";font-style:italic;font-weight:700;font-display:swap;src:url(../assets/wccHG0r4gBDAIRhfHiOlq6oEkqw.woff2) format("woff2");unicode-range:U+0370-03FF}
@font-face{font-family:"Inter";font-style:italic;font-weight:700;font-display:swap;src:url(../assets/WZ367JPwf9bRW6LdTHN8rXgSjw.woff2) format("woff2");unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter";font-style:italic;font-weight:700;font-display:swap;src:url(../assets/QxmhnWTzLtyjIiZcfaLIJ8EFBXU.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter";font-style:italic;font-weight:700;font-display:swap;src:url(../assets/2A4Xx7CngadFGlVV4xrO06OBHY.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Inter";font-style:italic;font-weight:400;font-display:swap;src:url(../assets/CfMzU8w2e7tHgF4T4rATMPuWosA.woff2) format("woff2");unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:"Inter";font-style:italic;font-weight:400;font-display:swap;src:url(../assets/867QObYax8ANsfX4TGEVU9YiCM.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Inter";font-style:italic;font-weight:400;font-display:swap;src:url(../assets/Oyn2ZbENFdnW7mt2Lzjk1h9Zb9k.woff2) format("woff2");unicode-range:U+1F00-1FFF}
@font-face{font-family:"Inter";font-style:italic;font-weight:400;font-display:swap;src:url(../assets/cdAe8hgZ1cMyLu9g005pAW3xMo.woff2) format("woff2");unicode-range:U+0370-03FF}
@font-face{font-family:"Inter";font-style:italic;font-weight:400;font-display:swap;src:url(../assets/DOfvtmE1UplCq161m6Hj8CSQYg.woff2) format("woff2");unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter";font-style:italic;font-weight:400;font-display:swap;src:url(../assets/vFzuJY0c65av44uhEKB6vyjFMg.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter";font-style:italic;font-weight:400;font-display:swap;src:url(../assets/tKtBcDnBMevsEEJKdNGhhkLzYo.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB}

/* ==========================================================================
   Tokens
   Breakpoints (mirroring the Framer source):
     desktop  >= 1200px
     tablet   810px – 1199.98px
     phone    <= 809.98px
   ========================================================================== */
:root {
  --font-sans: "Inter", sans-serif;
  --font-tight: "Inter Tight", "Inter", sans-serif;
  --font-poppins: "Poppins", sans-serif;
  --font-basis: "Basis Grotesque Pro", sans-serif;

  --c-bg: #0d0d0f;          /* page background and every dark band */
  --c-white: #fff;
  --c-text-soft: #d4d4d4;   /* default body / intro copy on dark */
  --c-text-warm: #e6dfdf;   /* sub-heading preset colour */
  --c-text-cool: #c4c4c4;   /* Solvr copy */
  --c-text-muted: #808080;  /* body copy on white (Slurpee) */
  --c-text-grey: #8a8a8a;   /* body copy on white (Roost, Solvr) */
  --c-panel: rgba(255, 255, 255, .1);
  --c-panel-strong: rgba(255, 255, 255, .15);

  /* Type scale (desktop values; overridden per breakpoint below) */
  --fs-display: 72px;   --ls-display: -3.8px; --lh-display: 1.2;
  --fs-title: 50px;
  --fs-lead: 32px;
  --fs-subhead: 28px;
  --fs-body: 20px;

  --radius-lg: 20px;
  --radius-md: 16px;

  /* Layout grid: every section pads by --section-pad-x and centres a
     --content-max column; centred hero copy and hero media use --measure /
     --media-max inside that column; two-up rows split it with --col-gap. */
  --content-max: 1000px;
  --section-pad-x: 40px;
  --measure: 860px;
  --media-max: 860px;
  --col-gap: 60px;
  /* Inline padding that puts full-bleed content on the column edge */
  --gutter: max(var(--section-pad-x), calc((100% - var(--content-max)) / 2));
}

@media (max-width: 1199.98px) {
  :root {
    --measure: 640px;
    --media-max: 100%;
    --fs-display: 62px;
    --fs-title: 40px;
    --fs-lead: 20px;
    --fs-subhead: 22px;
    --fs-body: 16px;
  }
}

@media (max-width: 809.98px) {
  :root {
    --section-pad-x: 20px;
    --measure: 100%;
    --fs-display: 40px; --ls-display: -2.2px; --lh-display: 1;
    --fs-title: 32px;
    --fs-lead: 18px;
    --fs-subhead: 20px;

    /* Phone vertical rhythm: every phone spacing rule below uses one of these.
       Sections that share a background with the previous section drop their
       top padding, so exactly one --space-section separates them. */
    --space-top: 40px;       /* first section, below the nav */
    --space-section: 60px;   /* section padding-block */
    --space-list: 60px;      /* between repeated cards (work, features, grids) */
    --space-block: 40px;     /* between blocks inside a section */
    --space-media: 24px;     /* media ↔ its caption/copy, media ↔ media */
    --space-stack: 16px;     /* heading ↔ copy, paragraph ↔ paragraph */
    --space-tight: 8px;      /* card title ↔ card copy */
    --space-end: 40px;       /* extra room after the last section */
  }
}

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

html, body { margin: 0; padding: 0; }

body {
  background: var(--c-bg);
  color: var(--c-white);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }

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

a { color: inherit; }

/* Page shell: flat off-black (body background) behind all content */
.page {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
}

.page > * { position: relative; width: 100%; }

/* Generic media box: an image that fills a sized frame */
.media { position: relative; display: block; overflow: hidden; }
.media > img, .media > picture > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.media--cover > img { object-fit: cover; }
.media--bottom > img { object-position: center bottom; }
.media--left > img { object-position: left center; }

/* ==========================================================================
   Navigation
   ========================================================================== */
.site-nav {
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px var(--gutter);
}

.site-nav__top { display: flex; align-items: center; }

.site-nav__logo { display: block; width: 28px; height: 28px; }
.site-nav__logo img { width: 28px; height: 28px; }

.site-nav__links {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__links a {
  display: block;
  color: var(--c-white);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 2em;
  white-space: nowrap;
  user-select: none;
}

/* Phone: same single row, slightly tighter. Logo + both links need ~150px. */
@media (max-width: 809.98px) {
  .site-nav { height: 56px; gap: 16px; padding-block: 8px; }
  .site-nav__links { gap: 16px; }
  .site-nav__links a { line-height: 40px; } /* 40px-tall tap target */
}

/* ==========================================================================
   Type presets
   ========================================================================== */
.t-display {
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  text-align: center;
  color: var(--c-white);
}

.t-title {
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: -2.1px;
  line-height: 1.2;
  color: var(--c-white);
}

.t-lead {
  font-size: var(--fs-lead);
  font-weight: 600;
  letter-spacing: -0.7px;
  line-height: 1.3;
  color: var(--c-white);
}

.t-subhead {
  font-size: var(--fs-subhead);
  font-weight: 600;
  letter-spacing: -0.7px;
  line-height: 1.3;
  color: var(--c-text-warm);
}

.t-body {
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: -0.7px;
  line-height: 1.5;
  color: var(--c-text-soft);
}

/* 20px copy set outside the presets (Slurpee rich-text blocks) */
.t-copy {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.5px;
  line-height: 1.5;
  color: var(--c-text-soft);
}
@media (max-width: 809.98px) {
  .t-copy { font-size: var(--fs-body); letter-spacing: -0.7px; }
}

/* 24px card headings */
.t-card-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.8px;
  line-height: 1.5;
}

.t-center { text-align: center; }
.t-left { text-align: left; }
.c-soft { color: var(--c-text-soft); }
.c-warm { color: var(--c-text-warm); }
.c-cool { color: var(--c-text-cool); }
.c-black { color: #000; }
.c-muted { color: var(--c-text-muted); }
.c-grey { color: var(--c-text-grey); }

/* Lists styled like Framer rich text: marker at inline-start, text at 2ch */
.list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: list-item;
}
.list > li {
  position: relative;
  padding-inline-start: 2ch;
  counter-increment: list-item;
}
.list--bullet > li::before { content: "•"; position: absolute; inset-inline-start: 0; }
.list--number > li::before {
  content: counter(list-item) ".";
  font-variant-numeric: tabular-nums;
  position: absolute;
  inset-inline-start: 0;
}

/* ==========================================================================
   Components
   ========================================================================== */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 15px;
  border-radius: 8px;
  background: #222;
  color: var(--c-white);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow:
    0 .706592px .706592px -.625px rgba(0, 0, 0, .18),
    0 1.80656px 1.80656px -1.25px rgba(0, 0, 0, .18),
    0 3.62176px 3.62176px -1.875px rgba(0, 0, 0, .17),
    0 6.8656px 6.8656px -2.5px rgba(0, 0, 0, .16),
    0 13.6468px 13.6468px -3.125px rgba(0, 0, 0, .13),
    0 30px 30px -3.75px rgba(0, 0, 0, .06);
  transition: background-color .2s ease;
}
.button:hover { background: #2e2e2e; }

/* Hero block shared by all case studies */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.hero__intro { width: 100%; }

/* Centred content column */
.container { width: 100%; max-width: var(--content-max); }

/* Stacked text block (heading + copy) */
.stack { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.stack--10 { gap: 10px; }

/* Framer-style entrance animations (pure CSS) */
@keyframes rise-in {
  from { opacity: 0; transform: perspective(1200px) translateY(100px); }
  to   { opacity: 1; transform: none; }
}
@keyframes tilt-in {
  from { opacity: 0; transform: perspective(1200px) rotateX(40deg); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: rise-in .9s cubic-bezier(.22, 1, .36, 1) both; }
  .reveal--tilt { animation-name: tilt-in; }
  .reveal--d1 { animation-delay: .1s; }
  .reveal--d2 { animation-delay: .2s; }
  .reveal--d3 { animation-delay: .3s; }

  @supports (animation-timeline: view()) {
    .reveal-scroll {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }
}

/* Phone rhythm for shared components (tokens defined in :root) */
@media (max-width: 809.98px) {
  .page { padding-bottom: var(--space-end); }
  .stack { gap: var(--space-stack); }
  .stack--10 { gap: var(--space-tight); }
  .split { gap: var(--space-stack); }
  .grid { gap: var(--space-list); }
  .grid__item { gap: var(--space-media); }
  /* A heading that follows copy starts a new group: one --space-block above it */
  .stack > :not(:first-child):is(h2, h3),
  .slurpee-problem > h2:not(:first-child),
  .slurpee-section > h2:not(:first-child) { margin-top: calc(var(--space-block) - var(--space-stack)); }
}

/* ==========================================================================
   Home (index)
   ========================================================================== */
.home-hero {
  gap: 24px;
  padding: 100px var(--section-pad-x);
}
.home-hero__intro { max-width: var(--measure); }

.work {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0 var(--section-pad-x) 100px;
}

.work__list {
  display: flex;
  flex-direction: column;
  gap: 100px;
  width: 100%;
  max-width: var(--content-max);
  margin: 0;
  padding: 0;
  list-style: none;
}

.work-item {
  display: flex;
  align-items: center;
  gap: var(--col-gap);
}
.work-item:nth-child(odd) { padding-top: 40px; }

.work-item__content {
  flex: 1 1 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  min-width: 0;
}

.work-item__title { white-space: pre-wrap; }

.work-item__media {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
}

@media (max-width: 1199.98px) {
  .home-hero { gap: 34px; padding-block: 63px; }
}

@media (max-width: 809.98px) {
  .home-hero { gap: var(--space-block); padding-block: var(--space-top) var(--space-section); }
  .work { padding-block: 0 var(--space-section); }
  .work__list { gap: var(--space-list); }
  .work-item, .work-item:nth-child(odd) { flex-direction: column; gap: var(--space-media); padding-top: 0; }
  .work-item__content { order: 1; width: 100%; gap: var(--space-stack); }
  .work-item__media { order: 0; width: 100%; flex: none; }
}

/* ==========================================================================
   Case study: Slurpee
   ========================================================================== */
.slurpee-hero {
  gap: 43px;
  padding: 43px var(--section-pad-x) 30px;
}
.slurpee-hero__badge { width: 276px; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); }
.slurpee-hero__intro { max-width: var(--measure); }
.slurpee-hero__shot { width: 100%; max-width: var(--media-max); aspect-ratio: 16 / 9; border-radius: var(--radius-lg); }
.slurpee-hero__statement { width: 100%; max-width: var(--content-max); }

.split {
  display: flex;
  align-items: center;
  gap: var(--col-gap);
  width: 100%;
  max-width: var(--content-max);
}
.split > * { flex: 1 1 0; min-width: 0; }

.slurpee-origins { display: flex; justify-content: center; width: 100%; padding: 0 var(--section-pad-x) 20px; }

.slurpee-figma {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 100px var(--section-pad-x) 0;
  background: var(--c-panel);
}
.slurpee-figma__stage { position: relative; width: 100%; max-width: var(--content-max); height: 402px; }
.slurpee-figma__a { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 67.7%; height: 402px; }
.slurpee-figma__b { position: absolute; right: 0; bottom: 0; width: 47%; height: 356px; }

.slurpee-problem {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  min-height: 685px;
  padding: 24px var(--section-pad-x);
  background: #fff;
}
.slurpee-problem > * { width: 100%; max-width: var(--content-max); }

.slurpee-review { width: 100%; display: flex; justify-content: center; padding: 29px var(--section-pad-x); background: #fff; }

.grid {
  display: grid;
  gap: var(--col-gap);
  width: 100%;
  max-width: var(--content-max);
  margin: 0;
  padding: 0;
  list-style: none;
}
.grid--3 { grid-template-columns: repeat(3, minmax(200px, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(200px, 1fr)); }
.grid__item { display: flex; flex-direction: column; align-items: center; gap: 30px; align-self: start; }
.grid__item > * { width: 100%; }
.grid__item--span2 { grid-column: span 2; }
.grid__item--span3 { grid-column: span 3; }

.slurpee-review__media { width: 100%; height: 300px; border-radius: var(--radius-lg); }

.slurpee-plan { width: 100%; display: flex; flex-direction: column; align-items: center; padding: 50px 0 18px; }
/* Heading and copy sit on the column; the panel band between them stays full-bleed */
.slurpee-plan__heading { width: min(var(--content-max), 100% - 2 * var(--section-pad-x)); }
.slurpee-plan__band { width: 100%; margin-top: 34px; padding: 7px var(--section-pad-x) 27px; background: var(--c-panel); display: flex; justify-content: center; }
.slurpee-plan__art { width: var(--content-max); max-width: 100%; height: 421px; }
.slurpee-plan__copy { width: min(var(--content-max), 100% - 2 * var(--section-pad-x)); margin-top: 40px; }
.slurpee-plan__copy strong { font-size: 32px; font-weight: 700; color: var(--c-white); }

.slurpee-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 0 var(--section-pad-x);
}
.slurpee-section > * { width: 100%; max-width: var(--content-max); }
.slurpee-section--ownership { min-height: 672px; }
.slurpee-section--results { min-height: 365px; }
.slurpee-section--closing { min-height: 531px; background: var(--c-bg); }

.slurpee-process { width: 100%; display: flex; justify-content: center; padding: 100px var(--section-pad-x) 1px; }
.slurpee-process__media { width: 100%; aspect-ratio: 1; border-radius: var(--radius-lg); }

.slurpee-adoption { width: 100%; display: flex; justify-content: center; padding: 100px var(--section-pad-x) 0; }
.slurpee-adoption__media { width: 100%; height: 364px; }

@media (max-width: 1199.98px) {
  .slurpee-hero { gap: 50px; padding-block: 50px 30px; }
  .slurpee-hero__badge { width: 208px; }
  .slurpee-hero__statement { font-weight: 900; }
  .slurpee-origins { padding-top: 29px; }
  .slurpee-figma { padding-top: 80px; }
  .slurpee-figma__stage { height: 293px; }
  .slurpee-figma__a { width: 47%; height: 293px; }
  .slurpee-figma__b { width: 47%; height: 287px; }
  .slurpee-problem { min-height: 589px; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(200px, 1fr)); }
  .grid__item--span2 { grid-column: auto; }
  .slurpee-plan { padding-top: 58px; padding-bottom: 0; }
  .slurpee-plan__band { margin-top: 42px; padding-block: 22px 24px; }
  .slurpee-plan__art { width: 729px; height: 1047px; }
  .slurpee-plan__copy strong { font-size: 24px; }
  .slurpee-section--ownership { min-height: 602px; }
  .slurpee-section--results { min-height: 494px; }
  .slurpee-section--closing { min-height: 455px; }
  .slurpee-adoption { padding-top: 0; }
  .slurpee-adoption__media { height: 287px; }
}

@media (max-width: 809.98px) {
  /* Section order / background: hero, origins (dark) | figma (panel) |
     problem, review (white) | plan, ownership, process, results, adoption, closing (dark) */
  .slurpee-hero { gap: var(--space-block); padding-block: var(--space-top) var(--space-section); }
  .slurpee-hero__badge { width: 210px; }
  .slurpee-origins { padding-block: 0 var(--space-section); }
  .split { flex-direction: column; }
  .split > * { flex: none; width: 100%; }
  .slurpee-figma { padding-block: var(--space-section); }
  .slurpee-figma__stage { height: auto; display: flex; flex-direction: column; gap: var(--space-media); }
  .slurpee-figma__a, .slurpee-figma__b { position: static; transform: none; width: 100%; }
  .slurpee-figma__a { height: 406px; border-radius: 12px; }
  .slurpee-figma__b { height: 322px; border-radius: var(--radius-lg); }
  .slurpee-problem { min-height: 0; gap: var(--space-stack); padding-block: var(--space-section); }
  .slurpee-review { padding-block: 0 var(--space-section); }
  .grid--3, .grid--4 { grid-template-columns: minmax(200px, 1fr); }
  .slurpee-plan { padding: var(--space-section) 0; }
  .slurpee-plan__band { margin-top: var(--space-block); padding: var(--space-block) 0; }
  .slurpee-plan__art { width: 366px; height: 733px; }
  .slurpee-plan__copy { margin-top: var(--space-block); }
  .slurpee-plan__copy strong { font-size: inherit; }
  .slurpee-section,
  .slurpee-section--ownership,
  .slurpee-section--results,
  .slurpee-section--closing { min-height: 0; gap: var(--space-stack); padding-block: 0 var(--space-section); }
  .slurpee-process { padding-block: 0 var(--space-section); }
  .slurpee-adoption { padding-block: 0 var(--space-section); }
  .slurpee-adoption__media { height: 285px; }
  .slurpee-adoption .split > :last-child { display: none; }
}

/* ==========================================================================
   Case study: Raise the Roost
   ========================================================================== */
.roost-hero { gap: 24px; padding: 0 var(--section-pad-x) 42px; }
.roost-hero__logo { width: 185px; height: 139px; }
.roost-hero__logo img { object-fit: cover; }
.roost-hero__shot { width: 100%; max-width: var(--media-max); aspect-ratio: 16 / 9; border-radius: var(--radius-lg); }

/* Roost story text blocks: all on the shared content column */
.roost-measure { width: 100%; max-width: var(--content-max); }
.roost-hero .hero__intro { max-width: var(--measure); }

.roost-band { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 60px; padding: 20px var(--section-pad-x) 40px; }
.roost-band--flows { background: var(--c-panel-strong); padding: 40px var(--section-pad-x); }
.roost-band--white { background: #fff; padding: 40px var(--section-pad-x) 27px; }
.roost-band--grid { background: #fff; padding: 0 var(--section-pad-x); }
.roost-band--build { padding: 20px var(--section-pad-x) 100px; }

.roost-flow__media { width: 100%; height: 250px; border-radius: var(--radius-lg); }
.roost-flow { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.roost-flow__caption { width: 100%; max-width: 470px; }

.roost-grid { padding-bottom: 40px; }
.roost-grid__title { color: #333; }
.roost-grid__media { width: 100%; aspect-ratio: 1; border-radius: var(--radius-lg); }
.roost-grid__wide { width: 100%; height: 281px; border-radius: var(--radius-lg); }

.roost-home-grid { width: 100%; height: 406px; border-radius: var(--radius-lg); }

.roost-components { display: flex; align-items: flex-start; gap: var(--col-gap); width: 100%; max-width: var(--content-max); }
.roost-components > * { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.roost-components__media { width: 100%; height: 236px; border-radius: var(--radius-lg); }
.roost-components__media--tall { height: 250px; }
.roost-components__caption { width: 100%; font-size: 24px; font-weight: 600; letter-spacing: -0.7px; line-height: 1.5; color: var(--c-text-warm); }

.roost-end { width: 100%; min-height: 506px; background: var(--c-bg); }

@media (max-width: 1199.98px) {
  .roost-band { padding-block: 21px; }
  .roost-band--flows { padding-block: 20px 80px; }
  .roost-band--white { padding-block: 40px 80px; }
  .roost-band--grid { padding-block: 0; }
  .roost-band--system { padding-block: 80px 0; }
  .roost-band--build { padding-block: 80px; background: var(--c-bg); }
  .roost-grid.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .roost-grid .grid__item--span3 { grid-column: span 3; }
  .roost-components__media, .roost-components__media--tall { height: 218px; }
  .roost-end { min-height: 200px; }
}

@media (max-width: 809.98px) {
  /* Section order / background: hero, story (dark) | flows (panel) |
     white, grid (white) | system, build (dark) */
  .roost-hero { gap: var(--space-block); padding-block: var(--space-top) var(--space-section); }
  .roost-band { gap: var(--space-block); padding-block: 0 var(--space-section); }
  .roost-band--flows, .roost-band--white { padding-block: var(--space-section); }
  .roost-band--grid { padding-block: 0 var(--space-section); }
  .roost-band--system { padding-block: var(--space-section); }
  .roost-band--build { padding-block: 0 var(--space-section); background: none; }
  .roost-flow-row { flex-direction: column; gap: var(--space-block); }
  .roost-flow-row > * { width: 100%; }
  .roost-flow { gap: var(--space-media); }
  .roost-flow:first-child .roost-flow__media { height: 172px; }
  .roost-flow:last-child .roost-flow__media { height: 155px; }
  .roost-grid { padding-bottom: 0; }
  .roost-grid.grid--3 { grid-template-columns: minmax(200px, 1fr); gap: var(--space-list); }
  .roost-grid .grid__item--span3 { grid-column: auto; }
  .roost-grid__wide { display: none; }
  .roost-home-grid { height: 204px; }
  .roost-components { flex-direction: column; gap: var(--space-block); padding: 0; }
  .roost-components > * { flex: none; width: 100%; gap: var(--space-media); }
  .roost-end { display: none; } /* trailing space comes from --space-end like every page */
}

/* ==========================================================================
   Case study: Solvr
   ========================================================================== */
.solvr-hero { gap: 50px; padding: 50px var(--section-pad-x) 100px; }
.solvr-hero__intro { max-width: var(--measure); }
.solvr-hero__shot { width: 100%; max-width: var(--media-max); aspect-ratio: 16 / 9; border-radius: var(--radius-lg); }
.solvr-hero__summary { width: 100%; max-width: var(--measure); }

.solvr-features { width: 100%; display: flex; justify-content: center; padding: 100px var(--section-pad-x); background: #f7f7f7; }

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 100px;
  width: 100%;
  max-width: var(--content-max);
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature { display: flex; align-items: flex-start; gap: var(--col-gap); }
.feature__content { flex: 1 1 0; min-width: 0; align-self: stretch; display: flex; flex-direction: column; gap: 20px; }
.feature__media { flex: 1 1 0; min-width: 0; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); }
.feature__title { color: #050505; }

.solvr-outcome {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  min-height: 655px;
  padding: 60px var(--section-pad-x);
}

@media (max-width: 1199.98px) {
  .feature { flex-direction: column; }
  .feature__content { order: 0; width: 100%; flex: none; }
  .feature__media { order: 1; width: 100%; flex: none; aspect-ratio: auto; height: 360px; }
  .solvr-outcome { min-height: 451px; }
}

@media (max-width: 809.98px) {
  /* Section order / background: hero (dark) | features (light grey) | outcome (dark) */
  .solvr-hero { gap: var(--space-block); padding-block: var(--space-top) var(--space-section); }
  .solvr-features { padding-block: var(--space-section); }
  .feature-list { gap: var(--space-list); }
  .feature { gap: var(--space-media); }
  .feature__content { order: 1; gap: var(--space-stack); }
  .feature__media { order: 0; aspect-ratio: 4 / 3; height: auto; }
  .solvr-outcome { justify-content: flex-start; min-height: 0; gap: var(--space-block); padding-block: var(--space-section); }
}

/* ==========================================================================
   Case study: 7-Eleven Home Screen Redesign
   ========================================================================== */
.redesign { gap: 78px; padding: 100px var(--section-pad-x); }
.redesign__title { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; max-width: var(--measure); }
.redesign__brand { width: 64px; height: 85px; }
.redesign__title .t-display { white-space: pre-wrap; }
.redesign__hero-shot { width: 358px; height: 375px; }

.redesign__body { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; width: 100%; max-width: var(--content-max); }
.redesign__groups { display: flex; flex-direction: column; gap: 40px; width: 100%; }
.redesign__group { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.redesign__group--tight { gap: 17px; }

.redesign__lead { font-size: 32px; font-weight: 600; letter-spacing: -0.7px; line-height: 1.3; }
.redesign__h24 { font-size: 24px; font-weight: 700; letter-spacing: -0.7px; line-height: 1.3; }
.redesign__h20 { font-size: 20px; font-weight: 700; letter-spacing: -0.7px; line-height: 1.3; }
.redesign__pop { font-family: var(--font-poppins); font-size: 16px; font-weight: 400; line-height: 1.3; }
.redesign__pop--h24 { font-size: 24px; font-weight: 700; }
.redesign__pop--h20 { font-size: 20px; font-weight: 700; }
.redesign__pop--h32 { font-size: 32px; font-weight: 600; }
.redesign__pop--s24 { font-size: 24px; font-weight: 600; }
.redesign__pop + .redesign__pop--para { margin-top: 1.2em; }
.redesign__pop--para { line-height: 1.2; }

.redesign__gallery { display: flex; align-items: center; gap: 0; width: 100%; padding: 20px 0 41px; }
.redesign__gallery > * { flex: 1 1 0; min-width: 0; }
.redesign__gallery--panel { background: var(--c-panel); border-radius: var(--radius-md); }
.redesign__gallery--gap { gap: 95px; }
.redesign__gallery .media { border-radius: var(--radius-md); height: 318px; }
.redesign__gallery--panel .media { border-radius: 0; }
.redesign__gallery--panel .media:last-child { height: 205px; }
.redesign__gallery--gap .media:first-child { height: 317px; }

/* Live UI mock of the new home screen modules */
.ui-mock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  padding: 40px 0;
  background: var(--c-panel);
  border-radius: var(--radius-md);
  font-family: var(--font-basis);
  color: #111;
}
.ui-mock p { white-space: nowrap; }

.ui-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 335px;
  height: 202px;
  padding: 16px;
  background: #fff;
  border: 1px solid #e4e4e4;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.ui-price__top { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; }
.ui-price__grade { display: flex; align-items: center; gap: 4px; }
.ui-price__grade img { width: 16px; height: 16px; padding: 5px 5px 6px 2px; }
.ui-small { font-size: 13px; font-weight: 700; letter-spacing: -0.1px; line-height: 20px; color: #757575; }
.ui-small--link { text-decoration: underline; text-align: right; }
.ui-small--struck { font-weight: 500; text-decoration: line-through; text-align: right; }
.ui-price__divider { width: 263px; height: 1px; background: #f1f1f1; }
.ui-pill { display: flex; align-items: center; height: 16px; padding: 0 8px; border-radius: 4px; background: #f1f1f1; font-size: 11px; font-weight: 700; line-height: 16px; color: #111; }
.ui-price__row { display: flex; justify-content: center; align-items: flex-end; gap: 4px; width: 100%; }
.ui-price__amount { display: flex; align-items: center; gap: 4px; font-size: 28px; font-weight: 700; letter-spacing: -0.6px; line-height: 32px; color: #111; }
.ui-price__was { display: flex; align-items: center; gap: 1px; }
.ui-button {
  display: flex; justify-content: center; align-items: center;
  width: 303px; min-width: 105px; height: 44px; padding: 8px 24px;
  border-radius: 360px; background: #00563c;
  font-size: 16px; font-weight: 700; line-height: 24px; color: #fff;
}

.ui-store { padding: 0 20px; }
.ui-store__card {
  display: flex; justify-content: space-between; align-items: center;
  width: 335px; padding: 16px;
  border-radius: var(--radius-md); background: #f1f1f1;
}
.ui-store__place { display: flex; align-items: center; gap: 16px; }
.ui-store__place img { width: 40px; height: 40px; }
.ui-store__address { font-size: 16px; font-weight: 500; letter-spacing: -0.1px; line-height: 24px; color: #212121; }
.ui-store__change { font-size: 16px; font-weight: 700; letter-spacing: -0.2px; line-height: 24px; color: #007350; }

.ui-tiles { display: flex; justify-content: center; gap: 10px; }
.ui-tiles__col { display: flex; flex-direction: column; gap: 16px; }
.ui-tile {
  display: flex; align-items: center; gap: 16px;
  width: 235px; height: 80px; padding: 16px;
  border-radius: var(--radius-md); background: #fafafa;
}
.ui-tile__copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ui-tile__name { font-size: 18px; font-weight: 700; letter-spacing: -0.1px; line-height: 24px; }
.ui-tile__price { font-size: 11px; font-weight: 700; line-height: 16px; }
.ui-tile__add { display: flex; padding: 4px; border: 1px solid #e4e4e4; border-radius: 100px; background: #fff; }
.ui-tile__add img { width: 16px; height: 16px; padding: 3px 2px 2px 3px; }

/* Phone-in-scene compositions (percentages derived from the 1000x620 / 375x468 source frames) */
.scene { position: relative; overflow: hidden; background: #fff; width: 100%; }
.scene img { position: absolute; max-width: none; object-fit: cover; }
.scene--wide { max-width: 1000px; aspect-ratio: 1000 / 620; }
.scene--wide .scene__bg { left: -6.5%; top: -1.935%; width: 115.4%; height: 125.806%; }
.scene--wide .scene__bg--away { width: 120%; height: 129.032%; }
.scene--wide .scene__phone { position: absolute; left: 29.4%; top: 16.452%; width: 44.9%; height: 134.194%; }
.scene__phone .scene__screen { left: 12.918%; top: 7.212%; width: 73.942%; height: 86.538%; }
.scene__phone .scene__frame { left: 0; top: 0; width: 100%; height: 100%; }
.scene--tall { display: none; max-width: 375px; aspect-ratio: 375 / 468; }
.scene--tall .scene__bg { left: -84.533%; top: 0; width: 205.333%; height: 111.325%; }
.scene--tall .scene__crop { position: absolute; left: -66.4%; top: -32.051%; width: 224%; height: 134.615%; overflow: hidden; background: #fff; }
.scene--tall .scene__crop img { left: -6.31%; top: -1.587%; width: 117.143%; height: 104.127%; }
.scene--tall .scene__phone { position: absolute; left: 12.267%; top: 13.889%; width: 79.2%; height: 117.521%; }

@media (max-width: 1199.98px) {
  .redesign { gap: 34px; padding-block: 63px; }
  .redesign__gallery--panel .media:last-child { height: 170px; }
}

@media (max-width: 809.98px) {
  /* One dark section: title, hero shot, then the article body */
  .redesign { gap: var(--space-block); padding-block: var(--space-top) var(--space-section); }
  .redesign__title { gap: var(--space-stack); }
  .redesign__hero-shot { width: 298px; height: 312px; }
  .redesign__body { gap: var(--space-block); }
  .redesign__groups { gap: var(--space-block); }
  .redesign__group, .redesign__group--tight { gap: var(--space-stack); }
  .redesign__group > :is(.redesign__gallery, .ui-mock, .scene) { margin-top: calc(var(--space-media) - var(--space-stack)); }
  .redesign__group > h3:not(:first-child) { margin-top: calc(var(--space-block) - var(--space-stack)); }
  .redesign__lead { font-size: 20px; }
  .redesign__pop--s24 { font-size: 20px; }
  .redesign__gallery, .redesign__gallery--gap { flex-direction: column; gap: var(--space-media); padding: 0; }
  .redesign__gallery--panel { padding-block: var(--space-media); }
  .ui-mock { gap: var(--space-block); padding-block: var(--space-block); }
  .redesign__gallery > * { flex: none; width: 100%; }
  .redesign__gallery .media.media--tall-phone { height: 349px; }
  .redesign__gallery .media.media--short-phone { height: 163px; }
  .redesign__gallery--gap .media--short-phone { order: 0; }
  .redesign__gallery--gap .media--tall-phone { order: 1; }
  .ui-price { width: 321px; }
  .ui-store__card { width: 323px; }
  .ui-tiles { flex-wrap: wrap; }
  .scene--wide { display: none; }
  .scene--tall { display: block; }
}

/* ==========================================================================
   Resume
   ========================================================================== */
.resume { display: flex; justify-content: center; width: 100%; padding: 0 var(--section-pad-x) 100px; }
.resume__inner { width: 100%; max-width: var(--content-max); padding-top: 40px; }
.resume__section + .resume__section { margin-top: 20px; }
.resume__end { min-height: 249px; }

/* Rich-text rhythm from the Framer presets: headings 40px apart, copy/lists 20px */
.rt > * + h3 { margin-top: 40px; }
.rt > * + p, .rt > * + ul { margin-top: 20px; }
.rt > .rt__gap { height: 30px; margin-top: 20px; }
.rt > .rt__gap--line { height: 1.3em; margin-top: 0; font-size: var(--fs-subhead); }
.rt > .resume__about { margin-top: 0; }
.rt h3 { font-size: var(--fs-subhead); font-weight: 600; letter-spacing: -0.7px; line-height: 1.3; color: var(--c-text-soft); }
.rt h3 strong { font-weight: 900; }
.rt .resume__about { font-size: 16px; font-weight: 500; letter-spacing: -0.7px; line-height: 1.3; color: var(--c-text-soft); }
.rt .resume__about-gap { height: 1.2em; font-size: 14px; }

@media (max-width: 1199.98px) {
  .resume__end { min-height: 214px; }
}

@media (max-width: 809.98px) {
  .resume { padding-bottom: var(--space-section); }
  .resume__inner { padding-top: var(--space-top); }
  .resume__end { display: none; } /* trailing space comes from --space-end like every page */
  .rt > * + h3 { margin-top: var(--space-block); }
  .rt > * + p, .rt > * + ul { margin-top: var(--space-stack); }
  .rt h3 { font-size: 22px; }
}