/* A light editorial frame for FLAVA's own photography and design. */
.home-page, .home-page body { background:#fffcf5; color:#1a1818; }
.home-page img, .home-page video { display:block; max-width:100%; height:auto; }
.home-page main { padding-top:76px; }
.f-shell { width:100%; max-width:1440px; margin-inline:auto; padding-inline:clamp(24px,4.7vw,60px); }
.f-section { padding-block:clamp(64px,7vw,100px); }
.f-hero { padding-top:24px; }
.f-hero figure, .f-film { margin:0; min-width:0; }
.f-meta, .f-hero-foot, .f-section-top { display:flex; justify-content:space-between; align-items:center; gap:24px; }
.f-meta { font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:#625c54; }
.f-hero-heading { display:grid; grid-template-columns:1.2fr 1fr; align-items:end; gap:8%; padding-block:36px 42px; }
.f-hero-title { font-size:clamp(64px,8.2vw,118px); line-height:.98; font-weight:300; letter-spacing:-.064em; margin:0; }
.f-hero-copy { max-width:440px; padding-bottom:5px; }
.f-intro { font-size:clamp(20px,2.1vw,29px); font-weight:400; line-height:1.25; letter-spacing:-.035em; margin:0 0 16px; }
.f-description { max-width:380px; font-size:15px; line-height:1.65; color:#625c54; margin:0; }
.f-hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; margin-top:24px; }
.f-button { display:inline-flex; justify-content:space-between; align-items:center; gap:26px; min-height:48px; padding:12px 18px; background:#1a1818; color:#fffcf5; border:1px solid #1a1818; border-radius:2px; font-size:13px; font-weight:500; line-height:1.5; text-decoration:none; transition:background .2s; }
.f-button:hover { background:#45413d; }
.f-button>span { font-size:19px; line-height:1; }
.f-link { display:inline-flex; align-items:center; gap:16px; min-height:44px; padding:9px 0; width:fit-content; border-bottom:1px solid currentColor; font-size:13px; font-weight:500; line-height:1.4; text-decoration:none; }
.f-link>span { font-size:19px; transition:transform .25s; }
.f-link:hover>span { transform:translate(2px,-2px); }
.f-hero-media { display:grid; grid-template-columns:1.38fr 1fr; gap:24px; align-items:start; }
.f-hero-image { display:block; height:clamp(380px,41vw,560px); overflow:hidden; background:#ece8df; }
.f-hero-photo .f-hero-image img { width:104%; max-width:none; margin-left:-2%; height:100%; object-fit:cover; object-position:center 44%; }
.f-hero-design .f-hero-image { display:flex; align-items:center; justify-content:center; padding:26px; background:#eeeae1; }
.f-hero-design .f-hero-image img { height:100%; width:auto; max-width:100%; object-fit:contain; }
.f-hero-media figcaption { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px 16px; margin-top:13px; color:#625c54; font-size:11px; line-height:1.5; }
.f-hero-media figcaption>span:first-child { color:#1a1818; }
.f-hero-foot { margin-top:28px; padding-block:19px; border-block:1px solid #ddd7cd; color:#625c54; font-size:11px; }
.f-hero-foot a { display:inline-flex; align-items:center; gap:18px; min-height:30px; color:#1a1818; text-decoration:none; }
.f-hero-foot a:hover { text-decoration:underline; text-underline-offset:4px; }
.f-hero-foot a span { font-size:20px; }
.f-kicker { margin:0; font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:.12em; line-height:1.5; }
.f-section-top { color:#625c54; margin-bottom:24px; align-items:start; }
.f-section-top>p:last-child { max-width:300px; font-size:12px; margin:0; }
.f-display { font-size:clamp(40px,5vw,70px); font-weight:300; line-height:1.06; letter-spacing:-.045em; margin:0; }
.f-work { background:#fffcf5; }
.f-projects { display:grid; grid-template-columns:1.15fr 1fr; align-items:start; gap:7%; margin-top:42px; }
.f-project { display:block; min-width:0; text-decoration:none; }
.f-project:nth-child(2) { margin-top:70px; }
.f-project-media { position:relative; overflow:hidden; background:#eeeae1; }
.f-project-media>img { width:100%; aspect-ratio:1.2; object-fit:cover; transition:transform .65s ease; }
.f-project:nth-child(2) .f-project-media>img { aspect-ratio:1; }
.f-project:hover img { transform:scale(1.035); }
.f-project-open { position:absolute; right:15px; top:15px; display:grid; place-items:center; width:40px; height:40px; background:#fffcf5; font-size:23px; color:#1a1818; }
.f-project-tag { position:absolute; left:0; bottom:0; background:#fffcf5; color:#1a1818; padding:9px 14px; font-size:9px; text-transform:uppercase; letter-spacing:.06em; }
.f-project-caption { display:flex; justify-content:space-between; flex-wrap:wrap; gap:7px 16px; margin-top:16px; }
.f-project-caption h3 { margin:0; font-size:clamp(20px,2vw,26px); font-weight:500; letter-spacing:-.025em; line-height:1.3; }
.f-project-caption>span { align-self:end; color:#625c54; font-size:11px; }
.f-work-all { margin-top:32px; }
.f-films { background:#f1ece2; }
.f-films-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; }
.f-films-heading>p { margin:0 0 5px; font-size:16px; color:#625c54; }
.f-film-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin:40px 0 26px; align-items:start; }
.f-film-top { display:flex; justify-content:space-between; font-size:10px; color:#625c54; padding-block:12px; border-top:1px solid #c8c1b6; }
.f-film video { width:100%; aspect-ratio:9/16; object-fit:contain; background:#1a1818; border-radius:0; }
.f-film figcaption { display:flex; justify-content:space-between; gap:12px; font-size:13px; margin-top:14px; }
.f-film figcaption>span { font-size:11px; color:#625c54; }
.f-swipe-hint { display:none; }
.f-proof { border-bottom:1px solid #ddd7cd; }
.f-proof-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:9%; align-items:center; }
.f-proof .f-display { margin-top:22px; font-size:clamp(40px,4.6vw,64px); }
.f-proof-intro { max-width:430px; margin:24px 0 14px; font-size:16px; color:#625c54; }
.f-proof-number { padding-top:20px; border-top:1px solid #a29a8e; }
.f-proof-number>strong { display:block; font-size:clamp(66px,7.3vw,102px); font-weight:300; letter-spacing:-.07em; line-height:1.35; white-space:nowrap; }
.f-proof-number>strong>span { font-size:.4em; vertical-align:super; margin-left:12px; }
.f-proof-baseline { display:flex; justify-content:space-between; gap:20px; padding-bottom:20px; border-bottom:1px solid #ddd7cd; font-size:11px; }
.f-proof-number>p { margin:20px 0 0; color:#625c54; font-size:12px; line-height:1.8; }
.f-service-list { margin-top:40px; }
.f-service { display:grid; grid-template-columns:40px 1fr 50px; gap:24px; align-items:start; border-top:1px solid #ddd7cd; padding:30px 0; text-decoration:none; }
.f-service:last-child { border-bottom:1px solid #ddd7cd; }
.f-service-no { padding-top:10px; font-size:11px; color:#625c54; }
.f-service h3 { font-size:clamp(28px,3vw,42px); font-weight:400; line-height:1.15; letter-spacing:-.035em; margin:0 0 12px; }
.f-service p { margin:0 0 12px; font-size:16px; color:#625c54; }
.f-service-tags { font-size:11px; color:#625c54; }
.f-service-arrow { font-size:40px; line-height:1.2; transition:transform .25s; }
.f-service:hover .f-service-arrow { transform:translate(3px,-3px); }
.f-founder { display:grid; grid-template-columns:160px 1fr; gap:48px; align-items:center; margin-top:70px; }
.f-founder>img { width:100%; aspect-ratio:4/5; object-fit:cover; }
.f-founder h3 { font-size:clamp(28px,3vw,40px); font-weight:400; line-height:1.15; letter-spacing:-.035em; margin:14px 0; }
.f-founder p:not(.f-kicker) { max-width:540px; font-size:15px; color:#625c54; margin-bottom:8px; }
.f-contact { background:#f1ece2; }
.f-contact .f-display { margin-top:24px; font-size:clamp(50px,7.4vw,100px); }
.f-contact-bottom { display:flex; justify-content:space-between; align-items:center; gap:48px; margin-top:32px; }
.f-contact-bottom p { max-width:540px; font-size:16px; line-height:1.65; margin:0; color:#625c54; }
.f-contact-bottom .f-button { flex:none; }
.f-contact-note { font-size:11px; color:#625c54; margin:22px 0 0; }
@media(max-width:1000px) {
 .f-hero-heading { grid-template-columns:1.1fr 1fr; gap:6%; align-items:center; }.f-hero-title { font-size:8.2vw; }.f-intro { font-size:22px; }.f-description { font-size:14px; }.f-hero-actions { gap:12px 18px; margin-top:18px; }.f-button,.f-link { font-size:12px; }
 .f-hero-design .f-hero-image { padding:18px; }.f-hero-image { height:390px; }.f-hero-media { gap:20px; }.f-hero-media figcaption { font-size:10px; }
 .f-films-heading { align-items:start; }.f-films-heading>p { font-size:14px; }.f-proof-grid { gap:6%; }.f-contact-bottom { gap:24px; }
}
@media(max-width:700px) {
 .home-page main { padding-top:68px; }.f-shell { padding-inline:22px; }.f-section { padding-block:56px; }.f-hero { padding-top:20px; }
 .f-meta { font-size:8px; letter-spacing:.07em; gap:16px; }.f-meta>span:first-child { max-width:190px; }
 .f-hero-heading { grid-template-columns:1fr; padding-block:30px 28px; gap:24px; }.f-hero-title { font-size:clamp(54px,13.8vw,88px); line-height:1; }.f-hero-copy { max-width:440px; padding:0; }.f-intro { font-size:21px; margin-bottom:12px; }.f-intro br { display:none; }.f-description { font-size:14px; max-width:390px; }.f-hero-actions { margin-top:20px; }
 .f-button { min-height:46px; padding:11px 15px; gap:18px; }.f-link { gap:12px; }
 .f-hero-media { grid-template-columns:1.1fr 1fr; gap:12px; }.f-hero-image { height:clamp(220px,64vw,400px); }.f-hero-photo .f-hero-image img { object-position:center; }.f-hero-design .f-hero-image { padding:10px; }.f-hero-media figcaption { display:block; margin-top:10px; font-size:9px; }.f-hero-media figcaption>span { display:block; }.f-hero-media figcaption>span+span { margin-top:3px; }
 .f-hero-foot { margin-top:22px; padding-block:13px; font-size:10px; gap:16px; }.f-hero-foot>span { max-width:160px; }.f-hero-foot a { gap:10px; }
 .f-section-top { gap:20px; margin-bottom:22px; }.f-section-top>p:last-child { max-width:180px; font-size:11px; }.f-kicker { font-size:9px; }.f-display { font-size:clamp(37px,9.7vw,56px); }
 .f-projects { grid-template-columns:1fr; margin-top:28px; gap:34px; }.f-project:nth-child(2) { margin-top:0; }.f-project-media>img,.f-project:nth-child(2) .f-project-media>img { aspect-ratio:1.2; }.f-project-caption { margin-top:13px; }.f-project-caption h3 { font-size:22px; }
 .f-films-heading { display:block; }.f-films-heading>p { margin-top:20px; }.f-film-strip { display:flex; gap:20px; overflow-x:auto; margin:28px -22px 22px; padding:0 22px 16px; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:#777064 #e0d9ce; }.f-film { flex:0 0 72vw; scroll-snap-align:center; }.f-film figcaption { font-size:12px; }.f-swipe-hint { display:inline; }
 .f-proof-grid { grid-template-columns:1fr; gap:32px; }.f-proof .f-display { font-size:clamp(36px,9.5vw,56px); }.f-proof-intro { font-size:15px; }.f-proof-number>strong { font-size:22vw; }.f-proof-baseline { font-size:11px; }
 .f-service { grid-template-columns:22px 1fr 28px; gap:12px; padding:26px 0; }.f-service h3 { font-size:28px; }.f-service-no { padding-top:7px; font-size:10px; }.f-service p { font-size:14px; }.f-service-tags { font-size:10px; }.f-service-arrow { font-size:30px; }
 .f-founder { grid-template-columns:88px 1fr; gap:22px; margin-top:50px; align-items:start; }.f-founder h3 { font-size:25px; }.f-founder p:not(.f-kicker) { font-size:14px; }.f-founder>img { margin-top:4px; }
 .f-contact .f-display { font-size:clamp(45px,12vw,75px); }.f-contact-bottom { flex-direction:column; align-items:start; gap:24px; }.f-contact-bottom p { font-size:15px; }
}
@media(max-width:360px) {
 .f-hero-title { font-size:50px; }.f-hero-actions { gap:10px 16px; }.f-button,.f-link { font-size:11px; }.f-hero-media { gap:10px; }.f-hero-design .f-hero-image { padding:6px; }.f-hero-media figcaption { font-size:8px; }.f-hero-foot { font-size:9px; }.f-founder { grid-template-columns:1fr; }.f-founder>img { width:100px; }
}
@media(prefers-reduced-motion:reduce) { .f-project img,.f-link>span,.f-service-arrow,.f-button { transition:none; } }