*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f5f4ef;color:#151515;font-family:Arial,Helvetica,sans-serif}.nav{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:20px 4vw;border-bottom:1px solid #d8d7d1;background:rgba(245,244,239,.92);backdrop-filter:blur(10px)}a{color:inherit;text-decoration:none}.brand{font-size:13px;font-weight:700;letter-spacing:.08em}.nav nav{display:flex;gap:24px;font-size:13px}.hero{min-height:78vh;padding:10vh 4vw 6vh;display:flex;flex-direction:column;justify-content:space-between}.eyebrow,.section-head,.index{font-size:12px;letter-spacing:.12em;font-weight:700}.hero h1{max-width:1100px;font-size:clamp(52px,8vw,126px);line-height:.88;letter-spacing:-.065em;margin:8vh 0}.hero h1 span{color:#1769e0}.hero-bottom{display:flex;justify-content:space-between;align-items:end;gap:30px}.hero-bottom p{max-width:520px;font-size:20px;line-height:1.45;margin:0}.arrow{font-size:14px}.work{padding:0 4vw}.section-head{display:flex;justify-content:space-between;padding:20px 0;border-top:1px solid #bdbcb6}.case{padding:70px 0 110px;border-top:1px solid #d8d7d1}.case-copy{display:grid;grid-template-columns:1fr 2fr;column-gap:5vw}.case-copy .index{grid-row:1/4}.case h2{font-size:clamp(38px,5vw,72px);line-height:.98;letter-spacing:-.045em;margin:0 0 24px;max-width:900px}.lede{font-size:18px;line-height:1.55;max-width:720px;margin:0 0 28px}.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:38px}.tags span{border:1px solid #b8c9e4;border-radius:999px;padding:8px 12px;font-size:12px}figure{margin:0;background:#e9eef5;overflow:hidden}figure img{width:100%;display:block}.featured figure{border-radius:4px}.case-story{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin:38px 0 0 33.33%}.case-story h3{font-size:12px;text-transform:uppercase;letter-spacing:.1em}.case-story p{line-height:1.55;color:#4e5664}.note{margin:28px 0 0 33.33%;font-size:12px;color:#6d7480}.about{margin:20px 4vw 0;padding:100px 0;display:grid;grid-template-columns:1fr 1fr;gap:8vw;border-top:1px solid #bdbcb6}.about h2{font-size:clamp(38px,4vw,64px);line-height:1;letter-spacing:-.04em}.about-copy{font-size:18px;line-height:1.6}.skills{margin-top:35px;padding-top:25px;border-top:1px solid #ccc;line-height:1.8}.contact{padding:110px 4vw;background:#1769e0;color:white}.contact h2{font-size:clamp(46px,7vw,100px);line-height:.95;letter-spacing:-.05em;max-width:1100px;margin:30px 0 60px}.contact a{font-size:20px;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:5px}footer{padding:22px 4vw;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.1em}@media(max-width:760px){.nav nav{gap:12px}.hero{min-height:70vh}.hero h1{font-size:15vw}.hero-bottom,.case-copy,.about{display:block}.hero-bottom p{margin-bottom:24px}.case-copy .index{margin-bottom:24px}.case-story{grid-template-columns:1fr;margin-left:0}.note{margin-left:0}.about-copy{margin-top:40px}.case{padding:55px 0 75px}.contact{padding:80px 4vw}}
.journey{margin:70px 0 0 33.33%;padding-top:28px;border-top:1px solid #c9c8c2}
.journey-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#d5d4ce;margin-top:20px;border:1px solid #d5d4ce}
.journey-grid>div{background:#f5f4ef;padding:28px}
.journey-grid strong{font-size:12px;color:#1769e0}
.journey-grid h3{font-size:24px;margin:28px 0 10px;letter-spacing:-.03em}
.journey-grid p{margin:0;line-height:1.55;color:#525a67}
.launch-row{display:grid;grid-template-columns:1fr 2fr;gap:5vw;margin-top:70px;padding:35px 0;border-top:1px solid #bdbcb6;border-bottom:1px solid #bdbcb6}
.launch-row p{line-height:1.55}.launch-big{font-size:40px!important;letter-spacing:-.04em;margin:14px 0 0;color:#1769e0}
@media(max-width:760px){.journey{margin-left:0}.journey-grid{grid-template-columns:1fr}.launch-row{grid-template-columns:1fr;gap:20px}}

.zurich-placeholder{margin:10px 0 0 33.33%;min-height:360px;padding:44px;display:flex;flex-direction:column;justify-content:space-between;background:#e9e2d6;border-radius:4px}
.zurich-placeholder h3{max-width:760px;font-size:clamp(34px,4vw,58px);line-height:1;letter-spacing:-.04em;margin:22px 0}
.zurich-placeholder p:not(.eyebrow){max-width:680px;font-size:17px;line-height:1.55}
.zurich-placeholder a{align-self:flex-start;border-bottom:1px solid #151515;padding-bottom:4px;font-size:13px}
@media(max-width:760px){.zurich-placeholder{margin-left:0;padding:28px;min-height:320px}}

.zurich-cover{margin-top:10px}
.zurich-cover img{width:100%;display:block}
.zurich-cover figcaption{padding:12px 0;background:#f5f4ef;font-size:12px;line-height:1.5;color:#69717d}
.zurich-intro{margin:42px 0 0 33.33%;max-width:760px}
.zurich-intro>p:not(.eyebrow){font-size:19px;line-height:1.55;margin:18px 0 24px}
.zurich-intro a{font-size:13px;border-bottom:1px solid #151515;padding-bottom:4px}
@media(max-width:760px){.zurich-intro{margin-left:0}}

/* Local continuation: navigation, readable type and responsive access. */
html{scroll-padding-top:100px}
main{outline:none}
a:focus-visible{outline:3px solid currentColor;outline-offset:5px}
.skip-link{position:fixed;top:12px;left:4vw;z-index:10;padding:14px 18px;background:#151515;color:#fff;transform:translateY(-180%)}
.skip-link:focus{transform:translateY(0)}
.nav{padding-block:10px;gap:8px 24px;flex-wrap:wrap}
.nav a{display:inline-flex;align-items:center;min-height:44px}
.nav nav{gap:16px}
.nav nav a{justify-content:center;min-width:44px}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.hero h1{font-size:clamp(48px,8vw,96px);line-height:.98;letter-spacing:-.04em}
.case h2,.about h2{letter-spacing:-.035em;line-height:1.04}
.contact h2{font-size:clamp(42px,7vw,96px);line-height:1.02;letter-spacing:-.035em}
.case-copy>*{min-width:0}
.hero-bottom p,.lede,.about-copy p,.zurich-intro>p{max-width:65ch}
.project-nav{display:flex;flex-wrap:wrap;gap:8px 32px;padding:0 0 28px}
.project-nav a{display:inline-flex;align-items:center;gap:16px;min-height:44px;font-size:15px}
.project-nav span{color:#1769e0}
.project-nav a:hover,.nav nav a:hover{color:#1769e0}
.hero-bottom p{max-width:520px}
.arrow{display:inline-flex;align-items:center;min-height:44px;flex-shrink:0;white-space:nowrap}
figure img{height:auto}
.note,.zurich-cover figcaption{color:#606975}
.contact a{display:inline-block;max-width:100%;overflow-wrap:anywhere;line-height:1.6}
.contact-methods{display:flex;flex-wrap:wrap;align-items:center;gap:16px 40px}
.contact-methods a{min-height:44px}
.zurich-intro a{display:inline-flex;align-items:center;min-height:44px}
@media(min-width:761px) and (max-width:1024px){
  .case-story{grid-template-columns:1fr;gap:12px}
}
@media(max-width:760px){
  .hero{min-height:70svh;padding-top:7vh}
  .hero h1{font-size:clamp(40px,11vw,76px);margin:48px 0}
  .hero-bottom p{font-size:18px}
  .case h2,.about h2{font-size:clamp(32px,8vw,54px)}
}
@media(max-width:480px){
  html{scroll-padding-top:128px}
  .nav{gap:0}
  .brand{width:100%}
  .nav nav{width:100%;justify-content:space-between}
  .project-nav{gap:4px 20px}
  .project-nav a{font-size:14px;gap:8px}
  footer{gap:18px;flex-wrap:wrap;line-height:1.5}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* RMHC: selected Get Involved screens and design decisions. */
.rmhc-chapter{margin-top:80px;padding-top:40px;border-top:1px solid #c9c8c2}
.rmhc-chapter-intro{display:grid;grid-template-columns:1fr 2fr;gap:5vw;margin-bottom:40px}
.rmhc-label{font-size:15px;margin:8px 0;color:#4e5664}
.rmhc-chapter h3,.rmhc-detail h3{font-size:clamp(30px,3.3vw,48px);line-height:1.08;letter-spacing:-.03em;margin:0 0 24px;max-width:22ch}
.rmhc-chapter-intro p:not(.rmhc-label),.rmhc-detail-copy>p{font-size:18px;line-height:1.6;max-width:62ch;color:#4e5664;margin:0 0 18px}
.rmhc-screen-pair{display:grid;grid-template-columns:minmax(0,1440fr) minmax(0,390fr);gap:clamp(24px,3vw,48px);align-items:start;padding:clamp(20px,3.5vw,56px);background:#e5e0f7}
.rmhc-screen-pair .rmhc-screen{background:transparent;overflow:visible;border-radius:0;min-width:0}
.rmhc-screen-label{display:flex;justify-content:space-between;gap:12px;margin-bottom:14px;font-size:13px;color:#464052}
.rmhc-screen-label span:first-child{font-weight:700}
.rmhc-screen-window{display:block;overflow:hidden;border-radius:4px;background:#fffce8}
.rmhc-desktop .rmhc-screen-window{aspect-ratio:1440/1320}
.rmhc-mobile .rmhc-screen-window{aspect-ratio:390/1030}
.rmhc-screen-window img{width:100%;height:auto}
.rmhc-screen figcaption{font-size:13px;line-height:1.5;padding-top:12px;color:#464052}
.rmhc-screen figcaption a{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:underline;text-underline-offset:4px}
.rmhc-caption{font-size:13px;line-height:1.6;color:#606975;margin:16px 0 0}
.rmhc-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(40px,7vw,120px);align-items:center;max-width:1100px;margin:80px auto 0}
.rmhc-decisions{margin:32px 0 0}
.rmhc-decisions>div{padding:20px 0;border-top:1px solid #d8d7d1}
.rmhc-decisions dt{font-size:16px;font-weight:700;line-height:1.4;margin-bottom:8px}
.rmhc-decisions dd{font-size:16px;line-height:1.6;color:#4e5664;margin:0;max-width:55ch}
.rmhc-donate-rationale{display:grid;grid-template-columns:1fr 2fr;gap:5vw;margin-top:48px}
.case-page .rmhc-donate-rationale h3{font-size:clamp(26px,2.4vw,34px);line-height:1.15;letter-spacing:-.025em;margin:20px 0 0;max-width:18ch}
.rmhc-donate-rationale .rmhc-decisions{margin:0}
.rmhc-detail .rmhc-detail-figure{width:100%;max-width:390px;justify-self:center;border-radius:0;background:transparent;overflow:visible}
.rmhc-detail-figure>a{display:block}
.rmhc-detail-figure img{width:100%;height:auto;border-radius:4px}
.rmhc-detail-figure figcaption{padding-top:16px;font-size:13px;line-height:1.6;color:#606975}
@media(max-width:1000px){
  .rmhc-chapter-intro{grid-template-columns:1fr;gap:16px}
  .rmhc-chapter-intro>div{max-width:720px}
  .rmhc-donate-rationale{grid-template-columns:minmax(0,1fr);gap:24px}
  .case-page .rmhc-donate-rationale h3{margin-top:0;max-width:24ch}
  .rmhc-detail{gap:36px}
}
@media(max-width:900px){
  .rmhc-screen-pair{grid-template-columns:minmax(0,1fr);gap:32px}
  .rmhc-mobile{width:min(100%,300px);justify-self:center}
}
@media(max-width:600px){
  .rmhc-chapter{margin-top:48px;padding-top:28px}
  .rmhc-chapter-intro{margin-bottom:28px}
  .rmhc-screen-pair{padding:20px}
  .rmhc-detail{grid-template-columns:1fr;margin-top:48px;gap:28px}
  .rmhc-detail .rmhc-detail-figure{max-width:340px}
  .rmhc-chapter h3,.rmhc-detail h3{font-size:32px}
  .rmhc-chapter-intro p:not(.rmhc-label),.rmhc-detail-copy>p{font-size:17px}
}

/* RMHC: selected service journeys and wireframe comparisons. */
.rmhc-case-nav{margin-top:48px;padding:24px 0;border-top:1px solid #c9c8c2}
.rmhc-case-nav p{margin:0 0 12px;font-size:15px;font-weight:700}
.rmhc-case-nav>div{display:flex;flex-wrap:wrap;gap:4px 28px}
.rmhc-case-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;text-decoration:underline;text-underline-offset:5px;text-decoration-color:#bdbcb6}
.rmhc-case-nav a:hover{color:#1769e0;text-decoration-color:currentColor}
.rmhc-case-nav+.rmhc-chapter{margin-top:16px}
.rmhc-expanded{scroll-margin-top:24px}
.rmhc-flow{display:flex;flex-wrap:wrap;gap:12px 32px;margin:0 0 32px;padding:0;list-style:none;counter-reset:flow}
.rmhc-flow li{display:flex;align-items:baseline;gap:10px;font-size:15px;line-height:1.5;counter-increment:flow}
.rmhc-flow li::before{content:counter(flow,decimal-leading-zero);font-size:12px;color:#1769e0;font-weight:700}
.rmhc-more{margin-top:24px;border-top:1px solid #c9c8c2;border-bottom:1px solid #c9c8c2}
.rmhc-more summary{padding:20px 4px;min-height:60px;cursor:pointer;font-size:16px;line-height:1.5;font-weight:700}
.rmhc-more summary::marker{color:#1769e0}
.rmhc-more summary:hover{color:#1769e0}
.rmhc-more summary:focus-visible{outline:3px solid #1769e0;outline-offset:4px}
.rmhc-mobile-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:32px;padding:28px clamp(16px,3vw,44px);background:#e5e0f7;margin-bottom:24px}
.rmhc-mobile-gallery .rmhc-screen{background:transparent;overflow:visible;width:min(100%,300px);justify-self:center;min-width:0}
.rmhc-mobile-gallery .rmhc-screen-label{min-height:40px;align-items:start}
.rmhc-mobile-gallery .rmhc-screen-window{aspect-ratio:390/1120}
.rmhc-process-block{margin-top:48px}
.rmhc-process-block h4{font-size:24px;line-height:1.2;letter-spacing:-.02em;margin:0 0 16px;text-wrap:balance}
.rmhc-process-block>p{max-width:70ch;font-size:17px;line-height:1.6;color:#4e5664;margin:0 0 28px}
.rmhc-process-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;padding:clamp(20px,3vw,44px);background:#e5e0f7}
.rmhc-process-pair .rmhc-screen{background:transparent;overflow:visible;min-width:0}
.rmhc-process-pair .rmhc-screen-label{min-height:40px}
.rmhc-process-pair .rmhc-screen-window{aspect-ratio:1440/1680}
.rmhc-evidence-note{max-width:75ch;margin:28px 0 0;font-size:13px;line-height:1.6;color:#606975}
@media(max-width:760px){
  .rmhc-case-nav>div{gap:4px 20px}
  .rmhc-flow{gap:12px 20px}
  .rmhc-process-pair{grid-template-columns:minmax(0,1fr);gap:28px}
  .rmhc-process-block{margin-top:32px}
}
@media(prefers-reduced-motion:no-preference){
  .rmhc-case-nav a,.rmhc-more summary{transition:color .18s ease-out}
}

/* Project directory and independent case-study pages. */
.home-page .hero{min-height:0;padding:56px 4vw 64px}
.home-page .hero h1{max-width:1050px;font-size:clamp(40px,5.4vw,72px);line-height:1.02;margin:32px 0}
.home-page .hero-bottom p{font-size:18px}
.directory-heading{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:24px 0 32px;border-top:1px solid #bdbcb6}
.directory-heading h2{font-size:28px;letter-spacing:-.025em;line-height:1.2;margin:0}
.directory-heading p{font-size:14px;color:#4e5664;margin:0;white-space:nowrap}
.project-directory{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;padding-bottom:64px}
.project-entry{min-width:0;scroll-margin-top:24px}
.project-entry>a{display:flex;flex-direction:column;height:100%;padding-bottom:20px;border-bottom:1px solid #c9c8c2}
.project-cover{display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;padding:18px;overflow:hidden}
.project-cover img{display:block;width:100%;height:100%;object-fit:contain}
.project-cover--rmhc{background:#e5e0f7}
.project-cover--foremost{background:#e9eef5}
/* Match the neighbouring previews with a light side crop, keeping the image proportional. */
.project-cover--foremost img{height:auto;aspect-ratio:2/1;object-fit:cover;object-position:center}
.project-cover--zurich{background:#e9e2d6}
.project-category{font-size:13px;line-height:1.5;color:#4e5664;margin:22px 0 8px}
.project-entry-title{font-size:clamp(25px,2.4vw,34px);line-height:1.1;letter-spacing:-.03em;margin:0 0 16px;text-wrap:balance}
.project-summary{max-width:40ch;font-size:16px;line-height:1.55;color:#4e5664;margin:0 0 20px}
.project-entry-link{display:flex;align-items:center;gap:14px;min-height:44px;margin-top:auto;font-size:15px;font-weight:700}
.project-entry-link>span{color:#1769e0}
.project-entry>a:hover .project-entry-title,.project-entry>a:hover .project-entry-link{color:#1769e0}
.project-entry>a:focus-visible{outline:3px solid #1769e0;outline-offset:8px}
.home-page .about{margin-top:0;padding:64px 0}
.case-main{padding:0 4vw}
.case-navigation{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px 32px;padding:24px 0;border-bottom:1px solid #d8d7d1}
.back-to-work{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:15px;font-weight:700}
.case-switcher{display:flex;flex-wrap:wrap;gap:4px 24px}
.case-switcher a{display:inline-flex;align-items:center;min-height:44px;font-size:14px}
.case-switcher a[aria-current="page"]{color:#1769e0;text-decoration:underline;text-underline-offset:6px;font-weight:700}
.case-switcher a:hover,.back-to-work:hover{color:#1769e0}
.case-page .case{padding:56px 0 72px;border:0}
.case-page .case-copy h1{font-size:clamp(38px,5vw,72px);line-height:1.04;letter-spacing:-.035em;margin:0 0 24px;max-width:900px}
.case-page .case-story h2{font-size:12px;line-height:normal;text-transform:uppercase;letter-spacing:.1em;margin:1em 0;max-width:none}
.case-page .journey-grid h2{font-size:24px;line-height:normal;margin:28px 0 10px;letter-spacing:-.03em}
.case-page .rmhc-chapter h2,.case-page .rmhc-detail h2{font-size:clamp(30px,3.3vw,48px);line-height:1.08;letter-spacing:-.03em;margin:0 0 24px;max-width:22ch}
.case-page .rmhc-process-block h3{font-size:24px;line-height:1.2;letter-spacing:-.02em;margin:0 0 16px;text-wrap:balance}
.case-end-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;border-top:1px solid #bdbcb6;padding:32px 0 64px}
.case-end-nav a{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;min-height:96px;padding:8px 0}
.case-end-nav a:last-child{align-items:flex-end;text-align:right}
.case-end-nav a>span{font-size:14px;color:#4e5664}
.case-end-nav strong{font-size:clamp(22px,2.6vw,36px);line-height:1.2;letter-spacing:-.02em}
.case-end-nav a:hover strong{color:#1769e0}
@media(max-width:1000px){
  .project-directory{gap:24px}
  .project-cover{padding:12px}
}
@media(max-width:760px){
  .home-page .hero{padding-top:40px;padding-bottom:48px}
  .home-page .hero h1{font-size:clamp(40px,9vw,64px);margin:28px 0}
  .project-directory{grid-template-columns:minmax(0,1fr);gap:40px;padding-bottom:48px}
  .project-cover{aspect-ratio:16/9;padding:18px}
  .project-entry-title{font-size:30px}
  .project-summary{max-width:55ch}
  .case-navigation{align-items:flex-start;gap:8px;padding:16px 0}
  .case-switcher{width:100%;gap:4px 20px}
  .case-page .case{padding-top:32px}
  .case-page .case-copy h1{font-size:clamp(32px,8vw,54px)}
}
@media(max-width:420px){
  .case-end-nav{grid-template-columns:minmax(0,1fr);gap:16px}
  .case-end-nav a:last-child{align-items:flex-start;text-align:left}
}
@media(max-width:600px){
  .case-page .rmhc-chapter h2,.case-page .rmhc-detail h2{font-size:32px}
}
@media(prefers-reduced-motion:no-preference){
  .project-entry-title,.project-entry-link,.case-end-nav strong{transition:color .18s ease-out}
}

/* Foremost: product, commerce and customer-facing CRM evidence. */
.fm-case-nav{margin-top:48px;padding:24px 0;border-block:1px solid #c9c8c2}
.fm-case-nav>p{font-size:15px;font-weight:700;margin:0 0 12px}
.fm-case-nav>div{display:flex;flex-wrap:wrap;gap:4px 28px}
.fm-case-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;text-decoration:underline;text-underline-offset:5px;text-decoration-color:#bdbcb6}
.fm-case-nav a:hover{color:#1769e0;text-decoration-color:currentColor}
.fm-section{padding-top:48px;margin-top:64px;border-top:1px solid #c9c8c2;scroll-margin-top:24px}
.fm-case-nav+.fm-section{border:0;margin-top:0}
.fm-section-intro{display:grid;grid-template-columns:1fr 2fr;gap:5vw;margin-bottom:36px}
.fm-label{font-size:15px;line-height:1.6;color:#4e5664;margin:8px 0}
.case-page .fm-section h2{font-size:clamp(30px,3.3vw,48px);line-height:1.08;letter-spacing:-.03em;max-width:25ch;margin:0 0 24px}
.fm-section-intro>div>p,.fm-subsection>p,.fm-more-intro{font-size:18px;line-height:1.6;color:#4e5664;max-width:66ch;margin:0}
.fm-section-intro>div>p+p{margin-top:16px}
.fm-desktop-gallery,.fm-responsive-pair,.fm-phone-gallery{display:grid;gap:32px;padding:clamp(20px,3vw,44px);background:#e7f2f8;align-items:start}
.fm-desktop-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
.fm-responsive-pair{grid-template-columns:minmax(0,1440fr) minmax(0,430fr)}
.fm-phone-gallery{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,4vw,64px);row-gap:40px;padding-inline:clamp(20px,4vw,64px)}
.case .fm-screen{background:transparent;border-radius:0;overflow:visible;min-width:0;margin:0}
.fm-screen-label{font-size:14px;line-height:1.5;font-weight:700;color:#374d5a;margin-bottom:14px}
.fm-preview{display:block;overflow:hidden;background:#fff;border-radius:4px;aspect-ratio:1440/1400}
.fm-preview img{display:block;width:100%;height:auto}
.fm-natural .fm-preview{aspect-ratio:auto}
.fm-mobile .fm-preview{aspect-ratio:430/1120}
.fm-phone{width:100%;max-width:390px;justify-self:center}
.fm-phone .fm-preview{aspect-ratio:auto;max-height:780px}
.fm-screen figcaption{color:#4e5664;font-size:14px;line-height:1.6;padding-top:16px}
.fm-screen figcaption p{max-width:58ch;margin:0 0 4px}
.fm-screen figcaption a{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:underline;text-underline-offset:4px;color:#374d5a}
.fm-crm .fm-label{color:#914500}
.fm-scope{display:flex;flex-wrap:wrap;gap:12px 28px;list-style:none;padding:0;margin:0 0 28px;font-size:15px;color:#374d5a}
.fm-scope li{padding-bottom:8px;border-bottom:1px solid #b5cbd7}
.fm-line-entry{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,420px);gap:clamp(24px,5vw,80px);align-items:center;margin-bottom:32px;padding:clamp(24px,4vw,56px);background:#e7f2f8}
.fm-line-entry-copy h3{font-size:clamp(26px,2.8vw,40px);line-height:1.12;letter-spacing:-.025em;margin:12px 0 20px;max-width:18ch}
.fm-line-entry-copy>p:last-child{font-size:18px;line-height:1.6;color:#4e5664;max-width:54ch;margin:0}
.fm-line-entry-figure{width:100%;max-width:420px;justify-self:center}
.fm-line-entry-figure .fm-preview{position:relative;aspect-ratio:1290/1050}
.fm-line-entry-figure .fm-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 94%}
.fm-subsection{margin:56px 0 32px;max-width:900px}
.fm-subsection h3{font-size:clamp(26px,2.4vw,34px);line-height:1.15;letter-spacing:-.025em;margin:0 0 20px}
.fm-more{margin-top:32px;border-block:1px solid #c9c8c2}
.fm-more summary{padding:20px 4px;min-height:60px;font-size:16px;line-height:1.5;font-weight:700;cursor:pointer}
.fm-more summary::marker{color:#1769e0}
.fm-more summary:hover{color:#1769e0}
.fm-more summary:focus-visible{outline:3px solid #1769e0;outline-offset:4px}
.fm-more-intro{margin:8px 0 28px;font-size:17px}
.fm-more .fm-phone-gallery{margin-bottom:24px}
@media(max-width:1000px){
  .fm-section-intro{grid-template-columns:minmax(0,1fr);gap:16px}
  .fm-section-intro>div{max-width:760px}
  .fm-phone-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .fm-responsive-pair{grid-template-columns:minmax(0,1fr)}
  .fm-mobile{width:min(100%,340px);justify-self:center}
}
@media(max-width:680px){
  .fm-section{margin-top:48px;padding-top:32px}
  .fm-section-intro{margin-bottom:28px}
  .fm-desktop-gallery,.fm-phone-gallery{grid-template-columns:minmax(0,1fr)}
  .fm-line-entry{grid-template-columns:minmax(0,1fr)}
  .fm-phone{max-width:340px}
  .fm-section-intro>div>p,.fm-subsection>p{font-size:17px}
  .fm-line-entry-copy>p:last-child{font-size:17px}
  .case-page .fm-section h2{font-size:32px}
  .fm-subsection{margin-top:40px}
}
@media(prefers-reduced-motion:no-preference){
  .fm-case-nav a,.fm-more summary{transition:color .18s ease-out}
}

/* Zurich: customer ordering and restaurant operations. */
.zr-case-nav{margin-top:48px;padding:24px 0;border-block:1px solid #c9c8c2}
.zr-case-nav>p{font-size:15px;font-weight:700;margin:0 0 12px}
.zr-case-nav>div{display:flex;flex-wrap:wrap;gap:4px 28px}
.zr-case-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;text-decoration:underline;text-underline-offset:5px;text-decoration-color:#bdbcb6}
.zr-case-nav a:hover{color:#1769e0;text-decoration-color:currentColor}
.zr-section{margin-top:64px;padding-top:48px;border-top:1px solid #c9c8c2;scroll-margin-top:24px}
.zr-case-nav+.zr-section{margin-top:0;border:0}
.zr-section-intro{display:grid;grid-template-columns:1fr 2fr;gap:5vw;margin-bottom:36px}
.zr-label{margin:8px 0;font-size:15px;line-height:1.6;color:#655746}
.case-page .zr-section h2{font-size:clamp(30px,3.3vw,48px);line-height:1.08;letter-spacing:-.03em;max-width:25ch;margin:0 0 24px}
.zr-section-intro>div>p,.zr-detail-copy p,.zr-operations-copy p,.zr-more-intro{font-size:18px;line-height:1.6;color:#4e5664;max-width:66ch;margin:0}
.zr-stage{padding:clamp(20px,3vw,44px);background:#e9e2d6}
.zr-pair{display:grid;grid-template-columns:minmax(0,1440fr) minmax(0,390fr);gap:32px;align-items:start}
.case .zr-screen{min-width:0;margin:0;background:transparent;overflow:visible;border-radius:0}
.zr-screen-label{margin-bottom:14px;color:#554838;font-size:14px;font-weight:700;line-height:1.5}
.zr-preview{display:block;overflow:hidden;background:#fff;border-radius:4px}
.zr-preview img{display:block;width:100%;height:auto}
.zr-desktop .zr-preview{aspect-ratio:1440/1180}
.zr-mobile .zr-preview{aspect-ratio:390/1120}
.zr-screen figcaption{padding-top:16px;color:#4e5664;font-size:14px;line-height:1.6}
.zr-screen figcaption p{margin:0 0 4px;max-width:78ch}
.zr-screen figcaption a{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:underline;text-underline-offset:4px;color:#554838}
.zr-more{margin-top:32px;border-block:1px solid #c9c8c2}
.zr-more summary{padding:20px 4px;min-height:60px;font-size:16px;font-weight:700;line-height:1.5;cursor:pointer}
.zr-more summary::marker{color:#1769e0}
.zr-more summary:hover{color:#1769e0}
.zr-more summary:focus-visible{outline:3px solid #1769e0;outline-offset:4px}
.zr-more-intro{margin:8px 0 28px;font-size:17px}
.zr-cart-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;margin-bottom:24px;align-items:start}
.zr-cart{width:100%;max-width:420px;justify-self:center}
.zr-confirmation{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(32px,5vw,72px);align-items:start;margin-top:56px}
.zr-detail-copy{padding-top:24px}
.zr-detail-copy h3,.zr-operations-copy h3{font-size:clamp(26px,2.4vw,34px);line-height:1.15;letter-spacing:-.025em;margin:0 0 20px}
.zr-detail-copy p+p{margin-top:20px}
.zr-operations .zr-stage{background:#e5e8e7}
.zr-operations .zr-screen-label,.zr-operations .zr-screen figcaption a{color:#394e48}
.zr-operations-copy{margin:48px 0 28px;max-width:900px}
@media(max-width:1000px){
  .zr-section-intro{grid-template-columns:minmax(0,1fr);gap:16px}
  .zr-section-intro>div{max-width:760px}
}
@media(max-width:900px){
  .zr-pair,.zr-confirmation{grid-template-columns:minmax(0,1fr)}
  .zr-mobile{width:min(100%,340px);justify-self:center}
  .zr-detail-copy{padding-top:0;max-width:760px}
}
@media(max-width:680px){
  .zr-section{margin-top:48px;padding-top:32px}
  .zr-section-intro{margin-bottom:28px}
  .case-page .zr-section h2{font-size:32px}
  .zr-section-intro>div>p,.zr-detail-copy p,.zr-operations-copy p{font-size:17px}
  .zr-cart-pair{grid-template-columns:minmax(0,1fr);gap:32px}
  .zr-cart{max-width:340px}
  .zr-confirmation{margin-top:40px}
}
@media(prefers-reduced-motion:no-preference){
  .zr-case-nav a,.zr-more summary{transition:color .18s ease-out}
}

/* Homepage: a clear introduction followed by the actual case work. */
.home-page .nav{background:#f5f4ef;color:#151515;border-color:#d8d7d1}
.home-page .nav nav a:hover{color:#1769e0}
.home-page .hero{display:flex;flex-direction:column;justify-content:center;min-height:clamp(500px,72svh,720px);padding:clamp(80px,9vw,140px) 4vw clamp(90px,10vw,150px);background:#f5f4ef;color:#151515}
.home-page .hero-copy{max-width:1100px}
.home-page .hero .eyebrow{margin:0 0 32px;color:#4e5664}
.home-page .hero h1{max-width:1050px;font-size:clamp(48px,5.4vw,78px);line-height:1.02;letter-spacing:-.04em;margin:0 0 34px;text-wrap:balance}
.home-page .hero h1 span{color:#1769e0}
.hero-description{max-width:53ch;margin:0;color:#4e5664;font-size:clamp(17px,1.45vw,20px);line-height:1.55}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;margin-top:38px}
.hero-actions a{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;min-height:52px;font-size:15px;font-weight:700}
.hero-primary{padding:0 20px;background:#1769e0;color:#fff;border:1px solid #1769e0}
.hero-primary:hover{background:#1257ba}
.hero-secondary{padding:0 2px;border-bottom:1px solid #9ea5ad}
.hero-secondary:hover{color:#1769e0;border-color:#1769e0}
.home-page .work{background:#f5f4ef;padding-top:clamp(20px,3vw,44px)}
.home-page .directory-heading{padding:24px 0 34px;border-color:#9d9e9d}
.home-page .directory-heading h2{font-size:clamp(38px,4.5vw,64px);line-height:1;letter-spacing:-.04em}
.home-page .directory-heading p{font-size:15px}
.home-page .project-directory{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,4vw,64px) 28px;padding-bottom:clamp(48px,6vw,80px)}
.home-page .project-entry>a{border-color:#b6b7b4}
.home-page .project-entry:first-child{grid-column:1/-1}
.home-page .project-entry:first-child>a{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);grid-template-rows:auto auto 1fr auto;column-gap:clamp(28px,5vw,80px);align-items:start;padding:0 0 40px}
.home-page .project-entry:first-child .project-cover{grid-column:1;grid-row:1/5;aspect-ratio:1.75}
.home-page .project-entry:first-child .project-category{grid-column:2;grid-row:1;margin:18px 0 24px}
.home-page .project-entry:first-child .project-entry-title{grid-column:2;grid-row:2;font-size:clamp(42px,4.5vw,68px);letter-spacing:-.04em}
.home-page .project-entry:first-child .project-summary{grid-column:2;grid-row:3;font-size:clamp(17px,1.5vw,20px);max-width:35ch}
.home-page .project-entry:first-child .project-entry-link{grid-column:2;grid-row:4;align-self:end}
.home-page .project-cover{aspect-ratio:1.62;padding:clamp(12px,2vw,26px)}
.home-page .project-category{display:flex;flex-wrap:wrap;gap:14px;margin:22px 0 12px;color:#4b5462}
.home-page .project-category span{font-weight:700;color:#1769e0;white-space:nowrap}
.home-page .project-entry-title{font-size:clamp(30px,3vw,44px);margin-bottom:14px}
.home-page .project-summary{max-width:45ch;font-size:17px}
.home-page .project-entry-link{font-size:16px}
.system-spotlight{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,80px);align-items:center;padding:clamp(42px,5vw,72px) 0 clamp(64px,7vw,100px);border-top:1px solid #aeb0af}
.system-spotlight-copy .eyebrow{margin:0 0 24px;color:#1769e0}
.system-spotlight h3{max-width:12ch;font-size:clamp(36px,4vw,60px);line-height:1.05;letter-spacing:-.045em;margin:0 0 24px}
.system-spotlight-copy>p:not(.eyebrow){max-width:48ch;color:#4e5664;font-size:clamp(17px,1.4vw,19px);line-height:1.55;margin:0 0 30px}
.system-spotlight-copy>a,.rmhc-system-copy>a{display:inline-flex;align-items:center;gap:18px;min-height:44px;border-bottom:1px solid #1769e0;color:#1257ba;font-size:16px;font-weight:700}
.system-spotlight-copy>a:hover,.rmhc-system-copy>a:hover{color:#0c408b}
.system-spotlight-preview{min-width:0;padding:18px;background:#e5e0f7}
.system-spotlight-preview img{display:block;width:100%;height:auto}
.system-spotlight-preview>span{display:block;margin-top:14px;color:#4e5664;font-size:12px;letter-spacing:.04em}
.home-page .about{margin:0 4vw;padding:clamp(76px,8vw,130px) 0;gap:clamp(35px,8vw,130px);border-color:#aeb0af}
.home-page .about h2{max-width:13ch;font-size:clamp(40px,4.3vw,66px);line-height:1.06;text-wrap:balance}
.home-page .about-copy{max-width:63ch}
.home-page .skills{font-size:15px;line-height:1.7}
.about-resume{display:inline-flex;align-items:center;gap:16px;min-height:44px;margin-top:24px;border-bottom:1px solid #1769e0;color:#1257ba;font-size:16px;font-weight:700}
.about-resume:hover{color:#0c408b}
.home-page .contact{padding:clamp(80px,9vw,140px) 4vw}
.home-page .contact .eyebrow{color:#d6e7ff}
.home-page .contact h2{max-width:14ch;margin:28px 0 52px;font-size:clamp(48px,6.5vw,96px);letter-spacing:-.04em;text-wrap:balance}
.home-page .contact-methods{gap:18px 44px}
.home-page .contact-methods a{display:inline-flex;align-items:center;min-height:48px;font-size:clamp(17px,1.55vw,22px)}
.home-page .contact-methods a:hover{color:#d6e7ff}
.home-page #work,.home-page #rmhc-design-system,.home-page #about,.home-page #contact{scroll-margin-top:70px}
@media(max-width:1000px){
  .home-page .hero{min-height:0}
  .home-page .hero h1{font-size:clamp(48px,6.4vw,68px)}
  .home-page .about{grid-template-columns:minmax(0,1fr);gap:26px}
  .home-page .about h2{max-width:18ch;margin:0}
  .home-page .about-copy{margin-top:0}
}
@media(max-width:760px){
  .home-page .nav{align-items:flex-start;gap:16px}
  .home-page .hero{padding:72px 4vw 86px}
  .home-page .hero h1{font-size:clamp(48px,9vw,68px);margin:0 0 26px}
  .home-page .hero .eyebrow{margin-bottom:24px}
  .home-page .project-directory{grid-template-columns:minmax(0,1fr);gap:38px}
  .home-page .project-entry:first-child{grid-column:auto}
  .home-page .project-entry:first-child>a{display:flex;flex-direction:column;padding-bottom:20px}
  .home-page .project-entry:first-child .project-cover{width:100%;aspect-ratio:1.62}
  .home-page .project-entry:first-child .project-category{margin:22px 0 12px}
  .home-page .project-entry:first-child .project-entry-title{font-size:clamp(30px,7vw,42px)}
  .home-page .project-entry:first-child .project-summary{font-size:17px}
  .home-page .project-entry:first-child .project-entry-link{align-self:flex-start}
  .system-spotlight{grid-template-columns:minmax(0,1fr);gap:32px}
  .system-spotlight h3{max-width:16ch}
  .home-page .about{padding:75px 0}
  .home-page .about h2{max-width:16ch}
}

/* RMHC design-system deep dive inside the case study. */
.rmhc-system-section{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,80px);align-items:center;margin-top:80px;padding:clamp(32px,5vw,64px);background:#e5e0f7;scroll-margin-top:110px}
.rmhc-system-copy .rmhc-label{margin:0 0 18px;color:#4e5664}
.case-page .rmhc-system-copy h2{max-width:14ch;font-size:clamp(32px,3.5vw,52px);line-height:1.08;letter-spacing:-.035em;margin:0 0 22px}
.rmhc-system-copy>p:not(.rmhc-label){max-width:50ch;color:#4e5664;font-size:17px;line-height:1.6;margin:0 0 28px}
.rmhc-system-preview{min-width:0;background:transparent}
.rmhc-system-preview img{display:block;width:100%;height:auto}
.rmhc-system-preview figcaption{margin-top:12px;color:#4e5664;font-size:12px}
@media(max-width:760px){.rmhc-system-section{grid-template-columns:minmax(0,1fr);gap:30px;margin-top:56px;padding:24px;scroll-margin-top:24px}}
@media(max-width:520px){
  .home-page .nav{position:relative;flex-direction:column;align-items:stretch;padding:18px 5vw 14px}
  .home-page .nav nav{justify-content:space-between;gap:12px;font-size:13px}
  .home-page .nav nav a{display:inline-flex;align-items:center;min-height:44px}
  .home-page .hero{padding:64px 5vw 78px}
  .home-page .hero h1{font-size:clamp(46px,11.7vw,62px)}
  .home-page .hero-description{font-size:17px}
  .home-page .work,.home-page .contact{padding-left:5vw;padding-right:5vw}
  .home-page .about{margin-left:5vw;margin-right:5vw}
  .home-page .contact h2{font-size:clamp(42px,10vw,62px)}
  .home-page .contact-methods a{overflow-wrap:anywhere}
  .home-page #work,.home-page #rmhc-design-system,.home-page #about,.home-page #contact{scroll-margin-top:24px}
}
@media(prefers-reduced-motion:no-preference){
  .home-page .hero-actions a,.home-page .contact-methods a,.about-resume{transition:background-color .2s ease,color .2s ease,border-color .2s ease}
  .home-page .project-cover img{transition:transform .35s ease}
  .home-page .project-entry>a:hover .project-cover img{transform:scale(1.025)}
}