/* Frequency color direction. Original card artwork and card animation rules live in original.css. */
:root { --paper:#fffaf1; --ink:#24202d; --coral:#f5785c; --blue:#2947bd; --lavender:#b6a6ef; --pad-x:clamp(24px,4.5vw,88px); --max-w:1440px; }
html { scroll-behavior:auto; scroll-padding-top:24px; }
body { background:var(--paper); color:var(--ink); overflow-x:clip; }
a { color:inherit; }
a:focus-visible, [tabindex]:focus-visible { outline:3px solid #6241b7; outline-offset:7px; }
img { max-width:100%; }
.f-wrap { width:100%; max-width:1440px; margin-inline:auto; }
.f-eyebrow { display:block; font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; line-height:1.5; }
.f-preview { background:#292338; color:var(--paper); padding:10px var(--pad-x); font-size:11px; line-height:1.5; }
.f-preview .f-wrap { display:flex; justify-content:space-between; gap:20px; }
.f-preview a { text-decoration:none; border-bottom:1px solid #c4b5f7; white-space:nowrap; }
.f-header { position:relative; top:auto; padding:27px var(--pad-x); background:var(--paper); border:0; gap:30px; }
.f-header .f-wrap { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.f-logo { display:flex; align-items:center; gap:12px; text-decoration:none; font-size:clamp(30px,3vw,44px); font-weight:600; letter-spacing:-.065em; line-height:1; }
.f-logo img { width:37px; height:42px; object-fit:contain; }
.f-nav { gap:36px; }
.f-nav a { color:var(--ink); text-transform:none; letter-spacing:0; font-size:13px; font-weight:500; padding:12px 0; }
.f-nav a:hover { color:var(--blue); }
.f-nav .f-nav-partner { border-bottom:1px solid var(--ink); }
.f-hero { padding:0 var(--pad-x); background:var(--coral); position:relative; isolation:isolate; }
.f-hero-inner { min-height:700px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:28px; position:relative; padding:68px 0 60px; }
.f-hero-copy { position:relative; z-index:2; }
.f-hero-copy .f-eyebrow { margin-bottom:36px; }
.f-hero h1 { font-family:var(--font-serif); font-size:clamp(82px,8.2vw,142px); font-weight:400; line-height:.86; letter-spacing:-.045em; margin-bottom:32px; }
.f-hero h1 em { font-weight:400; }
.f-hero h1 .f-arrow { font-family:var(--font-serif); font-style:normal; font-size:.77em; letter-spacing:-.12em; margin-right:.08em; }
.f-hero-copy>p { max-width:440px; font-size:17px; line-height:1.65; margin-bottom:30px; }
.f-text-link { display:inline-flex; gap:35px; align-items:center; border-bottom:1px solid currentColor; padding:12px 0; font-size:13px; text-decoration:none; line-height:1.5; font-weight:500; }
.f-text-link span { font-size:24px; transition:transform .2s; }
.f-text-link:hover span { transform:translateX(4px); }
.f-hero-art { position:relative; width:calc(100% + 42px); margin-left:-6px; }
.f-hero-art img { width:100%; height:auto; display:block; }
.f-hero-bottom { border-top:1px solid rgba(36,32,45,.35); padding:19px 0; display:flex; justify-content:space-between; gap:20px; font-size:11px; line-height:1.5; }
.f-capabilities { padding:34px var(--pad-x); border-bottom:1px solid #d4cec5; }
.f-capabilities .f-wrap { display:grid; grid-template-columns:160px 1fr; gap:24px; align-items:center; }
.f-capabilities h2 { font-size:11px; line-height:1.5; font-weight:500; color:#665b67; }
.f-capabilities ul { list-style:none; display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; font-size:14px; font-weight:500; }
.f-capabilities li { display:flex; gap:12px; align-items:center; }
.f-capabilities li::before { content:'+'; color:var(--blue); font-weight:400; font-size:20px; }
.f-research { padding:96px var(--pad-x) 0; }
.f-section-intro { display:grid; grid-template-columns:1fr 1.25fr; gap:80px; align-items:start; }
.f-section-intro h2 { font-family:var(--font-serif); font-weight:400; font-size:clamp(42px,4.8vw,76px); line-height:1.02; letter-spacing:-.03em; }
.f-section-intro h2 em { font-weight:400; }
.f-section-intro .f-eyebrow { margin-bottom:24px; color:var(--blue); }
.f-research-copy { padding-top:42px; max-width:540px; }
.f-research-copy p { font-size:17px; line-height:1.75; }
.f-research-copy p+p { font-size:14px; line-height:1.75; color:#625966; margin-top:18px; }
.f-panorama { margin-top:56px; }
.f-panorama img { display:block; width:100%; height:auto; }
.f-panorama figcaption { display:flex; justify-content:space-between; gap:20px; font-size:10px; line-height:1.5; text-transform:uppercase; letter-spacing:.1em; padding:17px 0 24px; border-bottom:1px solid #cbc3bd; }
.f-process { padding:64px var(--pad-x) 90px; }
.f-process-head { display:flex; justify-content:space-between; gap:30px; align-items:baseline; margin-bottom:30px; }
.f-process-head h2 { font-size:12px; font-weight:500; }
.f-process-head p { font-family:var(--font-serif); font-size:25px; font-style:italic; }
.f-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:0; list-style:none; }
.f-steps li { padding:0 28px 0; border-left:1px solid #cbc3bd; }
.f-steps li:first-child { padding-left:0; border-left:0; }
.f-step-num { font-size:11px; color:var(--blue); display:block; margin-bottom:16px; }
.f-steps h3 { font-family:var(--font-serif); font-size:35px; font-weight:400; margin-bottom:10px; }
.f-steps p { font-size:12px; line-height:1.8; max-width:230px; color:#665c68; }
.our-work { padding:80px var(--pad-x) 40px; background:#f4eee2; color:var(--ink); }
.f-studios-intro { max-width:1440px; margin:0 auto 50px; display:flex; justify-content:space-between; gap:40px; align-items:end; }
.f-studios-intro .f-eyebrow { margin-bottom:20px; color:#665b67; }
.f-studios-intro h2 { font-family:var(--font-serif); font-size:clamp(60px,7vw,96px); font-weight:400; letter-spacing:-.04em; line-height:1; }
.f-studios-intro>p { max-width:295px; font-size:13px; line-height:1.8; }
.studio-group { max-width:1440px; margin:0 auto 60px; }
.studio-cards { justify-content:center; }
.studio-group-header { padding:28px 32px; display:grid; grid-template-columns:100px 1.1fr 1fr; gap:28px; align-items:center; margin-bottom:28px; }
.studio-group-header.sky { background:var(--blue); }
.studio-group-header.lavender { background:var(--lavender); }
.studio-group-header.warm { background:var(--coral); }
.sgnum { color:inherit; font-size:10px; letter-spacing:.07em; }
.sgname { color:inherit; font-family:var(--font-serif); font-weight:400; text-transform:none; font-size:clamp(28px,3vw,44px); line-height:1.03; letter-spacing:-.025em; }
.sgdesc { color:inherit; font-size:12px; line-height:1.75; max-width:340px; }
.studio-group-header.sky { color:#fffaf1; }
/* Deliberately do not recolor/filter the original .face-front or .face-back images. */
.f-study { background:var(--paper); padding:85px var(--pad-x) 96px; }
.f-study-inner { display:grid; grid-template-columns:.85fr 1.5fr; gap:70px; align-items:center; }
.f-study-copy .f-eyebrow { color:var(--blue); margin-bottom:22px; }
.f-study h2 { font-family:var(--font-serif); font-weight:400; font-size:clamp(44px,4.5vw,66px); letter-spacing:-.03em; line-height:1; margin-bottom:24px; }
.f-study-copy>p { font-size:14px; line-height:1.85; max-width:335px; color:#665c68; }
.f-study-copy>p+p { margin-top:18px; font-size:11px; }
.f-swatch-list { display:flex; flex-wrap:wrap; gap:9px; margin:26px 0; }
.f-swatch-list span { width:32px; height:32px; border-radius:50%; }
.f-comparison { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.f-comparison figure { min-width:0; }
.f-comparison img { display:block; width:100%; aspect-ratio:2/3; height:auto; object-fit:contain; }
.f-comparison figcaption { margin-top:16px; font-size:11px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; line-height:1.5; }
.f-comparison figcaption span:last-child { color:#6b6070; font-size:10px; }
.f-connection { background:var(--blue); color:var(--paper); padding:58px var(--pad-x); }
.f-connection .f-wrap { display:grid; grid-template-columns:.75fr 1.5fr; align-items:center; gap:80px; }
.f-connection h2 { font-family:var(--font-serif); font-size:clamp(38px,4vw,60px); font-weight:400; line-height:1.04; }
.f-connection p { font-size:17px; line-height:1.8; max-width:680px; }
.f-partner { padding:86px var(--pad-x) 68px; background:var(--lavender); }
.f-partner .f-eyebrow { margin-bottom:30px; }
.f-partner-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:80px; align-items:end; }
.f-partner h2 { font-family:var(--font-serif); font-weight:400; font-size:clamp(58px,6.5vw,100px); letter-spacing:-.04em; line-height:.95; }
.f-partner-copy>p { font-size:15px; line-height:1.8; max-width:430px; margin-bottom:22px; }
.f-partner-copy small { display:block; font-size:10px; margin-top:14px; }
.f-footer { background:var(--lavender); color:var(--ink); padding:24px var(--pad-x); border-top:1px solid rgba(36,32,45,.3); display:block; }
.f-footer .f-wrap { display:flex; justify-content:space-between; align-items:center; gap:30px; }
.f-footer-word { font-size:28px; letter-spacing:-.07em; font-weight:600; text-decoration:none; }
.f-footer p,.f-footer>a { font-size:10px; }
.f-footer p a { text-decoration:none; border-bottom:1px solid currentColor; }
.no-js .card-inner { transform:rotateY(180deg); }
.no-js .card-meta { opacity:1; transform:none; }
@media(min-width:1700px) { .f-hero-inner { min-height:760px; } }
@media(max-width:1100px) {
 .f-hero-inner { min-height:640px; gap:15px; }
 .f-hero h1 { font-size:clamp(72px,9vw,105px); }
 .f-hero-copy>p { font-size:15px; max-width:360px; }
 .f-hero-art { width:calc(100% + 10px); margin:0; }
 .f-capabilities .f-wrap { grid-template-columns:1fr; gap:15px; }
 .f-capabilities ul { font-size:12px; }
 .f-section-intro { gap:45px; }
 .studio-group-header { grid-template-columns:70px 1fr 1fr; gap:20px; padding:25px; }
 .f-study-inner { gap:38px; grid-template-columns:.9fr 1.5fr; }
 .f-comparison { gap:15px; }
}
@media(max-width:760px) {
 .f-preview { padding-block:9px; font-size:9px; }
 .f-preview .f-wrap { gap:16px; }
 .f-preview .f-preview-extra { display:none; }
 .f-header { padding-block:22px; }
 .f-header .f-wrap { flex-wrap:wrap; gap:19px; }
 .f-logo { font-size:35px; }
 .f-logo img { width:29px; height:34px; }
 .f-nav { gap:26px; }
 .f-nav a { font-size:12px; padding:5px 0; }
 .f-hero-inner { min-height:0; grid-template-columns:1fr; gap:30px; padding:48px 0 28px; }
 .f-hero-copy .f-eyebrow { font-size:10px; margin-bottom:28px; }
 .f-hero h1 { font-size:clamp(74px,15vw,112px); margin-bottom:25px; }
 .f-hero-copy>p { max-width:430px; font-size:15px; margin-bottom:14px; }
 .f-hero-art { width:100%; max-width:550px; margin:0 auto; }
 .f-hero-bottom { font-size:9px; gap:12px; }
 .f-capabilities { padding-block:26px; }
 .f-capabilities ul { justify-content:start; gap:10px 24px; }
 .f-capabilities li { gap:9px; }
 .f-research { padding-top:60px; }
 .f-section-intro { grid-template-columns:1fr; gap:25px; }
 .f-section-intro h2 { font-size:46px; max-width:440px; }
 .f-section-intro .f-eyebrow { margin-bottom:18px; }
 .f-research-copy { padding-top:0; }
 .f-research-copy p { font-size:15px; }
 .f-research-copy p+p { font-size:12px; }
 .f-panorama { margin-top:32px; }
 .f-panorama figcaption { font-size:8px; gap:13px; }
 .f-process { padding-top:42px; padding-bottom:56px; }
 .f-process-head { display:block; }
 .f-process-head p { margin-top:13px; font-size:22px; }
 .f-steps { grid-template-columns:1fr 1fr; gap:28px 24px; }
 .f-steps li,.f-steps li:first-child { padding:0; border:0; }
 .f-steps h3 { font-size:30px; }
 .f-steps p { font-size:11px; }
 .f-step-num { margin-bottom:8px; }
 .our-work { padding-top:52px; padding-bottom:15px; }
 .f-studios-intro { display:block; margin-bottom:30px; }
 .f-studios-intro h2 { font-size:68px; }
 .f-studios-intro>p { margin-top:23px; max-width:340px; font-size:12px; }
 .studio-group { margin-bottom:42px; }
 .studio-group-header { display:block; padding:24px; margin-bottom:22px; }
 .sgnum { display:block; margin-bottom:14px; font-size:9px; }
 .sgname { display:block; font-size:36px; max-width:370px; }
 .sgdesc { display:block; margin-top:15px; font-size:11px; }
 .f-study { padding-block:56px; }
 .f-study-inner { grid-template-columns:1fr; gap:30px; }
 .f-study h2 { max-width:420px; font-size:46px; }
 .f-study-copy>p { max-width:440px; font-size:13px; }
 .f-swatch-list { margin-block:20px; }
 .f-comparison { gap:14px; }
 .f-comparison figcaption { display:block; margin-top:12px; font-size:10px; }
 .f-comparison figcaption span { display:block; }
 .f-comparison figcaption span:last-child { font-size:9px; margin-top:3px; }
 .f-connection { padding-block:45px; }
 .f-connection .f-wrap { grid-template-columns:1fr; gap:22px; }
 .f-connection h2 { font-size:43px; }
 .f-connection p { font-size:14px; }
 .f-partner { padding-top:56px; padding-bottom:46px; }
 .f-partner-grid { grid-template-columns:1fr; gap:30px; }
 .f-partner h2 { font-size:65px; }
 .f-partner-copy>p { font-size:13px; }
 .f-footer .f-wrap { flex-wrap:wrap; gap:18px; align-items:baseline; }
 .f-footer p { font-size:9px; }
}
@media(max-width:400px) {
 :root { --pad-x:22px; }
 .f-header .f-wrap { gap:16px; }
 .f-logo { font-size:32px; }
 .f-nav { gap:24px; width:100%; }
 .f-hero h1 { font-size:73px; }
 .f-hero-copy>p { font-size:14px; }
 .f-hero-bottom span:last-child { max-width:120px; text-align:right; }
 .f-section-intro h2 { font-size:42px; }
 .f-studios-intro h2 { font-size:60px; }
 .sgname { font-size:32px; }
 .f-study h2 { font-size:42px; }
 .f-partner h2 { font-size:58px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; } }
