@font-face{font-family:OverusedGrotesk;src:url('assets/overused-grotesk/OverusedGrotesk-Light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:OverusedGrotesk;src:url('assets/overused-grotesk/OverusedGrotesk-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
:root{--blue:#1f61a9;--paper:#f9f6f1;--pink:#eeb5bc;--rule:rgba(31,97,169,.58);--navy:#111621;--muted:#7789a0}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--blue);font:300 20px/1.5 OverusedGrotesk,Arial,sans-serif}body::before{content:"";position:fixed;inset:0;background:url('assets/imgFooter.avif') center/cover;opacity:.12;z-index:-1;pointer-events:none}h1,h2,h3,p,figure,dl,dd{margin:0}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:5px}a:focus-visible,button:focus-visible,.device-scroll:focus-visible{outline:2px solid var(--blue);outline-offset:5px}.skip{position:absolute;top:-100px}.skip:focus{top:10px;left:10px;background:var(--paper);padding:12px;z-index:20}
.shell{width:min(1160px,calc(100% - 12vw));margin-inline:auto}.site-header{width:min(1310px,calc(100% - 9vw));margin:auto;min-height:98px;display:flex;align-items:flex-start;justify-content:space-between;padding-top:27px;font-size:20px;font-weight:600}.site-header nav{display:flex;gap:clamp(25px,4.2vw,65px)}.site-header nav span{cursor:default}.site-name{white-space:nowrap}
.star{display:inline-block;width:15px;height:22px;background:currentColor;-webkit-mask:url('assets/imgVector2.svg') center/contain no-repeat;mask:url('assets/imgVector2.svg') center/contain no-repeat;vertical-align:middle}.pink-star{color:var(--pink);width:15px;height:22px;margin-left:13px;vertical-align:.3em}.eyebrow,.hero-topline,.facts dt,figcaption,.principles span,.page-picker,.page-note,.footer-inner>div>span{font:600 16px/1.3 OverusedGrotesk,Arial,sans-serif;letter-spacing:.015em}
.hero{padding-top:105px}.hero-topline{display:flex;justify-content:space-between;border-top:1px solid var(--rule);padding-top:18px}.hero-topline>span:first-child{display:flex;align-items:center;gap:11px}.hero-heading{display:grid;grid-template-columns:1fr .55fr;gap:6%;align-items:end;padding:90px 0 64px}.hero h1{font:700 clamp(66px,7.8vw,110px)/.96 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:-.058em;white-space:nowrap}.hero-heading p{max-width:420px;font:700 clamp(22px,2.25vw,30px)/1.25 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:-.025em;padding-bottom:7px}.hero-visual{position:relative}.hero-visual img{width:100%;height:min(56vw,600px);min-height:420px;object-fit:cover;object-position:top;background:var(--navy)}.browser-bar{height:30px;background:#11151e;display:flex;align-items:center;gap:7px;padding:0 15px;color:#8e97a7}.browser-bar span,.device-toolbar span{width:6px;height:6px;border-radius:50%;background:#6d788a}.browser-bar b{font:300 11px OverusedGrotesk,Arial,sans-serif;margin-left:10px;letter-spacing:.12em}.hero-visual figcaption{padding-top:14px;text-align:right}
.project-overview{display:grid;grid-template-columns:1.25fr .75fr;gap:12%;padding-top:150px;padding-bottom:160px}.overview-copy{max-width:680px}.overview-copy .eyebrow{display:block;color:var(--pink);margin-bottom:28px}.overview-copy p{font-size:24px;line-height:1.5;letter-spacing:.005em}.overview-copy p+p{font-size:20px;margin-top:22px}.facts{border-top:1px solid var(--rule)}.facts div{display:grid;grid-template-columns:100px 1fr;gap:10px;padding:17px 0;border-bottom:1px solid var(--rule)}.facts dt{font-size:15px}.facts dd{font-size:18px;line-height:1.35}
.chapter{border-top:1px solid var(--rule);padding-top:165px;padding-bottom:170px}.chapter-heading{display:grid;grid-template-columns:210px 1fr;column-gap:35px;align-items:start;margin-bottom:78px}.chapter-heading .eyebrow{padding-top:12px}.chapter-heading h2,.outcome h2{font:700 clamp(42px,4.3vw,58px)/1.1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:-.04em}.chapter-heading>p{grid-column:2;max-width:720px;margin-top:28px;line-height:1.55}.direction-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:26px;align-items:start}.image-panel{min-width:0}.image-panel img{width:100%;height:520px;object-fit:cover;object-position:top;background:var(--navy)}.image-panel figcaption{display:flex;gap:14px;align-items:baseline;margin-top:18px;font-size:15px;font-weight:300}.image-panel figcaption span{font-weight:600;white-space:nowrap}.principles{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-top:100px}.principles>div{padding:23px 23px 28px 0}.principles>div+div{border-left:1px solid var(--rule);padding-left:23px}.principles span{color:var(--pink);font-size:21px}.principles p{font-size:20px;line-height:1.35;margin-top:20px}
.page-picker{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 32px}.page-picker button{appearance:none;border:1px solid var(--rule);background:transparent;color:var(--blue);padding:12px 18px;font:inherit;cursor:pointer;transition:background .2s,color .2s,border-color .2s}.page-picker button:hover{border-color:var(--blue)}.page-picker button.is-active{background:var(--blue);border-color:var(--blue);color:var(--paper)}.device-stage{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:44px;align-items:start}.desktop-device,.phone-device{min-width:0}.desktop-device{border:1px solid #b7bdc4;background:#e8eaec;padding:12px 12px 0;box-shadow:0 16px 42px rgba(21,35,53,.11)}.device-toolbar{height:30px;display:flex;gap:6px;align-items:center;background:#1b2029;padding:0 13px}.device-toolbar b{font:300 11px OverusedGrotesk,Arial,sans-serif;color:#b0b5bf;margin-left:12px;letter-spacing:.1em}.device-scroll{height:500px;overflow:auto;overscroll-behavior:contain;scrollbar-color:#8c99a8 #d9dde1}.device-scroll img{width:100%;max-width:none;height:auto}.desktop-device figcaption,.phone-device figcaption{display:flex;justify-content:space-between;gap:15px;margin-top:0;padding:14px 0;font-size:14px}.desktop-device figcaption span,.phone-device figcaption span{font-weight:300}.phone-device{background:#090b0f;border:7px solid #090b0f;border-radius:31px;padding:0 4px 0;box-shadow:0 16px 42px rgba(21,35,53,.18)}.phone-top{height:26px;background:#090b0f;border-radius:24px 24px 0 0;position:relative}.phone-top::after{content:"";position:absolute;width:70px;height:8px;border-radius:10px;background:#252a33;top:9px;left:50%;transform:translateX(-50%)}.phone-device .device-scroll{height:447px;scrollbar-width:thin}.phone-device figcaption{color:#f9f6f1;padding:13px 6px 7px;font-size:11px}.page-note{margin-top:34px;font-weight:300;font-size:16px;color:#526e91}
.system-gallery{display:grid;grid-template-columns:1fr 1fr;gap:28px}.system-gallery figure{min-width:0;padding:30px;display:flex;flex-direction:column;justify-content:space-between;min-height:390px}.system-gallery img{width:100%;height:290px;object-fit:contain}.system-dark{background:#050505;color:#f9f6f1}.system-light{background:#fff;color:var(--blue)}.system-gallery figcaption{padding-top:23px;font-size:14px}.outcome{display:grid;grid-template-columns:1fr .8fr;gap:12%;align-items:end;border-top:1px solid var(--rule);padding-top:145px;padding-bottom:190px}.outcome .eyebrow{display:block;color:var(--pink);margin-bottom:30px}.outcome p{max-width:475px;line-height:1.57}
.page-footer{border-top:1px solid var(--rule)}.footer-inner{min-height:245px;display:flex;align-items:center;justify-content:space-between}.footer-inner>div{display:grid;gap:18px}.footer-inner a{font:700 clamp(24px,3vw,42px)/1.2 "Helvetica Neue",Helvetica,Arial,sans-serif}.footer-inner a span{margin-left:18px}.footer-star{width:65px;height:90px}.copyright{background:#e3cccc;text-align:right;padding:23px 7vw;font-size:18px}
@media(max-width:1050px){.hero-heading{grid-template-columns:1fr .7fr}.project-overview{gap:6%}.chapter-heading{grid-template-columns:170px 1fr;column-gap:25px}.device-stage{grid-template-columns:minmax(0,1fr) 190px;gap:25px}.system-gallery figure{padding:20px}}
@media(max-width:720px){body{font-size:18px}.shell{width:calc(100% - 42px)}.site-header{width:calc(100% - 42px);min-height:76px;padding-top:19px;font-size:12px}.site-header nav{gap:14px}.site-header nav a:nth-child(3),.site-header nav span{display:none}.hero{padding-top:58px}.hero-topline{font-size:12px;gap:20px}.hero-topline>span:last-child{text-align:right}.hero-heading{display:block;padding:58px 0 40px}.hero h1{font-size:clamp(52px,13vw,82px)}.hero-heading p{margin-top:25px;font-size:24px;max-width:530px}.hero-visual img{height:400px;min-height:0}.hero-visual figcaption{font-size:12px}.project-overview{display:block;padding:100px 0 115px}.overview-copy p{font-size:21px}.overview-copy p+p{font-size:18px}.facts{margin-top:55px}.facts div{grid-template-columns:115px 1fr}.chapter{padding:115px 0 120px}.chapter-heading{display:block;margin-bottom:55px}.chapter-heading .eyebrow{display:block;padding:0;margin-bottom:23px}.chapter-heading h2,.outcome h2{font-size:clamp(37px,8vw,50px)}.chapter-heading>p{margin-top:24px}.direction-grid{display:block}.image-panel+.image-panel{margin-top:45px}.image-panel img{height:390px}.image-panel figcaption{font-size:13px}.principles{display:block;margin-top:70px}.principles>div,.principles>div+div{border-left:0;border-bottom:1px solid var(--rule);padding:20px 0}.principles>div:last-child{border-bottom:0}.principles p{margin-top:8px}.page-picker{gap:7px}.page-picker button{padding:9px 12px;font-size:13px}.device-stage{display:block}.desktop-device .device-scroll{height:370px}.phone-device{width:210px;margin:52px auto 0}.phone-device .device-scroll{height:405px}.system-gallery{display:block}.system-gallery figure+figure{margin-top:25px}.system-gallery figure{min-height:310px}.system-gallery img{height:230px}.outcome{display:block;padding:115px 0 145px}.outcome p{margin-top:35px}.footer-inner{min-height:190px}.footer-star{width:44px;height:62px}.copyright{font-size:15px}}
@media(max-width:390px){.site-header nav{gap:10px}.hero h1{font-size:49px}.hero-topline{font-size:11px}.image-panel figcaption{display:block}.image-panel figcaption span{display:block;margin-bottom:5px}.desktop-device .device-scroll{height:300px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.page-picker button{transition:none}}

/* Use the same split introduction and project-details rhythm as the other case studies. */
.hero{min-height:700px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:7%;align-items:center;padding:90px 0 130px}
.hero-copy,.hero-art{min-width:0}
.hero-kicker{display:flex;align-items:center;gap:13px;font:600 17px/1.35 OverusedGrotesk,Arial,sans-serif}
.hero-kicker .star{flex:none}
.hero h1{font-size:clamp(65px,6.4vw,92px);line-height:1;letter-spacing:-.055em;margin:34px 0 30px}
.hero-lead{font:700 clamp(27px,2.8vw,36px)/1.18 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:-.02em;max-width:550px}
.hero-description{max-width:550px;margin-top:26px;font-size:20px;line-height:1.58}
.hero-art-crop{overflow:hidden;aspect-ratio:1.45;background:#fff}
.hero-art-crop img{width:100%;height:100%;object-fit:cover;transform:scale(1.2)}
.hero-art figcaption{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid var(--rule);margin-top:18px;padding-top:14px;white-space:nowrap}
.hero-art figcaption .star{width:14px;height:20px}
.facts{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:25px;padding:26px 0 32px}
.facts div{display:block;border:0;padding:0}
.facts dt{font-size:17px;margin-bottom:9px}.facts dd{font-size:19px;line-height:1.3}
.visual-direction{border-top:0;padding-top:0;margin-top:155px}
@media(max-width:1050px){.hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5%}.facts{gap:16px}}
@media(max-width:720px){.hero{display:block;min-height:0;padding:65px 0 85px}.hero h1{font-size:clamp(55px,13vw,82px);margin:28px 0}.hero-lead{font-size:27px}.hero-description{font-size:18px;margin-top:22px}.hero-art{margin-top:58px}.hero-art figcaption{font-size:13px}.facts{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:25px}.facts dt{font-size:14px}.facts dd{font-size:17px}.visual-direction{margin-top:115px}}
@media(max-width:390px){.hero h1{font-size:49px}.hero-kicker{font-size:15px}.hero-art figcaption{font-size:11px;gap:8px}}

/* XDS case-study refinements: fewer type styles and roomier visual storytelling. */
.hero h1{margin-bottom:40px}
.hero-description{margin-top:0}
.hero-art-crop img{transform:scale(1.42)}
.direction-grid{grid-template-columns:1fr;gap:82px}
.image-panel img{height:610px}
.image-panel figcaption{margin-top:20px}
.principles{margin-top:110px}
.principles>div{padding:27px 28px 32px 0}
.principles h3{font:700 26px/1.2 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:-.025em;margin:23px 0 15px}
.principles p{max-width:320px;font-size:18px;line-height:1.5;margin-top:0}
.visual-direction{padding-bottom:95px}
.responsive-pages{border-top:0;padding-top:90px}
.page-note{color:var(--blue)}
.system-gallery{grid-template-columns:1fr;gap:78px}
.system-gallery figure{display:block;min-height:0;padding:0;background:transparent;color:var(--blue)}
.system-image{overflow:hidden;aspect-ratio:1920/1150;background:#050505}
.system-light .system-image{aspect-ratio:1920/690;background:#fff}
.system-gallery img{width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
.system-light img{transform:scale(1.06)}
.system-gallery figcaption{padding-top:20px;font-size:15px}
.outcome{display:block}
.outcome p{max-width:700px;margin-top:48px}
@media(max-width:720px){
  .hero h1{margin-bottom:26px}
  .hero-description{margin-top:0}
  .hero-art-crop img{transform:scale(1.35)}
  .direction-grid{gap:48px}
  .image-panel img{height:390px}
  .principles{margin-top:70px}
  .principles>div,.principles>div+div{padding:25px 0}
  .principles h3{font-size:23px;margin:12px 0}
  .principles p{max-width:none;font-size:17px}
  .visual-direction{padding-bottom:55px}
  .responsive-pages{padding-top:70px}
  .system-gallery{gap:50px}
  .outcome p{margin-top:30px}
}

/* Transparent hero cutout and the revised XDS image presentation. */
.hero-art-crop{background:transparent;aspect-ratio:1542/1020;overflow:hidden}
.hero-art-crop img{object-fit:contain;transform:scale(1.3)}
.image-panel-wide img{object-fit:cover;object-position:center}
.image-panel-hierarchy img{object-fit:cover;object-position:top}
.desktop-device{background:#090b0f;border:7px solid #090b0f;border-radius:24px;padding:0 5px;overflow:hidden;box-shadow:0 16px 42px rgba(21,35,53,.18)}
.desktop-device .device-toolbar{border-radius:16px 16px 0 0;background:#090b0f}
.desktop-device figcaption{color:var(--paper);padding:13px 7px 8px;font-size:12px}
.system-gallery{max-width:850px;margin-inline:auto;gap:68px}
.system-image{aspect-ratio:1920/1000}
.system-light .system-image{aspect-ratio:1920/620}
.outcome p{max-width:100%}
@media(max-width:720px){
  .hero-art-crop img{transform:scale(1.26)}
  .image-panel-wide img{height:auto;aspect-ratio:908/580}
  .system-gallery{gap:46px}
}

/* Align content between rules and show the full component board. */
.facts{padding:32px 0;align-items:center}
.principles{margin-top:140px}
.visual-direction{padding-bottom:80px}
.responsive-pages{padding-top:75px}
.hierarchy-crop{width:100%;aspect-ratio:1.12;overflow:hidden;background:#22272d}
.hierarchy-crop img{display:block;width:100%;max-width:none;height:auto;transform:translateY(-23.5%);object-fit:initial}
.system-dark .system-image{aspect-ratio:1920/1240}
.system-dark .system-image img{object-fit:contain;transform:none}
@media(max-width:720px){
  .facts{padding:25px 0}
  .principles{margin-top:85px}
  .visual-direction{padding-bottom:60px}
  .responsive-pages{padding-top:60px}
}

/* Keep both page previews scrollable without a pale track covering the designs. */
.device-scroll{scrollbar-width:thin;scrollbar-color:rgba(220,230,242,.52) transparent}

.outcome .eyebrow{color:var(--blue)}
.device-scroll::-webkit-scrollbar{width:6px;height:6px;background:transparent}
.device-scroll::-webkit-scrollbar-track{background:transparent;border-radius:999px}
.device-scroll::-webkit-scrollbar-thumb{background:rgba(220,230,242,.52);border-radius:999px}
.device-scroll::-webkit-scrollbar-thumb:hover{background:rgba(220,230,242,.78)}