/* About page — matches the approved Figma desktop, tablet and mobile layouts. */
.ff-about-page { padding-top: 38px !important; }
.ff-about-page > h1 { margin: 0 !important; text-align: center !important; font-size: 48px !important; font-weight: 700 !important; line-height: 56px !important; }
.ff-about-hero { width: 100% !important; height: auto !important; aspect-ratio: 1440 / 526 !important; margin: 64px 0 0 !important; overflow: hidden !important; background: #f5f5f5 !important; }
.ff-about-hero img, .ff-about-intention img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
.ff-about-intro, .ff-about-intention, .ff-about-view, .ff-about-everyday { max-width: 1312px !important; margin-inline: auto !important; }
.ff-about-intro { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 32px !important; margin-top: 64px !important; }
.ff-about-page h2 { margin: 0 !important; font-size: 40px !important; font-weight: 700 !important; line-height: 48px !important; }
.ff-about-page p { margin: 0 !important; font-size: 14px !important; line-height: 20px !important; letter-spacing: 1px !important; }
.ff-about-intro > div, .ff-about-everyday > div { display: grid !important; gap: 20px !important; }
.ff-about-intention { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 24px !important; margin-top: 64px !important; }
.ff-about-intention > figure { height: 490px !important; margin: 0 !important; overflow: hidden !important; }
.ff-about-intention > div { display: grid !important; grid-template-rows: 203px 239px !important; gap: 48px !important; }
.ff-about-intention article p { margin-top: 24px !important; }
.ff-about-intention figure { margin: 0 !important; overflow: hidden !important; }
.ff-about-view { margin-top: 64px !important; text-align: center !important; }
.ff-about-view p { max-width: 1184px !important; margin: 32px auto 0 !important; }
.ff-about-everyday { display: grid !important; grid-template-columns: 461px 1fr !important; gap: 32px !important; margin-top: 64px !important; padding-bottom: 64px !important; }
.ff-about-everyday a { width: max-content !important; font-size: 14px !important; letter-spacing: 1px !important; text-decoration: underline !important; text-underline-offset: 4px !important; }

@media (max-width: 1024px) {
    .ff-about-page { padding-top: 44px !important; }
    .ff-about-page > h1 { font-size: 40px !important; line-height: 48px !important; }
    .ff-about-hero { margin-top: 48px !important; }
    .ff-about-intro, .ff-about-intention, .ff-about-view, .ff-about-everyday { margin-inline: 32px !important; }
    .ff-about-intro { margin-top: 48px !important; }
    .ff-about-page h2 { font-size: 32px !important; line-height: 40px !important; }
    .ff-about-page p { font-size: 12px !important; line-height: 20px !important; }
    .ff-about-intention { margin-top: 48px !important; }
    .ff-about-intention > figure { height: 598px !important; }
    .ff-about-intention > div { grid-template-rows: 311px 239px !important; gap: 48px !important; }
    .ff-about-view, .ff-about-everyday { margin-top: 48px !important; }
    .ff-about-everyday { grid-template-columns: 282px 1fr !important; }
}

@media (max-width: 640px) {
    .ff-about-page { padding-top: 38px !important; }
    .ff-about-page > h1 { font-size: 24px !important; line-height: 32px !important; }
    .ff-about-hero { margin-top: 32px !important; }
    .ff-about-intro, .ff-about-intention, .ff-about-view, .ff-about-everyday { margin-inline: 16px !important; }
    .ff-about-intro { display: grid !important; grid-template-columns: 1fr !important; gap: 16px !important; margin-top: 32px !important; }
    .ff-about-page h2 { font-size: 24px !important; line-height: 32px !important; }
    .ff-about-page p { font-size: 10px !important; line-height: 16px !important; letter-spacing: .25px !important; }
    .ff-about-intention { display: grid !important; grid-template-columns: 1fr !important; gap: 24px !important; margin-top: 24px !important; }
    .ff-about-intention > figure { height: auto !important; aspect-ratio: 1 / 1 !important; }
    .ff-about-intention > div { display: grid !important; grid-template-rows: auto 239px !important; gap: 24px !important; }
    .ff-about-intention article p { margin-top: 16px !important; }
    .ff-about-view { margin-top: 32px !important; }
    .ff-about-view p { margin-top: 16px !important; }
    .ff-about-everyday { display: grid !important; grid-template-columns: 1fr !important; gap: 16px !important; margin-top: 32px !important; padding-bottom: 48px !important; }
    .ff-about-everyday a { font-size: 10px !important; }
}