@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,400;1,500&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap');

.sapphire-case-page{background:#071238}
.sapphire-case-page .site-header{height:126px;padding-top:30px;padding-bottom:20px}
.sapphire-case-page .site-header .logo{width:132px;min-width:0}
.shp-case{
  --shp-sapphire:#0a2472;--shp-deep:#071238;--shp-ink:#16161a;--shp-ivory:#f4f1ea;--shp-greige:#c9bba8;--shp-brass:#c6a264;--shp-marble:#dde0e2;
  --shp-pad:clamp(24px,5.5vw,100px);
  background:var(--shp-deep);color:var(--shp-ivory);overflow:clip;
  font-family:Inter,Helvetica Neue,system-ui,sans-serif;font-size:clamp(16px,1.3vw,21px);line-height:1.55;
}
.shp-case *{box-sizing:border-box}
.shp-case h1,.shp-case h2,.shp-case h3,.shp-case p,.shp-case figure{margin:0}
.shp-case h2{font-size:clamp(42px,5.5vw,90px);font-weight:700;line-height:1.05;letter-spacing:-.055em}
.shp-case h3{font-weight:600;letter-spacing:-.025em}
.shp-case img{display:block;max-width:100%}
.shp-case svg{display:block}
.shp-case a{color:inherit}
.shp-case section[id]{scroll-margin-top:84px}
.shp-case section:focus{outline:none}
.shp-pad{padding-left:var(--shp-pad);padding-right:var(--shp-pad)}
.shp-section-label{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:28px!important}
.shp-section-head{display:flex;justify-content:space-between;gap:24px;font-size:14px;padding-bottom:48px}
.shp-section-head>span{opacity:.65;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.shp-reading-progress{position:fixed;top:0;left:0;width:100%;height:3px;background:var(--shp-brass);transform-origin:left;z-index:200;pointer-events:none}
.shp-hero{padding:0 var(--shp-pad) 78px}
.shp-hero-top{display:flex;justify-content:space-between;font-size:13px;align-items:center;margin-bottom:20px;color:#c4c0b4}
.shp-back:hover{text-decoration:underline;text-underline-offset:5px}
.shp-motion-toggle{padding:6px 0;display:flex;align-items:center;gap:12px;min-height:40px;font-size:13px;color:#c4c0b4;background:none;border:0;font:inherit;cursor:pointer}
.shp-motion-toggle span{font-size:11px;width:20px}
.shp-case .shp-hero h1{font-size:clamp(64px,12vw,210px);line-height:.9;font-weight:700;letter-spacing:-.075em;position:relative;margin-left:-.04em;z-index:2;white-space:nowrap}
.shp-hero-homes{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:clamp(12px,1.1vw,16px);letter-spacing:.52em;text-transform:uppercase;color:var(--shp-brass);margin:-8px 0 42px!important}
.shp-hero-grid{display:grid;grid-template-columns:1fr 2.3fr;gap:5vw;align-items:stretch}
.shp-hero-info{display:flex;align-items:flex-start;flex-direction:column;padding-top:8px}
.shp-hero-statement{font-size:clamp(21px,2.25vw,37px);line-height:1.25;letter-spacing:-.025em;max-width:13em}
.shp-project-meta{font-size:13px;display:grid;grid-template-columns:1fr 1.7fr;gap:20px;width:100%;margin:42px 0}
.shp-project-meta dt{color:#9b9688;margin-bottom:10px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.shp-project-meta dd{margin:0;line-height:1.7}
.shp-outline-link{border:1px solid #6a6490;border-radius:2px;display:inline-flex;align-items:center;gap:26px;justify-content:space-between;padding:13px 20px;font-size:13px;line-height:1.4;transition:background .2s,color .2s;min-height:48px;border-color:#8a8168}
.shp-outline-link svg{width:21px;height:21px;flex:none}
.shp-outline-link:hover{background:var(--shp-ivory);color:var(--shp-deep)}
.shp-hero-info>.shp-outline-link{margin-top:auto}
.shp-hero-art{position:relative;isolation:isolate;background:#05070d;aspect-ratio:1.48;overflow:hidden}
.shp-hero-photo{width:100%;height:100%;object-fit:cover;object-position:center 60%;transform:translateY(var(--hero-drift,0px)) scale(1.08);will-change:transform;animation:shp-ken 16s cubic-bezier(.22,1,.36,1) alternate infinite}
.shp-hero-art figcaption{position:absolute;bottom:0;left:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px 25px;background:var(--shp-sapphire);color:#fff;font-size:14px}
.shp-hero-art figcaption a{width:40px;height:35px;display:grid;place-items:center}
.shp-hero-art figcaption svg{width:23px;height:23px}
@keyframes shp-ken{from{transform:translateY(var(--hero-drift,0px)) scale(1.06)}to{transform:translateY(calc(var(--hero-drift,0px) - 2%)) scale(1.14)}}
.shp-chapters{position:fixed;bottom:22px;left:50%;transform:translate(-50%,18px);opacity:0;visibility:hidden;pointer-events:none;display:flex;gap:3px;padding:6px;border:1px solid #ffffff30;border-radius:2px;background:#0a1638;color:#fff;z-index:40;box-shadow:0 4px 22px #0006;transition:opacity .25s,transform .25s,visibility .25s;white-space:nowrap}
.shp-chapters.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto}
.shp-chapters a{font-size:12px;min-height:39px;padding:10px 17px;border-radius:2px}
.shp-chapters a[aria-current]{background:var(--shp-ivory);color:var(--shp-deep)}
.shp-chapters a:hover{background:#1a2a58;color:#fff}
.shp-brief{background:var(--shp-ivory);color:var(--shp-ink);padding-top:90px;padding-bottom:110px}
.shp-brief h2{max-width:16em;font-size:clamp(42px,5.2vw,85px);padding-left:18%;line-height:1.1}
.shp-brief-bottom{display:grid;grid-template-columns:1fr 1fr;gap:8vw;margin-top:60px}
.shp-short-note{font-size:clamp(21px,2vw,32px);line-height:1.25;letter-spacing:-.03em;font-weight:600}
.shp-brief-bottom>div p+p{margin-top:24px}
.shp-brief-bottom>div{max-width:40em}
.shp-identity{padding-top:70px;background:var(--shp-ivory);color:var(--shp-ink)}
.shp-brand-intro{display:grid;grid-template-columns:1.4fr 1fr;align-items:end;gap:8vw;padding-bottom:65px}
.shp-brand-intro h2{font-size:clamp(40px,4.7vw,80px)}
.shp-brand-intro>p{font-size:16px;max-width:29em;color:#5c574c}
.shp-mark-board{background:var(--shp-ivory);position:relative;padding:100px var(--shp-pad) 24px;color:var(--shp-sapphire);transition:background .5s,color .5s}
.shp-mark-large{width:48px;margin:0 auto 28px;color:var(--shp-brass)}
.shp-star{width:100%;height:auto}
.shp-lockup{width:min(720px,86%);margin:0 auto 70px;height:auto}
.shp-case img.shp-lockup-ivory{display:none}
.shp-mark-board[data-tone=sapphire]{background:var(--shp-sapphire);color:var(--shp-ivory)}
.shp-mark-board[data-tone=ink]{background:var(--shp-ink);color:var(--shp-ivory)}
.shp-mark-board[data-tone=greige]{background:var(--shp-greige);color:var(--shp-ink)}
.shp-mark-board[data-tone=sapphire] img.shp-lockup-ink,
.shp-mark-board[data-tone=ink] img.shp-lockup-ink{display:none}
.shp-mark-board[data-tone=sapphire] img.shp-lockup-ivory,
.shp-mark-board[data-tone=ink] img.shp-lockup-ivory{display:block}
.shp-mark-board-foot{display:flex;justify-content:space-between;align-items:center;font-size:12px;gap:20px}
.shp-brand-tone-controls{display:flex;align-items:center;gap:8px}
.shp-brand-tone-controls button{width:40px;height:40px;padding:7px;position:relative;border-radius:2px;border:1px solid transparent;background:none;cursor:pointer}
.shp-brand-tone-controls button::after{content:'';position:absolute;inset:7px;border-radius:1px;background:var(--shp-ivory);box-shadow:inset 0 0 0 1px #0002}
.shp-brand-tone-controls button[data-shp-tone=sapphire]::after{background:var(--shp-sapphire)}
.shp-brand-tone-controls button[data-shp-tone=ink]::after{background:var(--shp-ink)}
.shp-brand-tone-controls button[data-shp-tone=greige]::after{background:var(--shp-greige)}
.shp-brand-tone-controls button[aria-pressed=true]{border-color:currentColor}
.shp-type-spread{display:grid;grid-template-columns:1.25fr 1fr;min-height:620px}
.shp-type-poster{position:relative;overflow:hidden;background:var(--shp-ivory);padding:50px var(--shp-pad);display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;color:var(--shp-ink);border-top:1px solid #d9d0c2}
.shp-type-poster .shp-star{width:36px;color:var(--shp-brass)}
.shp-brand-words{font-weight:400;line-height:.95;letter-spacing:-.02em;font-size:clamp(40px,5.4vw,92px);padding:70px 0 80px}
.shp-specimen{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:400}
.shp-type-caption{font-size:12px;color:#5c574c;font-family:'JetBrains Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}
.shp-type-notes{background:var(--shp-sapphire);color:#fff;padding:65px var(--shp-pad);display:flex;flex-direction:column;justify-content:center}
.shp-display-sample{font-size:clamp(28px,3.6vw,58px);line-height:1.08;letter-spacing:-.04em;font-weight:700;margin-bottom:36px!important}
.shp-type-notes>p:not(.shp-display-sample){font-size:16px;max-width:28em}
.shp-type-pair{display:flex;gap:20px;font-size:12px;border-top:1px solid #ffffff55;padding-top:20px;margin-top:34px;font-family:'JetBrains Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}
.shp-swatch-row{display:flex;margin:40px 0 24px;height:54px;gap:10px;align-items:center}
.shp-swatch-row i{display:block;background:var(--swatch);height:50px;width:50px;border-radius:2px;box-shadow:0 0 0 1px #fff8}
.shp-type-notes .shp-small{font-size:13px!important;color:#e6eafa}
.shp-book{background:var(--shp-deep);padding-top:20px;padding-bottom:120px;color:var(--shp-ivory)}
.shp-application-intro{display:grid;grid-template-columns:1.4fr 1fr;gap:0 8vw;align-items:end;padding-bottom:60px;padding-top:70px}
.shp-application-intro>.shp-section-label{grid-column:1/-1}
.shp-application-intro>p:last-child{font-size:16px;max-width:29em;color:#c4c0b4}
.shp-book-head{padding-top:70px;padding-bottom:36px;max-width:48em}
.shp-book-head>p:first-child{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--shp-brass);margin-bottom:18px!important}
.shp-book-head h3{font-size:clamp(32px,4vw,64px);margin-bottom:16px!important}
.shp-book-head>p:last-child{font-size:15px;color:#c4c0b4;max-width:38em}
.shp-plate{margin:0 0 8px}
.shp-plate img{width:100%;height:auto;background:#05070d}
.shp-plate figcaption{display:flex;gap:16px;align-items:baseline;padding:12px var(--shp-pad) 28px;font-size:12px;color:#c4c0b4}
.shp-plate figcaption span{font-family:'JetBrains Mono',ui-monospace,monospace;letter-spacing:.12em;color:var(--shp-brass)}
.shp-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.shp-pair .shp-plate figcaption{padding-left:var(--shp-pad);padding-right:var(--shp-pad)}
.shp-pair .shp-plate:first-child figcaption{padding-right:20px}
.shp-pair .shp-plate:last-child figcaption{padding-left:20px}
.shp-circle-section{height:260vh;min-height:1400px;background:var(--shp-deep);color:var(--shp-ivory);position:relative}
.shp-circle-sticky{position:sticky;top:75px;height:calc(100svh - 75px);min-height:620px;display:grid;grid-template-columns:.86fr 1.25fr;align-items:center;gap:5vw;padding-top:30px;padding-bottom:40px}
.shp-circle-story h2{font-size:clamp(48px,6vw,100px);margin-bottom:22px}
.shp-circle-intro{max-width:26em;font-size:15px;color:#c4c0b4}
.shp-circle-steps{list-style:none;padding:0;margin:30px 0 0;display:flex;flex-direction:column;gap:13px}
.shp-circle-steps li{border-left:3px solid #2a3358;padding-left:18px;color:#8e8878;transition:color .2s,border-color .2s}
.shp-circle-steps li.is-active{color:var(--shp-ivory);border-color:var(--shp-brass)}
.shp-circle-steps span{font-size:20px;font-weight:600;letter-spacing:-.025em}
.shp-circle-steps p{font-size:13px;padding-top:2px}
.shp-scroll-instruction{display:flex;align-items:center;gap:18px;color:#8e8878;font-size:12px;margin-top:32px!important}
.shp-scroll-instruction svg{width:17px;height:17px}
.shp-film-stage{position:relative;aspect-ratio:16/9;width:100%;background:#05070d;overflow:hidden}
.shp-film-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease}
.shp-film-stage img.is-active{opacity:1}
.shp-delivery{display:grid;grid-template-columns:1fr 1fr;gap:8vw;background:var(--shp-ivory);color:var(--shp-ink);padding-top:110px;padding-bottom:100px}
.shp-delivery h2{font-size:clamp(42px,4.6vw,78px)}
.shp-delivery-list>div{padding:25px 0;border-top:1px solid #d9c9a1}
.shp-delivery-list h3{font-size:24px;margin-bottom:12px}
.shp-delivery-list p{font-size:15px;color:#5c574c;max-width:30em}
.shp-credits{border-top:1px solid #d9c9a1;margin-top:15px;padding-top:22px;font-size:14px}
.shp-credits summary{display:flex;justify-content:space-between;list-style:none;cursor:pointer;padding:4px 0 10px}
.shp-credits summary::-webkit-details-marker{display:none}
.shp-credits summary span{font-size:22px;line-height:1}
.shp-credits[open] summary span{transform:rotate(45deg)}
.shp-credits p{padding-top:20px;line-height:1.8;font-size:13px}
.shp-next{background:var(--shp-sapphire);padding-top:70px;padding-bottom:40px;color:#fff}
.shp-next>p{font-size:14px;margin-bottom:32px}
.shp-next>a{font-size:clamp(38px,6.5vw,110px);line-height:1.08;letter-spacing:-.06em;display:flex;justify-content:space-between;align-items:center;gap:30px;font-weight:700}
.shp-next>a svg{width:.85em;height:.85em;flex:none;transition:transform .25s}
.shp-next>a:hover svg{transform:translate(6px,-6px)}
.shp-next>div{display:flex;justify-content:space-between;border-top:1px solid #ffffff55;padding-top:25px;margin-top:65px;font-size:13px}
.shp-next>div a{display:flex;align-items:center;gap:20px}
.shp-next>div svg{width:18px;height:18px}
.sapphire-case-page .site-footer{padding-top:55px}
.shp-motion-off .shp-circle-section{height:auto;min-height:0}
.shp-motion-off .shp-circle-sticky{position:relative;top:auto;height:auto;min-height:620px}
.shp-motion-off .shp-scroll-instruction{visibility:hidden}
.shp-motion-off .shp-hero-photo{animation:none;will-change:auto}
@media(min-width:1600px){.shp-circle-sticky{max-width:1800px;margin:auto}.shp-hero-grid{grid-template-columns:1fr 2.5fr}.shp-type-spread{min-height:750px}}
@media(max-width:1050px){
  .shp-hero-grid{grid-template-columns:1fr 1.7fr;gap:30px}
  .shp-project-meta{grid-template-columns:1fr;gap:16px;margin:24px 0}
  .shp-project-meta>div:first-child{display:none}
  .shp-type-spread{min-height:570px}
  .shp-circle-sticky{gap:4vw;grid-template-columns:1fr 1.2fr}
}
@media(max-width:760px){
  .sapphire-case-page .site-header{height:104px;padding-top:25px}
  .sapphire-case-page .site-header .logo{width:116px}
  .shp-case{--shp-pad:24px;font-size:16px}
  .shp-hero{padding-bottom:45px}
  .shp-case .shp-hero h1{font-size:18vw;margin-bottom:6px;white-space:normal}
  .shp-hero-homes{margin-bottom:28px!important}
  .shp-hero-grid{display:flex;flex-direction:column;gap:28px}
  .shp-hero-info{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;padding:0}
  .shp-hero-statement{font-size:21px}
  .shp-project-meta{display:none}
  .shp-hero-info>.shp-outline-link{margin:0;font-size:11px;gap:10px;padding:12px 14px;max-width:190px}
  .shp-hero-art{aspect-ratio:1.18}
  .shp-brief{padding-top:60px;padding-bottom:65px}
  .shp-brief h2{font-size:clamp(36px,7.5vw,58px);padding-left:0}
  .shp-brief-bottom{grid-template-columns:1fr;gap:28px;margin-top:35px}
  .shp-brand-intro{grid-template-columns:1fr;gap:25px;padding-bottom:45px}
  .shp-type-spread{grid-template-columns:1fr}
  .shp-type-poster{min-height:440px}
  .shp-brand-words{font-size:12vw;padding:40px 0 60px}
  .shp-application-intro,.shp-delivery{grid-template-columns:1fr;gap:24px}
  .shp-pair{grid-template-columns:1fr;gap:0}
  .shp-pair .shp-plate figcaption,.shp-pair .shp-plate:first-child figcaption,.shp-pair .shp-plate:last-child figcaption{padding-left:var(--shp-pad);padding-right:var(--shp-pad)}
  .shp-circle-section{height:auto;min-height:0}
  .shp-circle-sticky{position:relative;top:auto;height:auto;min-height:0;display:flex;flex-direction:column;padding-top:65px;padding-bottom:65px;gap:25px}
  .shp-scroll-instruction{display:none}
  .shp-chapters{bottom:14px;padding:5px;max-width:calc(100vw - 20px)}
  .shp-next>a{font-size:43px}
  .shp-delivery{padding-top:65px;padding-bottom:65px}
}
@media(max-width:600px){
  .shp-hero-info{grid-template-columns:1fr;gap:20px}
  .shp-hero-info>.shp-outline-link{max-width:none;justify-self:start}
}
@media(prefers-reduced-motion:reduce){
  .shp-circle-section{height:auto;min-height:0}
  .shp-circle-sticky{position:relative;top:auto;height:auto;min-height:0;padding-top:80px;padding-bottom:80px}
  .shp-hero-photo{animation:none;transform:none!important;will-change:auto}
  .shp-scroll-instruction{display:none}
  .shp-film-stage img{transition:none}
}