@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300&family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300&display=swap');
:root{--red:#e8193f;--ink:#292929;--rule:#ececec}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--ink);font-family:Roboto,Arial,sans-serif;font-weight:300}.header{height:292px;padding:30px max(7.5vw,34px) 0;border-bottom:1px solid var(--rule);position:sticky;top:0;background:rgba(255,255,255,.98);z-index:10}.identity{display:block;width:min(1080px,78vw);color:inherit;text-decoration:none}.identity span{display:block;font-family:"Roboto Condensed",Arial,sans-serif;font-size:54px;line-height:1;font-weight:300;letter-spacing:.005em}.identity small{display:block;margin-top:13px;font-family:"Roboto Condensed",Arial,sans-serif;font-size:17px;line-height:1.55;font-weight:700;letter-spacing:.255em;text-transform:uppercase;max-width:1040px}.header nav{position:absolute;right:12.5vw;bottom:55px;display:flex;gap:54px}.header nav a{font-family:"Roboto Condensed",Arial,sans-serif;font-size:18px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;text-decoration:none;color:inherit}.header nav a.active{color:var(--red)}.search-toggle{position:absolute;right:7.6vw;top:43px;width:28px;height:28px;border:0;background:transparent;cursor:pointer;padding:0}.search-toggle span{position:absolute;width:11px;height:11px;border:3px solid #222;border-radius:50%;left:6px;top:5px}.search-toggle span:after{content:"";position:absolute;width:7px;height:3px;background:#222;transform:rotate(-45deg);right:-6px;bottom:-3px}.search-panel{position:absolute;top:0;left:0;width:100%;height:100%;padding:74px 10vw;background:#fff;z-index:2}.search-panel[hidden]{display:none}.search-panel label{font-family:"Roboto Condensed",sans-serif;font-size:14px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}.search-panel input{display:block;width:100%;border:0;border-bottom:1px solid #222;margin-top:26px;padding:10px 0;font:300 36px Roboto,sans-serif;outline:0}.work-grid{width:min(1180px,70vw);margin:112px auto 130px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}.project-card{position:relative;aspect-ratio:1/1;overflow:hidden;background:#fff;color:#202020;text-decoration:none;animation:reveal .75s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--order)*70ms)}.project-card img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .28s ease,transform .55s cubic-bezier(.2,.7,.2,1);backface-visibility:hidden}.project-card>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:9%;font-family:Roboto,Arial,sans-serif;font-size:clamp(27px,3.2vw,58px);line-height:1.05;font-weight:300;opacity:0;transform:scale(.82);transition:opacity .22s ease,transform .42s cubic-bezier(.15,.85,.2,1);z-index:1}.project-card>span small{font:inherit}.project-card:hover img,.project-card:focus-visible img{opacity:.08;transform:scale(1.035)}.project-card:hover>span,.project-card:focus-visible>span{opacity:1;transform:scale(1)}.project-card:focus-visible{outline:3px solid var(--red);outline-offset:3px;z-index:2}.project-card[hidden]{display:none}.empty-results{text-align:center;margin:160px auto;font-size:18px}.about-page{width:min(1080px,76vw);min-height:630px;margin:95px auto 140px;display:grid;grid-template-columns:1fr 2fr;gap:80px}.about-page h1{font:300 42px "Roboto Condensed",sans-serif;margin:0}.about-page p{font-size:22px;line-height:1.75;margin:0}.case{width:min(1160px,82vw);margin:92px auto 150px}.case-intro{min-height:420px;padding:10px 0 60px}.case-intro h1{font:300 40px "Roboto Condensed",sans-serif;margin:0 0 36px}.case-intro .lead{font-size:27px;font-style:italic;line-height:1.5;margin:0 0 30px}.case-intro .tech{font-size:13px;line-height:1.7}.case-intro .tech b,.case-section h2{font-weight:700}.hero-image{width:100%;max-height:790px;object-fit:contain;margin:25px 0 85px}.case-section{padding:65px 0;border-top:1px solid var(--rule)}.case-section h2{font-size:14px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 24px}.case-section p{font-size:16px;line-height:1.85;max-width:920px}.case-gallery{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:48px}.case-gallery img{width:100%;height:520px;object-fit:contain;background:#fafafa}.case-gallery .wide{grid-column:span 2;width:100%;height:auto;max-height:900px}.case-nav{border-top:1px solid var(--rule);display:flex;justify-content:space-between;padding-top:30px;margin-top:80px}.case-nav a{color:#777;text-decoration:none;font-size:13px}.case-nav a:hover{color:var(--red)}footer{margin:0 auto 70px;width:min(1180px,70vw);background:#fafafa;text-align:center;padding:38px;font-size:12px}.to-top{position:fixed;bottom:0;right:3vw;background:#222;color:#fff;font:500 10px Roboto,sans-serif;text-decoration:none;width:48px;height:32px;clip-path:polygon(50% 0,100% 100%,0 100%);display:flex;align-items:end;justify-content:center;padding-bottom:4px;z-index:20}@keyframes reveal{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.project-card,.project-card img,.project-card>span{animation:none;transition:none}}
@media(max-width:900px){.header{height:230px;padding:25px 24px 0}.identity{width:88%}.identity span{font-size:40px}.identity small{font-size:12px;letter-spacing:.17em;line-height:1.5}.header nav{right:25px;bottom:35px;gap:30px}.header nav a{font-size:15px}.search-toggle{right:21px;top:29px}.work-grid{width:86vw;margin:62px auto 85px}.project-card>span{font-size:clamp(20px,4.3vw,38px)}footer{width:86vw}.case{width:88vw;margin-top:60px}.case-intro{min-height:0}.case-intro h1{font-size:34px}.case-intro .lead{font-size:22px}.case-gallery{grid-template-columns:1fr}.case-gallery .wide{grid-column:auto}.case-gallery img{height:auto}.hero-image{margin-bottom:40px}.about-page{width:86vw;grid-template-columns:1fr;gap:35px}}
@media(max-width:580px){.header{height:215px}.identity small{max-width:88%}.work-grid{width:calc(100% - 40px);grid-template-columns:1fr;margin:24px auto 0}.project-card>span{font-size:9vw}.project-card:active img{opacity:.08}.project-card:active>span{opacity:1;transform:scale(1)}footer{width:calc(100% - 40px);margin-top:55px}.search-panel{padding:65px 25px}.search-panel input{font-size:27px}}

/* Measurements recovered from the original desktop recording. */
@media(min-width:901px){
  .header{height:150px;padding:10px 8.4vw 0}
  .identity span{font-size:34px}
  .identity small{margin-top:8px;font-size:11px;line-height:1.55;max-width:650px}
  .header nav{right:14vw;bottom:25px;gap:34px}
  .header nav a{font-size:12px}
  .search-toggle{right:8.4vw;top:25px;transform:scale(.7);transform-origin:top right}
  .work-grid{width:min(1272px,75vw);gap:18px;margin-top:48px}
  .case{margin-top:46px}
  .case-intro{min-height:0;padding:10px 0 0}
  .case-intro h1{font-size:36px;margin-bottom:32px}
  .case-intro .lead{font-size:26px;margin-bottom:26px}
  .hero-image{margin:25px 0 70px}
  .case-section{padding:48px 0}
  .recovered-copy .archive-copy{padding:36px 0 10px}
  .archive-heading,.recovered-copy h2,.video-section h2{margin-top:40px;margin-bottom:20px}
  .recovered-copy>p,.archive-copy p{margin-bottom:24px}
  .case-gallery{gap:20px;margin-top:30px}
  .about-page{margin-top:48px}
  .project-card{animation:none}
  .project-card img{transition:opacity .42s ease;transform:none}
  .project-card>span{padding:7%;font-size:clamp(24px,1.8vw,32px);line-height:1.22;transform:scale(2.7);transition:opacity .25s ease,transform .82s cubic-bezier(.12,.72,.18,1)}
  .project-card:hover img,.project-card:focus-visible img{opacity:.08;transform:none}
  .project-card:hover>span,.project-card:focus-visible>span{transform:scale(1)}
  footer{width:min(1272px,75vw)}
}

.recovered-copy{max-width:900px;margin-inline:auto}.recovered-copy>p,.archive-copy p{font-size:16px;line-height:1.85;margin:0 0 30px}.recovered-copy .archive-copy{padding:48px 0 18px;border:0}.archive-heading,.recovered-copy h2,.video-section h2{font:500 14px/1.4 Roboto,sans-serif;letter-spacing:.055em;text-transform:uppercase;margin:54px 0 24px}.recovered-copy a{color:#555;text-underline-offset:3px}.recovered-gallery{align-items:start}.recovered-gallery img{height:auto;min-height:240px;object-fit:contain;padding:14px;background:#fafafa}.recovered-gallery .wide{grid-column:span 2;width:100%;max-height:none}.case-video{display:block;width:min(790px,100%);margin:38px auto}.video-section>p{font-size:16px;line-height:1.85;max-width:900px}.video-section article{margin:58px 0 80px}.video-section h3{font-size:16px;font-weight:500;margin-bottom:15px}.feature-quote{font-size:24px!important;font-style:italic;line-height:1.45!important}.video-section iframe{display:block;width:min(790px,100%);aspect-ratio:16/9;height:auto;border:0;margin-top:28px}
@media(max-width:900px){.recovered-gallery .wide{grid-column:auto}.recovered-gallery img{min-height:0}.feature-quote{font-size:20px!important}}
.project-card>span{font-weight:400}
.project-card[href="/portfolio/proever/"] img,.project-card[href="/portfolio/proever/"]:hover img,.project-card[href="/portfolio/proever/"]:focus-visible img{transform:translateX(-8%) scale(1.95);transform-origin:50% 50%}
@font-face{font-family:Oswald;font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/oswald/v57/TK3_WkUHHAIjg75cFRf3bXL8LICs169vgUE.ttf) format("truetype")}
@font-face{font-family:Oswald;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/oswald/v57/TK3_WkUHHAIjg75cFRf3bXL8LICs1y9ogUE.ttf) format("truetype")}
.identity span{font-family:"Roboto Condensed",Arial,sans-serif;font-weight:300}.identity small,.header nav a{font-family:"Roboto Condensed",Arial,sans-serif;font-weight:700}
body{font-family:Roboto,Arial,sans-serif;font-weight:300}.case-intro h1,.about-page h1{font-family:"Roboto Condensed",Arial,sans-serif;font-weight:300}.archive-heading,.recovered-copy h2,.video-section h2{font-family:"Roboto Condensed",Arial,sans-serif;font-weight:700}.case-intro .tech b,.case-section h2{font-weight:700}.walkthrough-video{width:100%;max-width:none;margin:38px 0 54px;background:#111}
@font-face{font-family:"Roboto Condensed";font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/robotocondensed/v31/ieVo2ZhZI2eCN5jzbjEETS9weq8-_d6T_POl0fRJeyXsovBJ.ttf) format("truetype")}
@font-face{font-family:"Roboto Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/robotocondensed/v31/ieVo2ZhZI2eCN5jzbjEETS9weq8-_d6T_POl0fRJeyVVpfBJ.ttf) format("truetype")}
@font-face{font-family:"Roboto Condensed";font-style:italic;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/robotocondensed/v31/ieVW2ZhZI2eCN5jzbjEETS9weq8-19ehAyvMum7nfDB64UYK5Xk.ttf) format("truetype")}
.case,.about-page{font-family:"Roboto Condensed",Arial,sans-serif}.case-intro h1,.about-page h1{font-family:"Roboto Condensed",Arial,sans-serif}.archive-heading,.recovered-copy h2,.video-section h2{font-family:"Roboto Condensed",Arial,sans-serif;font-weight:700}.hero-image{margin-bottom:28px}.case-section.recovered-copy{padding-top:10px}.recovered-copy .archive-copy{padding:28px 0 4px}.recovered-copy>p,.archive-copy p{margin-bottom:22px}.recovered-copy .list-intro{margin-bottom:8px}.recovered-copy .numbered-item{margin:0 0 8px}.inline-outcome{margin-top:46px!important}.inline-outcome strong{font-weight:700}.recovered-quote{margin:40px 0 10px 42px!important;font-size:18px!important;font-style:italic;position:relative}.recovered-quote:before{content:"“";position:absolute;left:-42px;top:-14px;color:#d8d8d8;font-size:64px;font-weight:700;line-height:1}.quote-attribution{margin:0 0 34px 42px!important;font-style:italic}.walkthrough-video{margin-top:24px}
.project-card[href="/portfolio/flow/"] img,.project-card[href="/portfolio/flow/"]:hover img,.project-card[href="/portfolio/flow/"]:focus-visible img{object-fit:fill;object-position:50% 50%;transform:none}
/* Responsive fidelity overrides. */
.header{background:rgba(255,255,255,.72);-webkit-backdrop-filter:none;backdrop-filter:none}
@media(max-width:900px){
  .header{height:170px;padding:18px max(5vw,22px) 0}
  .identity{width:calc(100% - 54px)}
  .identity span{font-size:clamp(31px,4.5vw,36px)}
  .identity small{margin-top:8px;max-width:min(720px,92%);font-size:clamp(9px,1.35vw,11px);line-height:1.5;letter-spacing:.2em}
  .header nav{right:max(5vw,22px);bottom:22px;gap:30px}
  .header nav a{font-size:12px}
  .search-toggle{right:max(5vw,22px);top:21px;transform:scale(.75);transform-origin:top right}
  .work-grid{margin-top:42px}
  .project-card>span{padding:8%;font-size:clamp(21px,3.2vw,30px);line-height:1.18}
}
@media(max-width:580px){
  .header{height:178px;padding-top:16px}
  .identity span{font-size:clamp(29px,8vw,33px)}
  .identity small{max-width:calc(100% - 12px);font-size:clamp(8px,2.5vw,10px);letter-spacing:.16em}
  .header nav{bottom:18px;gap:25px}
  .header nav a{font-size:11px}
  .work-grid{margin-top:24px}
  .project-card>span{font-size:clamp(22px,6vw,32px);line-height:1.18}
}
.project-card[href="/portfolio/firestar/"] img,.project-card[href="/portfolio/firestar/"]:hover img,.project-card[href="/portfolio/firestar/"]:focus-visible img{object-fit:fill;object-position:50% 50%;transform:none}
/* Match the archive's compact desktop grid and continuous hover labels. */
.project-card>span{font-family:"Roboto Condensed",Arial,sans-serif;font-weight:400}
@media(min-width:901px){
  .header{height:116px;padding-top:7px}
  .identity span{font-size:32px}
  .identity small{margin-top:7px;font-size:10px;max-width:680px}
  .header nav{bottom:19px}
  .search-toggle{top:20px}
  .work-grid{width:min(1180px,70vw);gap:14px;margin-top:42px}
  .project-card>span{padding:7%;font-size:clamp(30px,2.35vw,36px);line-height:1.2}
  footer{width:min(1180px,70vw)}
}
@media(max-width:900px){.project-card>span{font-size:clamp(26px,3.5vw,32px)}}
@media(max-width:580px){.project-card>span{font-size:clamp(20px,5.4vw,29px)}}
.inline-problem strong{font-weight:700}.case:has(.inline-problem) .hero-image{width:min(900px,100%);display:block;margin:24px auto 44px}.case:has(.inline-problem) .recovered-gallery{display:block}.case:has(.inline-problem) .recovered-gallery img{display:block;width:min(560px,100%);min-height:0;margin:26px auto 48px;padding:0;background:none}.svii-goal-label{margin:14px 0 16px!important}.svii-goal{max-width:790px!important;margin:0 auto 48px!important;padding-left:60px;font-size:18px!important;line-height:1.55!important;font-style:italic;font-weight:700;position:relative}.svii-goal:before{content:"“";position:absolute;left:0;top:-24px;color:#d8d8d8;font-size:76px;line-height:1;font-weight:700}.svii-egg{width:300px;max-width:100%;margin:42px auto 48px;text-align:center}.svii-egg img{display:block;width:300px;max-width:100%;height:auto}.svii-egg figcaption{margin-top:12px;color:#999;font-size:15px;font-style:italic}.svii-event{margin:0 0 22px!important}.svii-event em{display:inline-block;min-width:138px;font-style:italic}.svii-event a{color:#e8193f;font-weight:400;text-decoration:underline;text-underline-offset:2px}.svii-divider{max-width:520px!important;margin:46px auto 22px!important;height:auto;background:none;color:#292929;text-align:center;white-space:nowrap;overflow:hidden;letter-spacing:.03em}.svii-letter-date{color:#292929!important;font-family:"Roboto Condensed",Arial,sans-serif!important;font-size:16px!important;font-style:normal!important;font-weight:700!important;text-transform:uppercase}.svii-subject{font-family:"Roboto Condensed",Arial,sans-serif!important;font-size:24px!important;font-style:normal!important;font-weight:700!important;margin-top:34px!important}.svii-salutation,.svii-letter-body,.svii-signature,.svii-role{color:#292929!important;font-family:"Roboto Condensed",Arial,sans-serif!important;font-size:16px!important;font-style:normal!important;font-weight:700!important;line-height:1.85!important}.svii-salutation{margin-top:34px!important}.svii-signature{margin-bottom:0!important}.svii-role{margin-top:0!important;margin-bottom:0!important}.svii-motto{color:#292929!important;font-family:"Roboto Condensed",Arial,sans-serif!important;font-size:16px!important;font-style:italic!important;font-weight:400!important;margin-top:0!important}.svii-letter-graphic{display:block;width:min(512px,100%);height:auto;margin:36px 0 44px}.svii-team-graphic{display:block;width:min(242px,100%);height:auto;margin:32px 0 10px}.case:has(.svii-goal) .case-section.recovered-copy{max-width:790px}.case:has(.svii-goal) .hero-image{width:min(790px,100%)}.case:has(.svii-goal) .recovered-gallery img{width:min(790px,100%);max-width:790px}

/* The archive uses a rule below the sticky masthead, not between case-study content blocks. */
.case-section,.case-nav{border-top:0}
/* Match the measured SVII letter rhythm in the archived recording. */
.svii-divider {
  max-width: 330px !important;
  margin: 38px auto 18px !important;
  font-size: 15px !important;
}

.svii-letter-date {
  margin: 0 !important;
}

.svii-subject {
  margin: 34px 0 24px !important;
}

.svii-letter-body {
  margin-bottom: 22px !important;
}

.svii-salutation {
  margin: 34px 0 26px !important;
}

.svii-signature {
  margin: 34px 0 0 !important;
}

.svii-role,
.svii-motto {
  margin: 0 !important;
}

.svii-letter-graphic {
  width: min(470px, calc(100% + 10px));
  margin: 38px 0 44px -10px;
}

.svii-team-graphic {
  width: min(174px, calc(100% + 18px));
  margin: 32px 0 10px -18px;
  filter: grayscale(1) brightness(.65) contrast(6);
}

/* Match the archive's letter hierarchy and compact, medium-weight rhythm. */
.svii-letter-body {
  font-size: 18px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
  margin-bottom: 24px !important;
}

.svii-letter-body em {
  font-style: normal !important;
  font-weight: inherit !important;
}

.svii-letter-date,
.svii-salutation {
  font-weight: 500 !important;
}

.svii-letter-date {
  font-size: 17px !important;
  margin: 0 0 36px !important;
}

.svii-subject {
  font-size: 29px !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
  margin: 0 0 42px !important;
}

.svii-salutation {
  font-size: 18px !important;
  line-height: 1.7 !important;
  margin: 0 0 30px !important;
}

.svii-signature,
.svii-role,
.svii-motto {
  color: #292929 !important;
  font-family: "Roboto Condensed", Arial, sans-serif !important;
  font-size: 18px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
}

.svii-signature {
  margin: 30px 0 0 !important;
}

.svii-role,
.svii-motto {
  margin: 0 !important;
}

/* The SVII archive places its opening screenshot shortly after the tech line. */
.case:has(.svii-goal) .case-intro {
  min-height: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.case:has(.svii-goal) .hero-image {
  margin-top: 54px !important;
}

.pedler-video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin: 24px 0 54px;
  background: #111;
}

.pedler-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.pedler-palette {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  min-height: 230px;
  margin: 24px 0 54px;
}

.pedler-swatch {
  display: flex;
  align-items: flex-end;
  padding: 18px 14px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .04em;
}

.pedler-swatch-yellow { background: #fff274; }
.pedler-swatch-orange { background: #f03b0c; color: #fff; }
.pedler-swatch-charcoal { background: #4a4a4a; color: #fff; }
.pedler-swatch-black { background: #111; color: #fff; }
.pedler-swatch-white { background: #fff; border: 1px solid #ddd; }

.flow-model-link {
  color: inherit;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.flow-model-link:hover,
.flow-model-link:focus-visible {
  color: var(--red);
}

@media (max-width: 640px) {
  .pedler-palette {
    grid-template-columns: repeat(2, 1fr);
    min-height: 360px;
  }

  .pedler-swatch-white { grid-column: span 2; }
}