@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;600;700;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#eaf0f4;background:#081828}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:2px solid #e9c48b;outline-offset:4px}.wrap{max-width:1370px;margin:auto;padding:0 clamp(22px,5vw,72px)}header{background:#081828;border-bottom:1px solid #ffffff2b;position:sticky;top:0;z-index:9}.head{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:25px}.brand{display:flex;align-items:center;gap:15px;min-width:0}.brand img{width:39px;height:39px;object-fit:contain;filter:invert(1)}.brand strong{font:800 1.25rem Manrope;letter-spacing:.12em;display:block}.brand small{font-size:.58rem;letter-spacing:.1em;color:#b4c2cc;white-space:nowrap}.nav{display:flex;gap:clamp(17px,3vw,42px);align-items:center}.nav a{font-size:.94rem;color:#c9d5dc;padding:12px 0;white-space:nowrap}.nav a[aria-current=page]{border-bottom:2px solid #e9c48b;color:#f4d4a5}.menu{display:none;background:transparent;color:#fff;border:1px solid #8596a2;border-radius:3px;padding:8px 11px;align-items:center;gap:9px}.menu-lines{display:grid;gap:4px}.menu-lines i{width:18px;height:2px;background:currentColor;display:block}.hero{min-height:610px;position:relative;display:flex;align-items:end;overflow:hidden}.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#071624e8,#0716247c 56%,transparent),linear-gradient(0deg,#071624,transparent 45%)}.hero .wrap{width:100%;z-index:1;position:relative;padding-top:85px;padding-bottom:80px}.hero-text{max-width:670px}.eyebrow{font-size:.8rem;text-transform:uppercase;letter-spacing:.19em;color:#e9c48b;font-weight:700}h1,h2,h3{font-family:Manrope,sans-serif}h1{font-size:clamp(3rem,6vw,6rem);line-height:1.04;letter-spacing:-.06em;margin:18px 0 22px}h2{font-size:clamp(2.2rem,4vw,4rem);letter-spacing:-.055em;line-height:1.15;margin:12px 0 25px}p{line-height:1.7}.hero p{font-size:1.18rem;color:#e4ebef;max-width:570px}.btn{display:inline-block;border:1px solid #e9c48b;color:#f5d6a4;padding:13px 20px;margin-top:20px;font-weight:700}.intro{display:grid;grid-template-columns:1fr 1fr;gap:65px;padding-top:92px;padding-bottom:90px}.intro p,.lead{font-size:1.14rem;color:#bfccd4;margin:0}.section{padding-top:85px;padding-bottom:95px;border-top:1px solid #ffffff25}.section-head{max-width:750px;margin-bottom:36px}.section-head p{color:#b8c6cf;font-size:1.08rem}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.card{background:#11293b;border:1px solid #365163;padding:29px;min-height:220px}.card span{font-size:.75rem;letter-spacing:.16em;color:#e3c18b}.card h3{font-size:1.5rem;margin:22px 0 11px;letter-spacing:-.03em}.card p{color:#bbcad3;margin:0}.feature{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center;margin-top:80px}.feature img{width:100%;aspect-ratio:16/10;object-fit:cover}.feature p{color:#c3cfd6;font-size:1.1rem}.page-hero{padding:95px 0 75px;background:radial-gradient(circle at 80% 20%,#214a66,#081828 60%);border-bottom:1px solid #ffffff24}.page-hero h1{max-width:920px}.page-hero .lead{max-width:800px}.content{padding-top:70px;padding-bottom:100px}.copy{max-width:800px;margin-bottom:70px}.copy h2,.board h2{font-size:clamp(2rem,3vw,3.1rem)}.copy p,.story p{font-size:1.1rem;color:#bfccd4;line-height:1.82}.board{border-top:1px solid #ffffff2b;padding-top:65px}.people{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}.person{background:#11293b;border:1px solid #365163;padding:24px;min-height:150px}.person h3{font-size:1.15rem;margin:0 0 10px}.person p{color:#bdcbd4;line-height:1.5;margin:0;font-size:.96rem}.person small{color:#98aeb9;display:block;margin-top:10px;line-height:1.5}.archive{background:#153449;border-left:4px solid #e9c48b;padding:40px;margin-top:70px}.archive h2{font-size:2rem;margin:0 0 12px}.archive p{max-width:800px;color:#c6d3da;margin:0}.story{max-width:850px}.story p{margin:0 0 25px}.photo-note{background:#153449;border:1px solid #426276;padding:28px 33px;margin-top:40px}.photo-note a{color:#f5d6a4;text-decoration:underline}.footer{background:#061320;border-top:1px solid #ffffff29;padding:60px 0 25px}.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px}.footer h2{font-size:1.55rem;letter-spacing:-.03em;margin:0 0 12px}.footer p{max-width:480px;color:#afc0ca}.footer a.action{color:#edc891;border-bottom:1px solid #edc891;padding-bottom:4px}.legal{border-top:1px solid #ffffff25;color:#91a6b2;font-size:.82rem;margin-top:60px;padding-top:24px;display:flex;justify-content:space-between;gap:16px}@media(max-width:900px){.brand small{font-size:.5rem}.brand img{width:32px;height:32px}.head{gap:10px}.nav{gap:17px}.nav a{font-size:.86rem}.cards,.people{grid-template-columns:repeat(2,1fr)}.intro,.feature{grid-template-columns:1fr}.feature{gap:25px}}@media(max-width:680px){.head{min-height:72px;flex-wrap:wrap}.menu{display:flex}.nav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;padding-bottom:13px}.nav.open{display:flex}.nav a{padding:12px 0}.brand small{font-size:.46rem;letter-spacing:0}.hero{min-height:610px}.hero:after{background:linear-gradient(0deg,#071624,#0716248c 72%,transparent)}.hero .wrap{padding-bottom:58px}h1{font-size:3rem}.intro,.section{padding-top:65px;padding-bottom:65px}.cards,.people,.footer-grid{grid-template-columns:1fr}.card{min-height:0}.page-hero{padding:65px 0 50px}.content{padding-top:50px;padding-bottom:70px}.legal{display:block}.legal span{display:block;margin-bottom:10px}}
@media (orientation:landscape) and (max-height:500px) and (max-width:950px){.head{min-height:68px;flex-wrap:wrap}.menu{display:flex}.nav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;padding-bottom:12px}.nav.open{display:flex}.nav a{padding:11px 0}}
/* Keep the identity and navigation present through scrolling. */
header{position:sticky;top:0;z-index:100;background:#081828;box-shadow:0 5px 22px #020b14a8}
.brand{gap:17px}.brand img{width:48px;height:48px;flex:none}.brand strong{font-family:Outfit,Manrope,sans-serif;font-size:1.7rem;font-weight:700;letter-spacing:.17em;line-height:1.05}.brand small{display:block;font-size:.63rem;font-weight:600;letter-spacing:.085em;line-height:1.25;margin-top:5px}
@media(max-width:900px){.brand img{width:39px;height:39px}.brand strong{font-size:1.45rem}.brand small{font-size:.52rem}}
@media(max-width:680px){.brand{flex:1;gap:10px}.brand span{min-width:0}.brand img{width:34px;height:34px}.brand strong{font-size:1.35rem}.brand small{white-space:normal;max-width:210px;font-size:.49rem;letter-spacing:.03em}.menu{flex:none}}
@media (orientation:landscape) and (max-height:500px) and (max-width:950px){.brand{flex:1}.brand small{white-space:normal}.menu{flex:none}}
/* Full center name at desktop and tablet widths; acronym on phones. */
.brand-type{min-width:0}.brand-full{display:block;font-family:Outfit,Manrope,sans-serif;font-weight:600;font-size:clamp(1.1rem,1.55vw,1.52rem);line-height:1.18;letter-spacing:.012em;white-space:nowrap}.brand-short{display:none!important}
@media(max-width:900px){.brand-full{font-size:1.08rem;letter-spacing:0}}
@media(max-width:680px){.brand-full{display:none!important}.brand-short{display:block!important;font-family:Outfit,Manrope,sans-serif;font-size:1.42rem;letter-spacing:.15em;line-height:1}}
@media (orientation:landscape) and (max-height:500px) and (max-width:950px){.brand-full{display:none!important}.brand-short{display:block!important;font-family:Outfit,Manrope,sans-serif;font-size:1.42rem;letter-spacing:.15em;line-height:1}}
@media(min-width:681px) and (max-width:900px){.brand{gap:10px}.brand-full{font-size:.94rem}.nav{gap:12px}.nav a{font-size:.875rem}}
/* Phone navigation icon: no frame or visible label. */
.menu{width:44px;height:44px;padding:10px;justify-content:center;border:0;border-radius:0;background:transparent;cursor:pointer;color:#f3d29f}
.menu-lines{width:23px;gap:0;position:relative;display:block;height:18px}
.menu-lines i{position:absolute;left:0;width:23px;height:2px;background:currentColor;transition:transform .2s ease,opacity .15s ease,top .2s ease}
.menu-lines i:nth-child(1){top:1px}.menu-lines i:nth-child(2){top:8px}.menu-lines i:nth-child(3){top:15px}
.menu[aria-expanded="true"] .menu-lines i:nth-child(1){top:8px;transform:rotate(45deg)}
.menu[aria-expanded="true"] .menu-lines i:nth-child(2){opacity:0}
.menu[aria-expanded="true"] .menu-lines i:nth-child(3){top:8px;transform:rotate(-45deg)}
@media(prefers-reduced-motion:reduce){.menu-lines i{transition:none}}
/* Light navigation treatment. */
header{background:#fff;border-bottom:1px solid #dce3e8;box-shadow:0 2px 14px #07182714}
.brand img{filter:none}
.brand-full,.brand-short{color:#172331}
.nav a{color:#304252}
.nav a:hover{color:#071827}
.nav a[aria-current=page]{color:#0b273d;border-bottom-color:#b88749}
.menu{color:#172331}
@media(max-width:680px){.nav{background:#fff}}
@media (orientation:landscape) and (max-height:500px) and (max-width:950px){.nav{background:#fff}}
/* Phone dropdown panel, clearly separated from the white sticky header. */
@media(max-width:680px){
  .nav.open{background:#102b40;color:#f4f7f9;margin:0 -22px;padding:11px 22px 18px;border-top:3px solid #b88749;box-shadow:0 14px 25px #06131f55}
  .nav.open a{color:#e7eff4;font-size:1rem;font-weight:600;padding:16px 4px;border-bottom:1px solid #ffffff2b}
  .nav.open a:last-child{border-bottom:0}
  .nav.open a[aria-current=page]{color:#f0cc93;border-bottom:1px solid #ffffff2b}
  .nav.open a:last-child[aria-current=page]{border-bottom:0}
}
@media (orientation:landscape) and (max-height:500px) and (max-width:950px){
  .nav.open{background:#102b40;color:#f4f7f9;margin:0 -22px;padding:8px 22px 12px;border-top:3px solid #b88749;box-shadow:0 14px 25px #06131f55}
  .nav.open a{color:#e7eff4;font-size:.94rem;font-weight:600;padding:11px 4px;border-bottom:1px solid #ffffff2b}
  .nav.open a:last-child{border-bottom:0}
  .nav.open a[aria-current=page]{color:#f0cc93}
}
/* Mobile menu treatment drawn from the supplied live-site captures. */
@media(max-width:680px){
  .menu{color:#23a4c8}
  .nav.open{position:absolute;top:100%;left:0;right:0;width:100%;margin:0;padding:12px clamp(28px,8.5vw,80px) 18px;background:#52a8dc;border:0;box-shadow:0 16px 22px #0818283b;gap:0}
  .nav.open a{position:relative;color:#fff;font-size:1.15rem;font-weight:400;padding:20px 0 20px 31px;border-bottom:1px solid #ffffff7a}
  .nav.open a::before{content:'•';position:absolute;left:0;top:20px}
  .nav.open a[aria-current=page]{color:#e1f3fc;border-bottom:1px solid #ffffff7a}
  .nav.open a:last-child,.nav.open a:last-child[aria-current=page]{border-bottom:0}
}
@media (orientation:landscape) and (max-height:500px) and (max-width:950px){
  .menu{color:#23a4c8}
  .nav.open{position:absolute;top:100%;left:0;right:0;width:100%;margin:0;padding:8px clamp(28px,8.5vw,80px) 12px;background:#52a8dc;border:0;box-shadow:0 16px 22px #0818283b;gap:0}
  .nav.open a{position:relative;color:#fff;font-size:1rem;font-weight:400;padding:12px 0 12px 30px;border-bottom:1px solid #ffffff7a}
  .nav.open a::before{content:'•';position:absolute;left:0;top:12px}
  .nav.open a[aria-current=page]{color:#e1f3fc;border-bottom:1px solid #ffffff7a}
  .nav.open a:last-child,.nav.open a:last-child[aria-current=page]{border-bottom:0}
}
/* Two strokes become the two strokes of the close icon. */
.menu-lines{height:18px}
.menu-lines i:nth-child(1){top:4px}
.menu-lines i:nth-child(2){top:13px;opacity:1}
.menu[aria-expanded="true"] .menu-lines i:nth-child(1){top:8px;transform:rotate(45deg)}
.menu[aria-expanded="true"] .menu-lines i:nth-child(2){top:8px;opacity:1;transform:rotate(-45deg)}
/* CASE menu colors sampled from the supplied branding captures. */
@media(max-width:680px){.menu{color:#28a9e0}.menu[aria-expanded="true"]{color:#1daca4}}
@media (orientation:landscape) and (max-height:500px) and (max-width:950px){.menu{color:#28a9e0}.menu[aria-expanded="true"]{color:#1daca4}}
/* CASE typography: Poppins throughout the preview. */
:root{font-family:Poppins,sans-serif}
h1,h2,h3,.brand-full,.brand-short{font-family:Poppins,sans-serif}
.brand-full{font-weight:600;letter-spacing:-.025em}
.brand-short{font-weight:700;letter-spacing:.08em}
@media(min-width:681px) and (max-width:900px){.brand-full{font-size:.875rem}}
/* Let Poppins use its natural letter spacing in display text. */
h1{letter-spacing:0;line-height:1.11}
h2,.section-head h2,.copy h2,.board h2,.archive h2,.footer h2{letter-spacing:0;line-height:1.22}
h3,.card h3,.person h3{letter-spacing:0;line-height:1.3}
/* Editorial photo layout: white canvas, full-width image, copy beneath. */
:root{color:#173044;background:#fff}
body{background:#fff;color:#173044}
.hero{display:block;min-height:0;background:#fff;overflow:visible}
.hero img{position:relative;inset:auto;display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center}
.hero:after{display:none}
.hero .wrap{width:auto;max-width:1370px;background:#fff;padding-top:45px;padding-bottom:72px}
.hero-text{max-width:950px}
.hero h1{color:#173044;margin:12px 0 18px}
.hero p{color:#3c5565;max-width:780px}
.eyebrow{color:#2388bd}
.btn{border-color:#2388bd;color:#136e9c}
.intro{background:#fff}
.intro p,.lead,.section-head p,.feature p,.copy p,.story p{color:#435d6d}
.section{border-top-color:#d7e3e9}
.card,.person{background:#f4f9fc;border-color:#d9e7ee}
.card span{color:#1c80b1}
.card p,.person p,.person small{color:#455f6d}
.feature{width:100vw;margin:84px 0 0 calc(50% - 50vw);display:block}
.feature img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.feature>div{max-width:1370px;margin:0 auto;padding:44px clamp(22px,5vw,72px) 0}
.feature h2{max-width:820px}.feature p{max-width:780px}
.page-hero{background:#f3f9fc;border-bottom-color:#d9e7ee}
.page-hero .lead{color:#435d6d}
.board{border-top-color:#d9e7ee}
.archive,.photo-note{background:#e9f5fb;border-color:#57a5cb}
.archive p,.photo-note p{color:#435d6d}
.photo-note a{color:#126f9d}
.footer{background:#eaf5fb;border-top-color:#d4e7f0}
.footer p{color:#435d6d}.footer a.action{color:#147aa9;border-bottom-color:#147aa9}
.legal{border-top-color:#c8dce6;color:#496777}
@media(max-width:850px){.feature{margin-top:66px}}
@media(max-width:680px){.hero{min-height:0}.hero:after{display:none}.hero .wrap{padding-top:34px;padding-bottom:58px}.feature{margin-top:55px}.feature>div{padding-top:30px}}
/* Gentle separation for the sticky white header. */
header{box-shadow:0 4px 16px rgba(18,58,82,.16)}
/* Square editorial photographs; bounded on larger screens, edge-to-edge on phones. */
.hero img{width:min(820px,calc(100% - 80px));aspect-ratio:1;object-fit:cover;object-position:center;margin:0 auto}
.hero .wrap{max-width:820px;padding-left:0;padding-right:0}
.feature{width:auto;max-width:1370px;margin:82px auto 0;display:block}
.feature img{width:min(820px,calc(100% - 80px));aspect-ratio:1;object-fit:cover;object-position:62% center;margin:0 auto}
.feature>div{max-width:820px;padding:38px 0 0}
@media(max-width:680px){
  .hero img,.feature img{width:100%;aspect-ratio:1}
  .hero .wrap{width:auto;padding-left:22px;padding-right:22px}
  .feature{width:100vw;max-width:none;margin:55px 0 0 calc(50% - 50vw)}
  .feature>div{padding:30px 22px 0}
}
@media (orientation:landscape) and (max-height:500px) and (max-width:950px){
  .hero img,.feature img{width:100%;aspect-ratio:1}
  .hero .wrap{width:auto;padding-left:22px;padding-right:22px}
  .feature{width:100vw;max-width:none;margin:55px 0 0 calc(50% - 50vw)}
  .feature>div{padding:30px 22px 0}
}
/* Hero exception: fluid landscape image, square only on portrait phones. */
.hero img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center;margin:0}
@media(max-width:680px) and (orientation:portrait){.hero img{width:100%;aspect-ratio:1}}
@media(max-width:950px) and (max-height:500px) and (orientation:landscape){.hero img{width:100%;aspect-ratio:16/9}}
/* Blueprint phase: soft blue field with calm white content panels. */
:root{background:#ebebeb}
body{background:#ebebeb}
.hero{background:#ebebeb}
.hero .wrap{max-width:900px;width:calc(100% - 48px);background:#fff;border-radius:26px;margin-top:38px;padding:42px clamp(28px,5vw,58px) 50px}
.intro{max-width:1280px;background:#fff;border-radius:26px;margin-top:34px;margin-bottom:34px;padding:70px clamp(30px,5vw,72px)}
.section{border-top:0}
.section-head h2,.intro h2,.feature h2,.copy h2,.board h2{color:#3b9890}
.section-head p,.intro p,.feature p,.copy p,.story p{color:#4c91ba}
.card,.person{background:#fff;border-color:#cce6f1;border-radius:20px}
.feature>div{max-width:900px;width:calc(100% - 48px);background:#fff;border-radius:26px;margin:30px auto 0;padding:40px clamp(28px,5vw,58px) 45px}
.page-hero{background:#ebebeb;border-bottom:0}
.content.wrap{background:#fff;border-radius:26px;margin-bottom:65px;padding:70px clamp(30px,5vw,72px)}
.archive,.photo-note{background:#eef9fd;border-radius:18px}
@media(max-width:680px){
  .hero .wrap{width:calc(100% - 28px);margin-top:16px;padding:26px 22px 32px;border-radius:19px}
  .intro{width:calc(100% - 28px);margin-top:16px;margin-bottom:16px;padding:32px 22px;border-radius:19px}
  .feature>div{width:calc(100% - 28px);margin-top:16px;padding:27px 22px 32px;border-radius:19px}
  .content.wrap{width:calc(100% - 28px);margin-bottom:30px;padding:35px 22px;border-radius:19px}
}
@media (orientation:landscape) and (max-height:500px) and (max-width:950px){
  .hero .wrap,.feature>div{width:calc(100% - 28px);margin-top:16px;padding:26px 22px 32px;border-radius:19px}
}
/* Alternating square photo/copy rows below the full-width hero. */
.photo-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;gap:clamp(24px,4vw,58px);width:100%;max-width:1280px;margin:82px auto 0}
.photo-row img{width:100%;height:100%;aspect-ratio:1;object-fit:cover;object-position:62% center;margin:0}
.photo-row>div{width:auto;max-width:none;margin:0;background:#fff;border-radius:24px;padding:clamp(30px,4vw,64px);display:flex;flex-direction:column;justify-content:center}
.photo-row.reverse img{order:2}.photo-row.reverse>div{order:1}
@media(max-width:680px) and (orientation:portrait){
  .photo-row{display:block;width:100vw;max-width:none;margin:55px 0 0 calc(50% - 50vw)}
  .photo-row img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
  .photo-row>div{width:calc(100% - 28px);margin:16px auto 0;padding:27px 22px 32px;border-radius:19px}
  .photo-row.reverse img,.photo-row.reverse>div{order:initial}
}
@media (orientation:landscape) and (max-height:500px) and (max-width:950px){
  .photo-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;width:calc(100% - 32px);margin:55px auto 0}
  .photo-row img{width:100%;height:100%;aspect-ratio:1;margin:0}
  .photo-row>div{width:auto;margin:0;padding:20px 23px;border-radius:18px}
}
/* A slightly stronger helmet mark beside the temporary wordmark. */
.brand img{width:56px;height:56px}
@media(max-width:900px){.brand img{width:46px;height:46px}}
@media(max-width:680px){.brand img{width:40px;height:40px}}
@media (orientation:landscape) and (max-height:500px) and (max-width:950px){.brand img{width:40px;height:40px}}

/* Feedback, consistent across all three page footers. */
.footer{background:#519ccd;color:#fff;padding:75px 0 34px}
.footer h2{color:#fff}
.footer-grid{display:block;max-width:780px;margin:auto}
.footer-grid>div:first-child{margin-bottom:0}
.footer-grid h2{font-size:clamp(3rem,6vw,6rem);line-height:1.11;letter-spacing:0}
@media(min-width:681px){.footer-grid h2{font-size:clamp(2.2rem,4vw,4rem)}}
.feedback-form{display:grid;gap:2px;margin-top:20px}
.feedback-form label{font-size:.9rem;font-weight:600;margin-top:8px}
.feedback-form input,.feedback-form textarea{width:100%;border:2px solid transparent;border-radius:0;background:#b9e5fc;color:#16476a;padding:17px 19px;font:inherit;resize:vertical}
.feedback-form textarea{min-height:140px}
.feedback-form input::placeholder,.feedback-form textarea::placeholder{color:#447996;opacity:1}
.feedback-form input:focus,.feedback-form textarea:focus{outline:0;box-shadow:inset 0 0 0 3px #fff}
.feedback-form button{border:0;border-radius:0;background:#3b9890;color:#fff;font:700 1.08rem Poppins,sans-serif;font-size:calc(1.08rem + 2pt);padding:17px;cursor:pointer;margin-top:0;transition:background-color .25s ease-in-out,color .25s ease-in-out}
.feedback-form button:hover,.feedback-form button:focus-visible{background:#c6ffe1;color:#2d739f}
.feedback-form button:disabled{opacity:.7;cursor:wait}
.feedback-form .status{min-height:1.5em;margin:7px 0 0;color:#fff}
.feedback-form .trap{position:absolute;left:-9999px;opacity:0;width:1px;height:1px}
/* Give the message field most of the second row on desktop and tablet. */
@media (min-width:681px) and (min-height:501px){
  .footer-grid{max-width:780px}
  .feedback-form{grid-template-columns:repeat(2,minmax(0,1fr));--submit-width:clamp(108px,16vw,132px)}
  .feedback-form #feedback-name{grid-column:1;grid-row:1}
  .feedback-form #feedback-email{grid-column:2;grid-row:1}
  .feedback-form #feedback-message{
    grid-column:1 / -1;grid-row:2;
    width:calc(100% - var(--submit-width) - 2px);
    height:var(--submit-width);min-height:0;resize:none
  }
  .feedback-form button{
    grid-column:1 / -1;grid-row:2;justify-self:end;align-self:end;
    display:flex;align-items:flex-end;justify-content:center;
    width:var(--submit-width);aspect-ratio:1;
    padding:0 8px 16px;font-size:calc(clamp(.95rem,1.2vw,1.08rem) + 2pt)
  }
  .feedback-form .status{grid-column:1 / -1;grid-row:3}
}
.workshops{background:#439990;color:#fff;border-radius:0;max-width:none;width:100%;margin-top:50px;margin-bottom:0;padding:clamp(42px,7vw,90px) clamp(22px,5vw,72px);text-align:center}
.workshops .eyebrow,.workshops h2,.workshops h3,.workshops p{color:#fff}
.workshops>p{max-width:1020px;margin-left:auto;margin-right:auto;font-size:1.1875rem}
.no-break{white-space:nowrap}
.workshop-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:24px}
.workshop-items article{background:transparent;padding:25px}
.workshop-items h3{margin:0 0 10px}
.workshop-items img{display:block;width:auto;height:100px;max-width:100%;object-fit:contain;margin:0 auto 22px}
.workshop-items p{text-wrap:pretty}
@media(max-width:680px){.workshop-items{grid-template-columns:1fr;gap:8px}.workshops{width:100%;border-radius:0}}
.inbox{min-height:70vh;padding-top:55px;padding-bottom:65px;color:#17415b}
.inbox h1{color:#3b9890}.inbox-list{display:grid;gap:18px}
.inbox-item{background:#fff;border-radius:18px;padding:25px;overflow-wrap:anywhere}
.inbox-item time{color:#64869b;font-size:.85rem}.inbox-item p{white-space:pre-wrap}
/* Approved CASE artwork. Preserve each asset's original aspect ratio. */
.brand{gap:32px;flex-shrink:0}
.brand .brand-explorer{display:block;width:auto;height:56px;max-width:none;flex:none;object-fit:contain}
.brand-type{display:flex;align-items:center;min-width:0}
.brand-type .brand-full{display:block!important;width:auto;height:51px;max-width:100%;object-fit:contain}
.brand-type .brand-short{display:none!important;width:auto;max-width:100%;object-fit:contain}
@media(max-width:1050px){
  .brand .brand-explorer{height:46px}
  .brand-type .brand-full{height:42px}
}
@media(min-width:681px) and (max-width:900px){
  .brand .brand-explorer{height:39px}
  .brand-type .brand-full{height:37px}
}
@media(max-width:680px){
  .brand{gap:16px}
  .brand .brand-explorer{height:39px;width:auto}
  .brand-type .brand-full{display:none!important}
  .brand-type .brand-short{display:block!important;height:27px}
}
@media (orientation:landscape) and (max-height:500px) and (max-width:950px){
  .brand{gap:16px}
  .brand .brand-explorer{height:39px}
  .brand-type .brand-full{display:none!important}
  .brand-type .brand-short{display:block!important;height:27px}
}
/* Desktop and tablet navigation uses the CASE brand colors without underlines. */
@media (min-width:681px) and (min-height:501px){
  .nav a,.nav a[aria-current=page]{color:#27a9e1;border-bottom:0;text-decoration:none}
  .nav a:hover,.nav a[aria-current=page]:hover,.nav a:focus-visible{color:#00a79d}
}
@media (min-width:951px){
  .nav a,.nav a[aria-current=page]{color:#27a9e1;border-bottom:0;text-decoration:none}
  .nav a:hover,.nav a[aria-current=page]:hover,.nav a:focus-visible{color:#00a79d}
}
/* Align desktop and tablet links with the lower edge of the full logotype. */
@media (min-width:681px) and (min-height:501px){
  .nav{align-self:flex-end;margin-bottom:16px}
  .nav a{padding:0;line-height:1.2}
}
@media (min-width:681px) and (max-width:900px) and (min-height:501px){
  .nav{margin-bottom:24px}
}
@media (min-width:951px) and (max-height:500px){
  .nav{align-self:flex-end;margin-bottom:16px}
  .nav a{padding:0;line-height:1.2}
}
/* Subtle tracking adjustment for the visible desktop and tablet links. */
@media (min-width:681px) and (min-height:501px){.nav a{letter-spacing:-.015em}}
@media (min-width:951px){.nav a{letter-spacing:-.015em}}
/* Phone dropdown links have no leading bullet. */
@media (max-width:680px){
  .nav.open a{padding-left:0}
  .nav.open a::before{content:none}
}
@media (orientation:landscape) and (max-height:500px) and (max-width:950px){
  .nav.open a{padding-left:0}
  .nav.open a::before{content:none}
}
/* Open page layout: centered type on the CASE background. */
body{color:#1c1c1c}
main,.footer{text-align:center}
main h1,main h2,main h3{color:#27a9e1!important}
main :is(p,.lead,small){color:#1c1c1c!important}
main .eyebrow{color:#00a79d}
main :is(.hero .wrap,.intro,.feature>div,.content.wrap,.photo-row>div,.card,.person,.archive,.photo-note){
  background:transparent!important;border:0;border-radius:0;box-shadow:none
}
.hero .wrap{margin-top:0}
.hero-text,.section-head,.copy,.story,.page-hero h1,.page-hero .lead{margin-left:auto;margin-right:auto}
.hero p,.section-head p,.footer p{margin-left:auto;margin-right:auto}
.intro{margin-top:0;margin-bottom:0}
.footer p{color:#fff}
main .workshops h2,main .workshops h3,main .workshops p{color:#fff!important}
main .workshops .eyebrow{color:#fff}
/* The green workshops region meets the blue footer without a separator. */
main:has(> .workshops){margin-bottom:0;padding-bottom:0}
main:has(> .workshops) + .footer{margin-top:0;border-top:0}
/* The phone menu unrolls from the header like a window shade. */
@media (max-width:680px), (orientation:landscape) and (max-height:500px) and (max-width:950px){
  .nav{
    display:flex;position:absolute;top:100%;left:0;right:0;width:100%;
    background:#52a8dc;gap:0;padding:12px clamp(28px,8.5vw,80px) 18px;
    visibility:hidden;pointer-events:none;clip-path:inset(0 0 100% 0);
    transition:clip-path .95s cubic-bezier(.25,.8,.25,1),visibility 0s linear .95s;
  }
  .nav a{color:#fff;font-size:1.15rem;font-weight:400;padding:20px 0;border-bottom:1px solid #ffffff7a}
  .nav a:last-child{border-bottom:0}
  .nav.open{
    visibility:visible;pointer-events:auto;clip-path:inset(0 0 0 0);
    transition:clip-path .95s cubic-bezier(.25,.8,.25,1),visibility 0s;
  }
}
@media (orientation:landscape) and (max-height:500px) and (max-width:950px){
  .nav{padding:8px clamp(28px,8.5vw,80px) 12px}
  .nav a{font-size:1rem;padding:12px 0}
}
@media (prefers-reduced-motion:reduce){
  .nav{transition:none!important}
  .nav.open{transition:none!important}
}
/* Firmer navigation type and even spacing in the phone dropdown. */
.nav a{font-weight:600}
@media (max-width:680px), (orientation:landscape) and (max-height:500px) and (max-width:950px){
  .nav,.nav.open{padding-top:4px;padding-bottom:4px}
  .nav a,.nav.open a,
  .nav a:first-child,.nav.open a:first-child,
  .nav a:last-child,.nav.open a:last-child{
    padding-top:14px;padding-bottom:14px;text-align:center;font-weight:600
  }
  .nav a:hover,.nav a:focus-visible,.nav.open a:hover,.nav.open a:focus-visible{color:#fff}
  .nav a[aria-current=page],.nav.open a[aria-current=page]{color:#e1f3fc}
}
.person small.past-org{margin-top:0}
.people .person .board-link{display:block;color:#00a79d;font-size:.9rem;line-height:1.5;margin-top:0;overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:3px}
.people .person .board-link:hover,.people .person .board-link:focus-visible{color:#27a9e1}
/* Keep field names available to assistive technology without visible labels. */
.feedback-form > label{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0
}
/* The main atrium feature sits just right of the source image midpoint. */
@media (max-width:680px) and (orientation:portrait){
  main .hero img[src="/assets/case-hero.png"]{object-position:58% center}
}
main .people .person{
  background:#fff!important;
  border:0!important;
  border-radius:16px!important;
}
main .people .person-compact{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:24px;
}
main .people .person-founder{display:flex;flex-direction:column;justify-content:center}
.values .value-list{display:grid;gap:28px;margin-top:28px}
.values > p{margin-bottom:0}
.values .value-list h3{font-size:clamp(1.35rem,2vw,1.8rem);margin:0 0 2px}
.values .value-list p{margin:0}
.board-intro{max-width:800px;margin:0 auto 36px}
.board-intro p{font-size:1.1rem;line-height:1.82;margin:0 0 24px}
.board{border-top:0}
/* Tighter rhythm between the About CASE subjects; keep value items as designed. */
main:has(.values) .hero .wrap{padding-bottom:0}
main:has(.values) .hero .wrap p:last-child{margin-bottom:0}
main:has(.values) .content.wrap{padding-top:44px}
main:has(.values) .content > .copy{margin-bottom:44px}
main:has(.values) .content > .copy h2,
main:has(.values) .content > .board h2{margin-top:0}
main:has(.values) .content > .board{padding-top:0}
main:has(.values) .content.wrap{padding-bottom:44px;margin-bottom:0}
main:has(.values) .content > .copy h2,
main:has(.values) .content > .board h2{margin-bottom:0}
main:has(.values) .content > .copy h2 + p{margin-top:0}
/* Balance short final lines in the Conny narrative at each viewport width. */
main .hero:has(img[src="/assets/conny-hero.jpg"]) p{text-wrap:pretty}
main .hero:has(img[src="/assets/conny-hero.jpg"]) .wrap{padding-bottom:44px}
main .hero:has(img[src="/assets/conny-hero.jpg"]) .wrap > p:last-child{margin-bottom:0}
main .values p{text-wrap:pretty}
main:has(.values) .content > .copy:first-child p,
main:has(.values) .board-intro p:first-child{text-wrap:pretty}
/* Footer copyright without the separator, on a blue with readable contrast. */
.footer{background:#2d739f;padding-top:44px}
.footer .legal{border-top:0;margin-top:32px;padding-top:0;color:#e9f7ff}
/* Keep the short feedback invitation evenly wrapped on phone and desktop. */
.footer-grid > div > p{text-wrap:balance}
/* Let the invitation and submission message follow the form width. */
.footer-grid > div > p,.feedback-form .status{width:100%;max-width:none}
/* Keep the three workshop titles in scale with their neighboring sections. */
.workshop-items h3{font-size:clamp(1.75rem,2vw,2rem);line-height:1.3}
/* Balance the longer third overview paragraph at desktop widths. */
@media (min-width:901px){main .hero-text p:nth-of-type(3){text-wrap:balance}}
/* Six Explore highlights follow the supplied alternating image and copy guide. */
.highlights{padding-top:clamp(52px,7vw,100px);padding-bottom:clamp(64px,8vw,110px)}
.highlight{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:clamp(20px,3vw,44px);margin-bottom:44px}
.highlight:last-child{margin-bottom:0}
.highlight img{display:block;width:100%;max-width:470px;aspect-ratio:1;object-fit:cover;border-radius:24px}
.highlight-copy{max-width:530px;text-align:center}
.highlight-copy h2{font-size:clamp(2rem,3.4vw,3.5rem);line-height:1.1;letter-spacing:0;margin:0 0 25px;text-wrap:balance}
.highlight-copy p{font-size:clamp(1.06rem,1.5vw,1.25rem);line-height:1.7;margin:0;text-wrap:pretty}
.highlight:first-child .highlight-copy p{text-wrap:balance}
.highlight:nth-child(5) .highlight-copy p{text-wrap:balance}
.highlight:nth-child(even) .discovery-gallery{order:2}
.highlight:nth-child(even) .highlight-copy{order:1}
.highlight:nth-child(odd) .discovery-gallery,.highlight:nth-child(even) .highlight-copy{justify-self:end}
.highlight:nth-child(odd) .highlight-copy,.highlight:nth-child(even) .discovery-gallery{justify-self:start}
@media(min-width:681px) and (prefers-reduced-motion:no-preference){
  .highlight.will-reveal .discovery-gallery,.highlight.will-reveal .highlight-copy{opacity:0;transition:transform 1.25s cubic-bezier(.22,.65,.26,1),opacity 1.25s ease}
  .highlight.will-reveal .discovery-gallery{transform:translateX(-72px)}
  .highlight.will-reveal .highlight-copy{transform:translateX(72px)}
  .highlight.will-reveal:nth-child(even) .discovery-gallery{transform:translateX(72px)}
  .highlight.will-reveal:nth-child(even) .highlight-copy{transform:translateX(-72px)}
  .highlight.will-reveal.is-visible .discovery-gallery,.highlight.will-reveal.is-visible .highlight-copy{opacity:1;transform:translateX(0)}
}
@media(max-width:680px){
  .highlights{padding-inline:0}
  .highlight{grid-template-columns:1fr;gap:24px}
  .highlight img{max-width:none;border-radius:0}
  .highlight .discovery-gallery,.highlight-copy{justify-self:stretch!important}
  .highlight-copy{padding-inline:22px}
  .highlight:nth-child(even) .discovery-gallery,.highlight:nth-child(even) .highlight-copy{order:initial}
  .highlight-copy h2{margin-bottom:14px}
}
/* Compact the transitions around the highlights and workshops. */
.hero:has(+ .highlights) .wrap{padding-bottom:16px}
.hero:has(+ .highlights) .hero-text p:last-child{margin-bottom:0}
.highlights{padding-top:16px;padding-bottom:60px}
.workshops{margin-top:0;padding-top:44px;padding-bottom:44px}
.workshops h2{margin-top:0;margin-bottom:12px}
.workshops>p{margin-top:0;margin-bottom:0}
.workshop-items{margin-top:16px}
.workshop-items article{padding-top:12px;padding-bottom:0}
.workshop-items p{margin-bottom:0}

/* Give each page title equal breathing room above and below at every viewport. */
main .hero .wrap{padding-top:44px}
main .hero h1{margin:0 0 44px}
main .hero h1 + p{font-size:calc(clamp(1.23rem,1.7vw,1.45rem) + .0625rem);line-height:1.75}

/* Tighter leading keeps wrapped page titles together. */
main .hero h1{line-height:1.04}
/* Keep Conny's desktop narrative free of stranded short final lines. */
@media (min-width:901px){
  main .hero:has(img[src="/assets/conny-hero.jpg"]) p{text-wrap:balance}
}
/* Slightly close this title's visual spacing without changing the other pages. */
/* Conny uses the shared global H1 tracking. */
/* Balance the Understanding value's desktop line endings. */
@media (min-width:901px){main .values .value-list section:nth-child(3) p{text-wrap:balance}}
/* Strengthen the full wordmark and navigation without changing the icon gap. */
@media (min-width:951px){
  .brand-type .brand-full{height:56px}
  .nav a{font-size:1.06rem}
  .nav{margin-bottom:18px}
}
@media (min-width:901px) and (max-width:1050px){
  .brand-type .brand-full{height:46px}
  .nav a{font-size:1rem}
}
@media (min-width:901px) and (max-width:950px) and (min-height:501px){.nav{margin-bottom:20px}}
@media (min-width:681px) and (max-width:900px) and (min-height:501px){
  .brand-type .brand-full{height:39px}
  .nav a{font-size:.92rem}
  .nav{margin-bottom:27px}
}
/* Keep the short Explore headline in two balanced lines across viewports. */
.explore-title span{display:inline}
/* Rebalance the enlarged Explore lead so its final line is not stranded. */
@media (min-width:901px){main .hero-text h1 + p{text-wrap:balance}}

/* Controls only appear when a Discovery section has more than one image. */
.highlight .discovery-gallery{position:relative;width:100%;max-width:470px;aspect-ratio:1;overflow:hidden;border-radius:24px}
.highlight .discovery-gallery img{width:100%;height:100%;max-width:none;object-fit:cover}
.discovery-gallery .gallery-clickable{cursor:pointer}
.gallery-plus{position:absolute;left:16px;bottom:16px;width:48px;height:48px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:rgba(28,28,28,.78);backdrop-filter:blur(5px);color:#fff;font:400 34px/1 Poppins,sans-serif;box-shadow:0 3px 14px #1c1c1c2e;cursor:pointer}
.gallery-plus:hover,.gallery-plus:focus-visible{background:rgba(28,28,28,.94);color:#fff}
.gallery-plus:focus-visible,.discovery-gallery:focus-visible{outline:2px solid #00a79d;outline-offset:3px}
.gallery-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.gallery-caption{position:absolute;bottom:36px;left:50%;z-index:2;transform:translate(-50%,50%);max-width:calc(100% - 144px);padding:7px 16px;color:#fff;font:600 clamp(.9rem,2vw,1.25rem)/1.35 Poppins,sans-serif;text-align:center;white-space:nowrap;pointer-events:none}
.gallery-caption.is-typing::after{content:'|';display:inline-block;margin-left:2px;animation:caption-caret .7s steps(1,end) infinite}
@keyframes caption-caret{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.gallery-caption.is-typing::after{animation:none}}
@media(max-width:680px){.highlight .discovery-gallery{max-width:none;width:calc(100% - 28px);justify-self:center!important;border-radius:24px}.highlight .discovery-gallery img{border-radius:24px}}

/* Keep the single image clipped to the gallery while its background holds the previous frame. */
.gallery-plus{z-index:2}

/* Keep the gallery affordance toward the text on alternating desktop rows. */
@media(min-width:681px){.highlight:nth-child(odd) .gallery-plus{left:auto;right:16px}}

/* Give Conny a balanced editorial break on portrait phones. */
.conny-phone-break{display:none}
@media(max-width:680px) and (orientation:portrait){.conny-phone-break{display:initial}.conny-title-ending{white-space:nowrap}}

/* Split the copyright into two lines on phone layouts only. */
.copyright-phone-break{display:none}
@media(max-width:680px), (orientation:landscape) and (max-height:500px) and (max-width:950px){.copyright-phone-break{display:initial}}

/* Align workshop headings with the supplied mint icons and close up title-to-copy spacing. */
main .workshops .workshop-items h3{color:#c6ffe1!important;margin-bottom:0}
.workshop-items h3+p{margin-top:0}

/* Give each workshop more room while connecting its icon to its title. */
.workshop-items{gap:26px}
.workshop-items img{margin-bottom:4px}

/* Archive photographs stay within the Conny story column. */
main .conny-story-image{width:100%;max-width:780px;margin:40px auto;overflow:hidden;border-radius:24px}
main .conny-story-image img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;margin:0;border-radius:24px}
@media(max-width:680px), (orientation:landscape) and (max-height:500px) and (max-width:950px){
  main .conny-story-image{width:calc(100vw - 28px);max-width:none;margin-left:calc(50% - 50vw + 14px);margin-right:0}
}
/* Center the final advisory-board card on the last row. */
@media(min-width:901px){.people>.person:last-child{grid-column:2}}
@media(min-width:681px) and (max-width:900px){.people>.person:last-child{grid-column:1/-1;width:calc(50% - 7px);justify-self:center}}
@media(min-width:681px) and (prefers-reduced-motion:no-preference){
  .conny-story-image.will-reveal{opacity:0;transform:translateX(-72px);transition:transform 1.25s cubic-bezier(.22,.65,.26,1),opacity 1.25s ease}
  .conny-story-image.will-reveal:nth-of-type(2){transform:translateX(72px)}
  .conny-story-image.will-reveal.is-visible{opacity:1;transform:translateX(0)}
}
@media(max-width:680px){.workshop-items{gap:16px}}

/* Explorer green is the link accent on light surfaces. Colored sections retain contrast. */
main a{color:#00a79d}
.head .nav a{color:#00a79d}
.head .nav a[aria-current=page],.head .nav a:hover,.head .nav a:focus-visible{color:#27a9e1}
.gallery-plus{background:rgba(0,167,157,.88);color:#fff}
.gallery-plus:hover,.gallery-plus:focus-visible{background:#00a79d;color:#fff}

/* A 40px visible circle and 32px plus within a 48px tap target. */
.gallery-plus{left:12px;bottom:12px;width:48px;height:48px;background:transparent;backdrop-filter:none;box-shadow:none;font-size:32px;isolation:isolate}
.gallery-plus::before{content:"";position:absolute;inset:4px;border-radius:50%;background:#00a79d;box-shadow:0 3px 14px #1c1c1c2e;z-index:-1}
.gallery-plus:hover,.gallery-plus:focus-visible{background:transparent}
.gallery-plus:hover::before,.gallery-plus:focus-visible::before{background:#00a79d}
@media(min-width:681px){.highlight:nth-child(odd) .gallery-plus{right:12px}}

/* The phone dropdown uses a deeper Explorer green for readable mint links. */
@media (max-width:680px), (orientation:landscape) and (max-height:500px) and (max-width:950px){
  .nav,.nav.open{background:#439990;padding-left:clamp(22px,5vw,72px);padding-right:clamp(22px,5vw,72px);box-shadow:0 2px 14px #07182714,0 9px 18px #0718274d}
  .nav a,.nav a[aria-current=page]{color:#c6ffe1;padding-left:0;padding-right:0;border-bottom:1px solid #c6ffe1}
  .nav a:last-child,.nav a:last-child[aria-current=page]{border-bottom:0}
  .nav a[aria-current=page],.nav a:hover,.nav a:focus-visible{color:#fff}
  .nav a[aria-current=page]{font-weight:700}
  .head .menu{margin-right:0}
  .nav.open{clip-path:inset(0 0 -40px 0)}
}

/* Tighter leading for the two-line Explore headline. */
main .hero h1.explore-title{line-height:1}

/* Align image and copy centerlines in the alternating desktop/tablet columns. */
@media(min-width:681px){
 .highlight:nth-child(n) .discovery-gallery,.highlight:nth-child(n) .highlight-copy{justify-self:center}
}

/* Keep equal column centerlines within a compact, centered pair. */
@media(min-width:681px){
 .highlight{max-width:1084px;margin-left:auto;margin-right:auto;column-gap:24px}
}

/* Shared caption shading for selected galleries. */
.exhibition-gallery .gallery-caption{background:rgba(28,28,28,.5);border-radius:4px}


.commons-gallery .gallery-caption,.mission-gallery .gallery-caption,.shaded-captions .gallery-caption{background:rgba(28,28,28,.4);border-radius:4px}

/* CASE page headlines and section headings use Poppins ExtraBold. */
h1,h2,h3{font-weight:800}

/* Match the Conny paragraph-to-image spacing at the About introduction. */
main:has(.values) .content.wrap:has(> .conny-story-image:first-child){padding-top:40px}
main:has(.values) .content.wrap > .conny-story-image:first-child{margin-top:0}

/* Keep sliding Discovery content inside the page width. */
.highlights{overflow:hidden;overflow:clip}
.highlight > .discovery-gallery,.highlight > .highlight-copy{min-width:0}

/* Long captions wrap inside their shading with equal side padding. */
.gallery-caption{width:max-content;white-space:normal;overflow-wrap:break-word;text-wrap:balance}

/* Explicit equal insets avoid intrinsic caption sizing differences on Safari. */
.gallery-caption.caption-long{left:72px;right:72px;width:auto;max-width:none;transform:translateY(50%);box-sizing:border-box;white-space:normal;overflow-wrap:anywhere;padding-inline:16px}

/* Captions stay on one line; long labels fit between equal button clearances. */
.gallery-caption{white-space:nowrap;overflow-wrap:normal;text-wrap:nowrap}
.gallery-caption.caption-long{left:50%;right:auto;width:max-content;max-width:calc(100% - 112px);transform:translate(-50%,50%);white-space:nowrap;overflow-wrap:normal}

/* Keep Discovery gallery controls on the right edge on phones. */
@media (max-width:680px), (orientation:landscape) and (max-height:500px) and (max-width:950px){
 .highlight:nth-child(n) .gallery-plus{left:auto;right:12px}
}

/* Fully rounded caption backgrounds for The commons. */
.commons-gallery .gallery-caption{border-radius:999px}

/* Match The commons control circle to its caption pill height. */
.commons-gallery .gallery-plus::before{
 inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);
 width:calc(clamp(1.215rem,2.7vw,1.6875rem) + 14px);
 height:calc(clamp(1.215rem,2.7vw,1.6875rem) + 14px);
}
.commons-gallery .gallery-plus svg{
 width:calc(clamp(.729rem,1.62vw,1.0125rem) + 8.4px);
 height:calc(clamp(.729rem,1.62vw,1.0125rem) + 8.4px);
}

/* Exhibition galleries use solid CASE blue caption pills and matching controls. */
.exhibition-gallery .gallery-caption{background:#27a9e1;border-radius:999px}
.exhibition-gallery .gallery-plus::before{
 inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);
 width:calc(clamp(1.215rem,2.7vw,1.6875rem) + 14px);
 height:calc(clamp(1.215rem,2.7vw,1.6875rem) + 14px);
}
.exhibition-gallery .gallery-plus svg{
 width:calc(clamp(.729rem,1.62vw,1.0125rem) + 8.4px);
 height:calc(clamp(.729rem,1.62vw,1.0125rem) + 8.4px);
}

/* Retail and dining shares the blue pill and scaled next-control treatment. */
.highlight:nth-child(5) .gallery-caption{background:#27a9e1;border-radius:999px}
.highlight:nth-child(5) .gallery-plus::before{
 inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);
 width:calc(clamp(1.215rem,2.7vw,1.6875rem) + 14px);
 height:calc(clamp(1.215rem,2.7vw,1.6875rem) + 14px);
}
.highlight:nth-child(5) .gallery-plus svg{
 width:calc(clamp(.729rem,1.62vw,1.0125rem) + 8.4px);
 height:calc(clamp(.729rem,1.62vw,1.0125rem) + 8.4px);
}

/* Fine menu strokes with the hamburger and X sharing one center. */
.menu-lines{width:24px}
.menu-lines i{width:24px;height:1px;transform-origin:center}

/* Phone menu colors persist through both directions of the window shade. */
@media (max-width:680px), (orientation:landscape) and (max-height:500px) and (max-width:950px){
 .head .nav a{color:#c6ffe1;transition-property:none}
 .head .nav a[aria-current=page],.head .nav a:hover,.head .nav a:focus-visible{color:#fff}
 .head .menu,.head .menu:hover,.head .menu:active,.head .menu:focus{
  appearance:none;-webkit-appearance:none;background:transparent;border:0;border-radius:0;box-shadow:none;
  -webkit-tap-highlight-color:transparent;
 }
 .head .menu:focus-visible{outline:2px solid #00a79d;outline-offset:3px}
}

/* Keep mobile dividers independent of current, tapped, and closing link states. */
@media (max-width:680px), (orientation:landscape) and (max-height:500px) and (max-width:950px){
 .head .nav a,.head .nav.open a,
 .head .nav a[aria-current=page],.head .nav.open a[aria-current=page]{
  border-bottom:1px solid #c6ffe1;-webkit-tap-highlight-color:transparent;
 }
 .head .nav a:last-child,.head .nav.open a:last-child,
 .head .nav a:last-child[aria-current=page],.head .nav.open a:last-child[aria-current=page]{border-bottom:0}
}

/* One phone-only Discovery flip-card trial: The commons. */
.flip-stage,.flip-inner{display:contents}
.flip-toggle{display:none}
@media(max-width:680px){
 .highlight.flip-test .flip-stage{display:block;width:calc(100% - 28px);aspect-ratio:1;justify-self:center;perspective:1200px}
 .highlight.flip-test .flip-inner{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .75s ease-in-out}
 .highlight.flip-test.is-flipped .flip-inner{transform:rotateY(180deg)}
 .highlight.flip-test .discovery-gallery,.highlight.flip-test .highlight-copy{position:absolute;inset:0;width:100%;height:100%;max-width:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:24px;overflow:hidden}
 .highlight.flip-test .highlight-copy{background:#fff;transform:rotateY(180deg);display:flex;align-items:center;justify-content:center;padding:18px}
 .highlight.flip-test .flip-copy-content{width:100%}
 .highlight.flip-test .highlight-copy h2{font-size:24px;line-height:1.15;margin:0 0 12px}
 .highlight.flip-test .highlight-copy p{font-size:clamp(14px,4.1vw,17px);line-height:1.4;margin:0;text-wrap:pretty}
 .highlight.flip-test .flip-toggle{display:grid;left:auto;right:12px;top:12px;bottom:auto;-webkit-tap-highlight-color:transparent}
 .highlight.flip-test .highlight-copy .flip-toggle::before{width:calc(clamp(1.215rem,2.7vw,1.6875rem) + 14px);height:calc(clamp(1.215rem,2.7vw,1.6875rem) + 14px);inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);background:#00a79d}
 .highlight.flip-test .highlight-copy .flip-toggle svg{width:calc(clamp(.729rem,1.62vw,1.0125rem) + 8.4px);height:calc(clamp(.729rem,1.62vw,1.0125rem) + 8.4px)}
}
@media(max-width:680px) and (prefers-reduced-motion:reduce){.highlight.flip-test .flip-inner{transition:none}}

/* Keep photo overlays from showing through the reversed card in Safari. */
@media(max-width:680px){
 .flip-test .discovery-gallery .gallery-caption,.flip-test .discovery-gallery .gallery-plus{visibility:visible;transition:visibility 0s linear .375s}
 .flip-test.is-flipped .discovery-gallery .gallery-caption,.flip-test.is-flipped .discovery-gallery .gallery-plus{visibility:hidden;transition-delay:0s}
}
@media(max-width:680px) and (prefers-reduced-motion:reduce){
 .flip-test .discovery-gallery .gallery-caption,.flip-test .discovery-gallery .gallery-plus{transition:none}
}

/* Keep gallery controls flat, including the flip-card text and close buttons. */
.gallery-plus,.gallery-plus::before{box-shadow:none}

/* Consistent Discovery captions and controls across every category. */
.highlight .discovery-gallery .gallery-caption{background:#27a9e1;border-radius:999px}
.highlight .gallery-plus::before{
 inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);
 width:calc(clamp(1.215rem,2.7vw,1.6875rem) + 14px);
 height:calc(clamp(1.215rem,2.7vw,1.6875rem) + 14px);
 background:#00a79d;box-shadow:none;
}
.highlight .gallery-plus svg{
 width:calc(clamp(.729rem,1.62vw,1.0125rem) + 8.4px);
 height:calc(clamp(.729rem,1.62vw,1.0125rem) + 8.4px);
}
@media(max-width:680px){
 .highlight.flip-test{margin-bottom:44px}
 .highlight.flip-test:last-child{margin-bottom:0}
}

/* Every Discovery next-photo control stays on the lower right. */
.highlight:nth-child(n) .discovery-gallery .gallery-plus:not(.flip-toggle){left:auto;right:12px;bottom:12px}

/* Equal phone spacing between Discovery cards and below the final card. */
@media(max-width:680px){
 .highlight.flip-test{margin-bottom:40px}
 .highlight.flip-test:last-child{margin-bottom:0}
 .highlights{padding-bottom:40px}
}

/* One-line CASE wordmark for desktop and tablet; phone branding stays compact. */
@media (min-width:681px) and (min-height:501px), (min-width:951px){
 header .head{max-width:1370px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,2.3vw,44px);padding:16px clamp(22px,5vw,72px);min-height:88px}
 .head .brand{width:100%;min-width:0;gap:32px;align-items:center}
 .head .brand .brand-explorer{height:56px;width:auto}
 .head .brand-type{flex:0 1 432px;width:432px;max-width:864px;min-width:0}
 .head .brand-type .brand-full{width:432px;height:auto;max-width:100%;display:block!important;transform:translateY(8.24%)}
 .head .nav{align-self:center;margin:0;gap:clamp(16px,2.5vw,48px);transform:translateY(calc(var(--wordmark-height,50px)/2 - .6em))}
 .head .nav a{font-size:1.06rem;line-height:1.2;padding:0}
}

/* Retain the established Explorer icon dimensions with the horizontal wordmark. */
@media (min-width:901px) and (max-width:1050px) and (min-height:501px), (min-width:951px) and (max-width:1050px){
 .head .brand .brand-explorer{height:46px}
 .head .nav a{font-size:1rem}
}
@media (min-width:681px) and (max-width:900px) and (min-height:501px){
 .head .brand .brand-explorer{height:39px}
 .head .nav a{font-size:.92rem}
}


/* Core values: SVGs remain unmodified and transparent. Phone-only card carousel. */
.values .value-icon-wrap,.values .value-dots{display:none}
@media (max-width:680px), (orientation:landscape) and (max-height:500px) and (max-width:950px){
  main .values{max-width:none}
  main .values>h2,main .values>p{max-width:800px;margin-left:auto;margin-right:auto}
  .values .value-list{
    display:flex;
    align-items:stretch;
    gap:24px;
    width:100vw;
    margin:28px 0 0 calc(50% - 50vw);
    padding:4px 11vw 6px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:11vw;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .values .value-list::-webkit-scrollbar{display:none}
  .values .value-card{
    flex:0 0 78vw;
    max-width:330px;
    scroll-snap-align:center;
    scroll-snap-stop:always;
    background:#fff;
    border:0;
    border-radius:20px;
    padding:25px 22px 28px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .values .value-icon-wrap{
    display:grid;
    place-items:center;
    width:158px;
    height:158px;
    margin:0 auto 18px;
    flex:0 0 158px;
    background:transparent;
  }
  .values .value-icon{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    background:transparent;
  }
  .values .value-list h3{margin:0 0 8px;font-size:1.55rem;line-height:1.2;color:#00a79d}
  .values .value-list p{margin:0;color:#1c1c1c;line-height:1.62;font-size:1rem;text-wrap:pretty}
  .values .value-dots{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:0;
    margin:8px auto 0;
  }
  .values .value-dot{
    appearance:none;
    -webkit-appearance:none;
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    padding:0;
    border:0;
    border-radius:50%;
    background:transparent;
    cursor:pointer;
  }
  .values .value-dot::before{
    content:'';
    width:7px;
    height:7px;
    border-radius:50%;
    background:#a7adb3;
    transition:background-color .18s ease;
  }
  .values .value-dot.is-active::before{background:#27a9e1}
  .values .value-dot:focus-visible{outline:2px solid #00a79d;outline-offset:0}
}
@media(prefers-reduced-motion:reduce){
  .values .value-list{scroll-behavior:auto}
  .values .value-dot::before{transition:none}
}

/* ========================================================================== 
   2026-10-09 consolidated CASE design system
   One authoritative visual system for current and future pages.
   Legacy structural rules above are retained only where they define component
   mechanics; typography, spacing, colors, navigation, and responsive behavior
   are standardized here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Global CASE colors, links, and focus states
   -------------------------------------------------------------------------- */
:root{
  --case-blue:#27a9e1;
  --case-green:#00a79d;
  --case-workshop-green:#439990;
  --case-mint:#c6ffe1;
  --case-text:#1c1c1c;
  --case-page:#ebebeb;
}
a:focus-visible,button:focus-visible{outline:2px solid var(--case-green);outline-offset:3px}
main a{color:var(--case-green)}
main a:hover,main a:focus-visible{color:var(--case-blue)}

/* --------------------------------------------------------------------------
   Shared heading hierarchy and body language
   -------------------------------------------------------------------------- */
main h1,main h2,main h3{font-family:Poppins,sans-serif;font-weight:800;color:var(--case-blue)}
main p{font-family:Poppins,sans-serif;color:var(--case-text)}
main h2{margin-top:0;margin-bottom:0}
main h2 + p{margin-top:0}

.hero .hero-text{max-width:none}
main .hero .hero-lead,
main .hero h1 + .hero-lead{
  max-width:820px;
  margin-left:auto;
  margin-right:auto;
  font-family:Poppins,sans-serif;
  font-weight:300;
  letter-spacing:.012em;
  color:var(--case-text)!important;
  text-wrap:pretty;
}
.hero-callouts{max-width:820px;margin-left:auto;margin-right:auto;display:grid}
.hero-callout{margin:0}
.hero-callout h2,.hero-callout p{margin-left:auto;margin-right:auto}

/* Generic reusable component-description style. */
.description-text{font-family:Poppins,sans-serif;font-weight:400;letter-spacing:0;color:var(--case-text)}

/* --------------------------------------------------------------------------
   Navigation — locked global component
   Green = actionable; blue = current/active on desktop/tablet.
   Phone retains the established mint/white window-shade treatment.
   -------------------------------------------------------------------------- */
.nav a,.head .nav a{font-family:Poppins,sans-serif;font-weight:700;text-decoration:none}

@media (min-width:681px) and (min-height:501px), (min-width:951px){
  .head .nav a,.head .nav a[aria-current=page]{
    color:var(--case-green);
    border-bottom:0;
    transition:color .25s ease-in-out;
  }
  .head .nav a:hover,.head .nav a:focus-visible,.head .nav a[aria-current=page]{color:var(--case-blue)}
  .head .nav{background:transparent;visibility:visible;pointer-events:auto;clip-path:none}
}
@media (min-width:951px){.head .nav a{font-size:17px}}
@media (min-width:681px) and (max-width:950px) and (min-height:501px){.head .nav a{font-size:15px}}

@media (max-width:680px), (orientation:landscape) and (max-height:500px) and (max-width:950px){
  .head .nav{
    display:flex;
    position:absolute;
    top:100%;left:0;right:0;width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:4px 24px;
    background:var(--case-workshop-green);
    box-shadow:0 2px 14px #07182714,0 9px 18px #0718274d;
    visibility:hidden;
    pointer-events:none;
    clip-path:inset(0 0 100% 0);
    transition:clip-path .95s cubic-bezier(.25,.8,.25,1),visibility 0s linear .95s;
  }
  .head .nav.open{
    visibility:visible;
    pointer-events:auto;
    clip-path:inset(0 0 -40px 0);
    transition:clip-path .95s cubic-bezier(.25,.8,.25,1),visibility 0s;
  }
  .head .nav a,.head .nav.open a,
  .head .nav a:hover,.head .nav a:focus-visible,
  .head .nav a[aria-current=page],.head .nav.open a[aria-current=page]{
    font-size:18px;
    font-weight:700;
    line-height:1.2;
    text-align:center;
    padding:14px 0;
    color:var(--case-mint);
    border-bottom:1px solid var(--case-mint);
    transition:none!important;
    -webkit-tap-highlight-color:transparent;
  }
  .head .nav a[aria-current=page],.head .nav.open a[aria-current=page]{color:#fff}
  .head .nav a:last-child,.head .nav.open a:last-child,
  .head .nav a:last-child[aria-current=page],.head .nav.open a:last-child[aria-current=page]{border-bottom:0}
  .head .menu{color:var(--case-blue);margin-right:0}
  .head .menu[aria-expanded="true"]{color:var(--case-green)}
  .head .menu,.head .menu:hover,.head .menu:active,.head .menu:focus{
    appearance:none;-webkit-appearance:none;background:transparent;border:0;border-radius:0;box-shadow:none;
    -webkit-tap-highlight-color:transparent;
  }
  .head .menu:focus-visible{outline:2px solid var(--case-green);outline-offset:3px}
}
@media (prefers-reduced-motion:reduce){
  .head .nav,.head .nav.open{transition:none!important}
  .head .nav a{transition:none!important}
}

/* --------------------------------------------------------------------------
   Desktop + tablet system
   44px is the shared major spacing unit and image/text gap.
   -------------------------------------------------------------------------- */
@media (min-width:681px) and (min-height:501px), (min-width:951px){
  /* H1 — page title */
  main .hero h1{
    font-size:clamp(2.5rem,4.6vw,4.6rem)!important;
    font-weight:800!important;
    line-height:1.04!important;
    letter-spacing:-.01em!important;
    color:var(--case-blue)!important;
    text-align:center;
    margin:0 0 44px!important;
  }
  /* Lead paragraph */
  main .hero .hero-lead,main .hero h1 + .hero-lead{
    font-size:24px!important;
    line-height:48px!important;
    font-weight:300!important;
    letter-spacing:.012em!important;
    color:var(--case-text)!important;
    margin-top:0!important;
    margin-bottom:0!important;
  }
  /* H2 */
  main h2{
    font-size:clamp(2rem,2.55vw,2.625rem)!important;
    font-weight:800!important;
    line-height:48px!important;
    letter-spacing:0!important;
    color:var(--case-blue)!important;
  }
  /* Body */
  main p{
    font-size:18px!important;
    font-weight:400!important;
    line-height:32px!important;
    letter-spacing:0!important;
    color:var(--case-text)!important;
  }

  /* Hero text lives on the full design width; lead/callouts remain readable. */
  main .hero .wrap{
    width:100%;
    max-width:1370px;
    padding-top:44px!important;
    padding-bottom:44px!important;
    padding-left:clamp(22px,5vw,72px)!important;
    padding-right:clamp(22px,5vw,72px)!important;
  }
  .hero-callouts{margin-top:44px!important;gap:44px!important}
  .hero-callout h2,.hero-callout p{margin:0!important}

  /* General content rhythm. */
  main .content.wrap{padding-top:0!important;padding-bottom:44px!important}
  main .content > .copy{margin:0 0 44px!important}
  main .content > .copy:last-of-type{margin-bottom:44px!important}
  main .board{padding-top:0!important}

  /* Discovery: 44px image/text gap and 44px between rows. */
  .highlights{padding-top:0!important;padding-bottom:44px!important}
  .highlight{column-gap:44px!important;margin-bottom:44px!important}
  .highlight:last-child{margin-bottom:0!important}
  .highlight-copy h2,.highlight-copy p{margin:0!important}

  /* Conny/About editorial images and narrative use the same 44px rhythm. */
  main .conny-story-image{margin-top:44px!important;margin-bottom:44px!important}
  main .hero > .wrap > p:not(.hero-lead){max-width:850px;margin-left:auto!important;margin-right:auto!important;margin-top:0!important;margin-bottom:0!important}
  main .hero > .wrap > p:not(.hero-lead) + p:not(.hero-lead){margin-top:44px!important}
  main .hero > .wrap > .hero-lead + .conny-story-image{margin-top:44px!important}
  main .hero > .wrap > .conny-story-image + p:not(.hero-lead){margin-top:0!important}

  /* Core Values: open 3-over-2 composition, seven authored lines, no widows. */
  main .values > p{max-width:980px!important;margin:0 auto!important;text-wrap:balance}
  .values .value-list{
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    column-gap:44px!important;
    row-gap:44px!important;
    max-width:1120px!important;
    margin:44px auto 0!important;
  }
  .values .value-card{background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;text-align:center}
  .values .value-card[data-value-index="0"]{grid-column:1 / 3!important}
  .values .value-card[data-value-index="1"]{grid-column:3 / 5!important}
  .values .value-card[data-value-index="2"]{grid-column:5 / 7!important}
  .values .value-card[data-value-index="3"]{grid-column:2 / 4!important}
  .values .value-card[data-value-index="4"]{grid-column:4 / 6!important}
  .values .value-icon-wrap{display:grid!important;place-items:center;width:158px;height:158px;margin:0 auto 18px!important;background:transparent}
  .values .value-icon{display:block;width:100%;height:100%;object-fit:contain;background:transparent}
  .values .value-card[data-value-index="1"] .value-icon{width:96%;height:96%}
  .values .value-card[data-value-index="2"] .value-icon{width:103%;height:103%}
  .values .value-card[data-value-index="3"] .value-icon{width:108%;height:108%}
  .values .value-list h3{margin:0 0 8px!important;font-size:clamp(1.35rem,2vw,1.8rem);line-height:1.2;color:var(--case-blue)!important}
  .values .value-card p{width:100%!important;max-width:340px!important;margin:0 auto!important;font-size:18px!important;line-height:32px!important;text-wrap:wrap!important}
  .values .value-line{display:block!important;white-space:nowrap!important}
  .values .value-dots{display:none!important}

  /* Advisory Board component. */
  .board-intro{max-width:860px;margin:0 auto}
  .board-intro p{margin:0!important}
  .board-intro p + p{margin-top:16px!important}
  main .people{gap:16px!important;margin-top:32px!important}
  main .people .person{
    background:#fff!important;
    border:0!important;
    border-radius:16px!important;
    padding:44px 24px!important;
  }
  main .people .person h3{
    font-size:20px!important;
    font-weight:800!important;
    line-height:25px!important;
    letter-spacing:.015em!important;
    text-transform:uppercase!important;
    color:var(--case-blue)!important;
    margin:0 0 10px!important;
  }
  main .people .person > p{
    font-size:16px!important;
    font-weight:400!important;
    line-height:24px!important;
    letter-spacing:0!important;
    color:var(--case-text)!important;
    margin:0!important;
  }
  main .people .person > small{
    font-size:14px!important;
    font-weight:400!important;
    line-height:21px!important;
    letter-spacing:0!important;
    color:var(--case-text)!important;
  }
  .people .person .board-link{color:var(--case-green);font-size:14px;line-height:21px;font-weight:400}

  /* Explorer Workshops: global typography, contextual inverse colors. */
  main .workshops{padding-top:44px!important;padding-bottom:44px!important}
  main .workshops > h2{color:#fff!important;margin:0!important}
  main .workshops > p{color:#fff!important;margin:0!important}
  .workshop-items{margin-top:32px!important}
  main .workshops .workshop-items h3{color:var(--case-mint)!important}
  main .workshops .workshop-items p{color:#fff!important}

  /* Feedback H1 uses the same global H1 type with contextual white. */
  .footer .feedback-title{
    font-family:Poppins,sans-serif;
    font-size:clamp(2.2rem,4vw,4rem)!important;
    font-weight:800!important;
    line-height:1.04!important;
    letter-spacing:-.01em!important;
    color:#fff!important;
    margin:0 0 44px!important;
  }
}

/* --------------------------------------------------------------------------
   Phone system
   44px = between major sections
   32px = within a section / photo-based sequences
   24px = left/right page inset
   16px = minimum internal component spacing
   -------------------------------------------------------------------------- */
@media (max-width:680px), (orientation:landscape) and (max-height:500px) and (max-width:950px){
  main .wrap,.footer .wrap{padding-left:24px!important;padding-right:24px!important}
  main .hero .wrap{padding-top:44px!important;padding-bottom:44px!important}

  /* H1 */
  main .hero h1{
    font-size:48px!important;
    font-weight:800!important;
    line-height:50px!important;
    letter-spacing:-.018em!important;
    color:var(--case-blue)!important;
    text-align:center;
    margin:0 0 44px!important;
  }
  /* Lead — preserve the approved phone appearance. */
  main .hero .hero-lead,main .hero h1 + .hero-lead{
    font-size:22px!important;
    font-weight:300!important;
    line-height:36px!important;
    letter-spacing:.01em!important;
    color:var(--case-text)!important;
    margin:0 auto!important;
  }
  /* H2 */
  main h2{
    font-size:32px!important;
    font-weight:800!important;
    line-height:42px!important;
    letter-spacing:0!important;
    color:var(--case-blue)!important;
    margin:0!important;
  }
  main h2 + p{margin-top:0!important}
  /* Body */
  main p{
    font-size:20px!important;
    font-weight:400!important;
    line-height:32px!important;
    letter-spacing:0!important;
    color:var(--case-text)!important;
  }
  .description-text{font-size:18px;line-height:28px}

  /* Major overview blocks. */
  .hero-callouts{margin-top:44px!important;gap:44px!important}
  .hero-callout h2,.hero-callout p{margin:0!important}

  /* About/standard content — 44px between major text sections. */
  main .content.wrap{padding-top:0!important;padding-bottom:44px!important}
  main .content.wrap > .copy,main .content.wrap > .board,main .content.wrap > .conny-story-image{margin-top:0!important;margin-bottom:0!important}
  main .content.wrap > * + *{margin-top:32px!important}
  main .content.wrap > .copy + .copy{margin-top:44px!important}
  main .content.wrap > .board{margin-top:44px!important;padding-top:0!important}
  main .copy > h2 + p,main .values > h2 + p,main .board > h2 + .board-intro{margin-top:0!important}

  /* About and Conny editorial images use global 24px inset and 32px internal rhythm. */
  main .content.wrap > .conny-story-image,main .hero .wrap > .conny-story-image{
    width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important;
  }
  main .hero .wrap > p:not(.hero-lead){margin:0!important}
  main .hero .wrap > p:not(.hero-lead) + p:not(.hero-lead){margin-top:32px!important}
  main .hero .wrap > .hero-lead + .conny-story-image{margin-top:32px!important;margin-bottom:32px!important}
  main .hero .wrap > p:not(.hero-lead) + .conny-story-image{margin-top:32px!important;margin-bottom:32px!important}
  main .hero .wrap > .conny-story-image + p:not(.hero-lead){margin-top:0!important}

  /* Core Values carousel. */
  main .values{max-width:none}
  main .values > h2,main .values > p{max-width:800px;margin-left:auto;margin-right:auto}
  .values .value-list{
    display:flex!important;
    align-items:flex-start!important;
    gap:24px!important;
    width:100vw!important;
    margin:32px 0 0 calc(50% - 50vw)!important;
    padding:4px 11vw 6px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:11vw;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .values .value-list::-webkit-scrollbar{display:none}
  .values .value-card{
    flex:0 0 78vw!important;
    max-width:330px!important;
    min-height:0!important;
    scroll-snap-align:center;
    scroll-snap-stop:always;
    background:#fff!important;
    border:0!important;
    border-radius:20px!important;
    box-shadow:none!important;
    box-sizing:border-box!important;
    padding:32px!important;
    text-align:center;
    display:flex!important;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start!important;
  }
  .values .value-icon-wrap{display:grid!important;place-items:center;width:158px;height:158px;flex:0 0 158px;margin:0 auto 24px!important;background:transparent}
  .values .value-icon{display:block;width:100%;height:100%;object-fit:contain;background:transparent}
  .values .value-card[data-value-index="1"] .value-icon{width:96%;height:96%}
  .values .value-card[data-value-index="2"] .value-icon{width:103%;height:103%}
  .values .value-card[data-value-index="3"] .value-icon{width:108%;height:108%}
  .values .value-list h3{margin:0 0 8px!important;font-size:25px;line-height:30px;color:var(--case-blue)!important}
  .values .value-list p{
    font-size:18px!important;
    line-height:28px!important;
    font-weight:400!important;
    letter-spacing:0!important;
    color:var(--case-text)!important;
    margin:0!important;
    text-wrap:pretty;
  }
  .values .value-line{display:inline!important;white-space:normal!important}
  .values .value-dots{display:flex!important;justify-content:center;align-items:center;margin:16px auto 0!important}
  .values .value-dot{width:32px;height:32px;margin-inline:-4px}
  .values .value-dot::before{width:12px;height:12px}

  /* Advisory Board — vertical scroll, no carousel. */
  main .people{display:grid!important;grid-template-columns:1fr!important;gap:16px!important;margin-top:32px!important}
  main .people .person{
    background:#fff!important;
    border:0!important;
    border-radius:16px!important;
    padding:32px 24px!important;
  }
  main .people .person h3{
    font-size:20px!important;
    font-weight:800!important;
    line-height:25px!important;
    letter-spacing:.015em!important;
    text-transform:uppercase!important;
    color:var(--case-blue)!important;
    margin:0 0 10px!important;
  }
  main .people .person > p{
    font-size:16px!important;
    font-weight:400!important;
    line-height:24px!important;
    letter-spacing:0!important;
    color:var(--case-text)!important;
    margin:0!important;
  }
  main .people .person > small{
    font-size:14px!important;
    font-weight:400!important;
    line-height:21px!important;
    letter-spacing:0!important;
    color:var(--case-text)!important;
  }
  .people .person .board-link{color:var(--case-green);font-size:14px;line-height:21px;font-weight:400}
  .board-intro p{margin:0!important}
  .board-intro p + p{margin-top:32px!important}

  /* Explorer Workshops. */
  main .workshops{
    width:100%!important;
    max-width:none!important;
    margin-top:0!important;
    padding:32px 24px!important;
    overflow:hidden;
  }
  main .workshops > h2{color:#fff!important;margin:0!important}
  main .workshops > p{
    font-size:20px!important;
    line-height:32px!important;
    font-weight:400!important;
    letter-spacing:0!important;
    color:#fff!important;
    margin:0!important;
  }
  .workshops .workshop-items{
    display:flex!important;
    align-items:stretch!important;
    gap:24px!important;
    width:100vw!important;
    margin:32px 0 0 calc(50% - 50vw)!important;
    padding:4px 11vw 7px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:11vw;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .workshops .workshop-items::-webkit-scrollbar{display:none}
  .workshops .workshop-items > article{
    flex:0 0 78vw!important;
    max-width:330px!important;
    min-height:380px!important;
    scroll-snap-align:center;
    scroll-snap-stop:always;
    border:1px solid var(--case-mint)!important;
    border-radius:20px!important;
    background:var(--case-workshop-green)!important;
    box-shadow:none!important;
    padding:32px 24px!important;
    display:flex!important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
  }
  .workshops .workshop-items img{height:104px;flex:0 0 auto;margin-bottom:24px!important}
  main .workshops .workshop-items h3{color:var(--case-mint)!important;margin:0 0 8px!important}
  .workshops .workshop-items p{
    font-size:18px!important;
    line-height:28px!important;
    font-weight:400!important;
    letter-spacing:0!important;
    color:#fff!important;
    margin:0!important;
  }
  .workshop-dots{display:flex!important;justify-content:center;align-items:center;margin:16px auto 0!important}
  .workshop-dot{width:32px;height:32px;margin-inline:-4px;padding:0;border:0;background:transparent;appearance:none;-webkit-appearance:none;display:grid;place-items:center}
  .workshop-dot::before{content:"";display:block;width:12px;height:12px;border:2px solid var(--case-mint);border-radius:50%;box-sizing:border-box;background:transparent}
  .workshop-dot.is-active::before{background:var(--case-mint)}

  /* Feedback H1 and invitation copy. */
  .footer .feedback-title{
    font-family:Poppins,sans-serif;
    font-size:48px!important;
    font-weight:800!important;
    line-height:50px!important;
    letter-spacing:-.018em!important;
    color:#fff!important;
    margin:0 0 32px!important;
  }
  .footer-grid > div > p{font-family:Poppins,sans-serif;font-size:20px!important;font-weight:400!important;line-height:32px!important;letter-spacing:0!important;color:#fff!important}
}

/* --------------------------------------------------------------------------
   Phone-only Discovery flip cards
   Desktop/tablet retain the normal side-by-side Discovery layout.
   -------------------------------------------------------------------------- */
@media (max-width:680px){
  .highlights{padding-top:0!important;padding-bottom:44px!important}
  .highlight.flip-test{margin-bottom:32px!important}
  .highlight.flip-test:last-child{margin-bottom:0!important}
  .highlight.flip-test .flip-stage{display:block;width:100%!important;aspect-ratio:1;justify-self:center;perspective:1200px}
  .highlight.flip-test .flip-inner{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .75s ease-in-out}
  .highlight.flip-test.is-flipped .flip-inner{transform:rotateY(180deg)}
  .highlight.flip-test .discovery-gallery,.highlight.flip-test .highlight-copy{
    position:absolute;inset:0;width:100%;height:100%;max-width:none;
    backface-visibility:hidden;-webkit-backface-visibility:hidden;
    border-radius:24px;overflow:hidden;
  }
  .highlight.flip-test .highlight-copy{
    background:#fff;
    transform:rotateY(180deg);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:72px 24px 24px!important;
  }
  .highlight.flip-test .flip-copy-content{width:100%;transform:translateY(5px)}
  .highlight.flip-test .highlight-copy h2{
    font-size:24px!important;
    line-height:28px!important;
    margin:0 0 12px!important;
    padding-right:0;
  }
  .highlight.flip-test .highlight-copy p{
    font-size:16.5px!important;
    line-height:1.4!important;
    margin:0!important;
    text-wrap:pretty;
  }

  /* 48px touch target, 42px visible circle, 24px icon. */
  .highlight .gallery-plus,.highlight.flip-test .flip-toggle{
    width:48px!important;height:48px!important;padding:0!important;
  }
  .highlight .gallery-plus::before,.highlight.flip-test .highlight-copy .flip-toggle::before{
    inset:auto!important;
    left:50%!important;top:50%!important;
    transform:translate(-50%,-50%)!important;
    width:42px!important;height:42px!important;
    background:var(--case-green)!important;
    box-shadow:none!important;
  }
  .highlight .gallery-plus svg,.highlight.flip-test .highlight-copy .flip-toggle svg{width:24px!important;height:24px!important}
  .highlight.flip-test .flip-toggle{display:grid!important;left:auto!important;right:12px!important;top:12px!important;bottom:auto!important;-webkit-tap-highlight-color:transparent}
  .highlight:nth-child(n) .discovery-gallery .gallery-plus:not(.flip-toggle){left:auto!important;right:12px!important;bottom:12px!important}

  /* Phone caption pill: 42px high, optically centered, and held 12px off the card edge. */
  .highlight .discovery-gallery .gallery-caption,
  .highlight .discovery-gallery .gallery-caption.caption-long{
    left:50%!important;
    right:auto!important;
    bottom:12px!important;
    transform:translateX(-50%)!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    height:42px!important;
    min-height:42px!important;
    width:max-content!important;
    max-width:calc(100% - 112px)!important;
    box-sizing:border-box!important;
    padding:0 16px!important;
    border-radius:999px!important;
    background:var(--case-blue)!important;
    color:#fff!important;
    font-family:Poppins,sans-serif!important;
    font-size:16px;
    font-weight:600!important;
    line-height:1!important;
    text-align:center!important;
    text-indent:0!important;
    white-space:nowrap!important;
  }

  /* Photo overlays disappear cleanly while the text side is visible. */
  .flip-test .discovery-gallery .gallery-caption,.flip-test .discovery-gallery .gallery-plus{visibility:visible;transition:visibility 0s linear .375s}
  .flip-test.is-flipped .discovery-gallery .gallery-caption,.flip-test.is-flipped .discovery-gallery .gallery-plus{visibility:hidden;transition-delay:0s}
}

/* Footer/legal cleanup retained across breakpoints. */
.footer .legal{display:flex;justify-content:center;text-align:center;color:#cfeeff}
.footer .legal span{margin:0}

/* Keep the path-aware hero positioning in this deployment. */
@media (max-width:680px) and (orientation:portrait){main .hero img[src$="/case-hero.png"]{object-position:58% center}}

@media (prefers-reduced-motion:reduce){
  .workshops .workshop-items,.values .value-list{scroll-behavior:auto!important}
  .highlight.flip-test .flip-inner{transition:none!important}
  .flip-test .discovery-gallery .gallery-caption,.flip-test .discovery-gallery .gallery-plus{transition:none!important}
}

/* --------------------------------------------------------------------------
   Review Round 8 — phone image scale and carousel spacing
   -------------------------------------------------------------------------- */
@media (max-width:680px){
  /* Restore the original shallow 14px image/card inset while keeping text at 24px. */
  .highlights.wrap{padding-left:0!important;padding-right:0!important}
  .highlight.flip-test .flip-stage{width:calc(100% - 28px)!important}
  main .content.wrap > .conny-story-image,
  main .hero .wrap > .conny-story-image{
    width:calc(100vw - 28px)!important;
    max-width:none!important;
    margin-left:calc(50% - 50vw + 14px)!important;
    margin-right:0!important;
  }

  /* Balance the Core Values card vertically: less air above the icon, more below the copy. */
  .values .value-card{padding:24px 32px 32px!important}


  /* Keep all Core Values cards the same height. The track stretches every card
     to the height of the tallest revised value, avoiding a changing carousel height. */
  .values .value-list{align-items:stretch!important}
  .values .value-card{min-height:0!important;height:auto!important}

  /* Give the pagination a clear pause before the Advisory Board image. */
  main .content.wrap > .values + .conny-story-image{margin-top:44px!important}

  /* Center workshop pagination more evenly between the card and section bottom. */
  .workshop-dots{margin:32px auto 0!important}

  /* Visible 42px circles sit exactly 12px from the frame edges inside 48px touch targets. */
  .highlight.flip-test .flip-toggle{right:9px!important;top:9px!important}
  .highlight:nth-child(n) .discovery-gallery .gallery-plus:not(.flip-toggle){right:9px!important;bottom:9px!important}
}

/* --------------------------------------------------------------------------
   Review Round 9 — verified typography, centering, and spacing corrections
   -------------------------------------------------------------------------- */
@media (min-width:681px) and (min-height:501px), (min-width:951px){
  /* Page intro typography and optical spacing. */
  main .hero .hero-lead,
  main .hero h1 + .hero-lead{
    font-size:24px!important;
    line-height:56px!important;
  }
  main .hero h1{margin-bottom:28px!important}

  /* Standard desktop/tablet body copy. */
  main p{
    font-size:20px!important;
    line-height:40px!important;
  }

  /* Center About CASE text blocks without allowing vertical margin rules to
     overwrite horizontal auto margins. */
  main .content.wrap > .copy{
    width:100%;
    max-width:800px;
    margin-inline:auto!important;
    margin-block:0!important;
  }
  main .content.wrap > .copy + .copy{margin-top:44px!important}
  main .content.wrap > .copy h2{margin:0 0 16px!important}
  main .content.wrap > .copy p{margin:0!important}

  /* One controlled 44px transition between the About hero text and Moon image.
     The hero already supplies the 44px lower padding, so the first image adds none. */
  main:has(.values) .content.wrap > .conny-story-image:first-child{
    margin-top:0!important;
  }

  /* Keep subsequent major About elements on one 44px rhythm. */
  main:has(.values) .content.wrap > .conny-story-image,
  main:has(.values) .content.wrap > .board{
    margin-inline:auto!important;
  }

  /* Core Values: full centered 3-over-2 grid. The values section must be wider
     than ordinary copy so its authored lines cannot intrude into adjacent cards. */
  main .content.wrap > .copy.values{
    width:100%;
    max-width:1120px!important;
    margin-inline:auto!important;
  }
  main .values > h2,
  main .values > p{
    max-width:800px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  main .values > h2{margin-top:0!important;margin-bottom:16px!important}
  main .values > p{margin-top:0!important;margin-bottom:0!important}
  .values .value-list{
    width:100%!important;
    max-width:1120px!important;
    margin:44px auto 0!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    column-gap:44px!important;
    row-gap:44px!important;
  }
  .values .value-card{min-width:0!important}
  .values .value-card p{
    max-width:none!important;
    font-size:20px!important;
    line-height:40px!important;
  }

  /* Explorer Workshops intro: centered and separated from its H2 by 16px. */
  main .workshops > h2{margin:0 0 16px!important}
  main .workshops > p{
    width:100%;
    max-width:1200px!important;
    margin:0 auto!important;
    text-align:center!important;
    font-size:20px!important;
    line-height:40px!important;
  }

  /* Feedback intro sits evenly between heading and form. */
  .footer .feedback-title{margin:0 0 44px!important}
  .footer-grid > div > p{margin:0!important}
  .footer .feedback-form{margin-top:44px!important}
}

/* Round 9 — About CASE Moon image spacing: one 44px rhythm above and below. */
@media (max-width:680px), (orientation:landscape) and (max-height:500px) and (max-width:950px){
  /* The hero's 44px bottom padding supplies the space above the first Moon image. */
  main:has(.values) .content.wrap > .conny-story-image:first-child{margin-top:0!important;margin-bottom:0!important}
  /* Match that same 44px visible gap below the image before Our mission. */
  main:has(.values) .content.wrap > .conny-story-image:first-child + .copy{margin-top:44px!important}
}

/* Round 9 — phone Core Values pagination: geometric vertical centering.
   The value track has 6px bottom padding, the pagination control is 32px tall,
   and the Advisory Board image begins 44px after the values section. A 38px
   top margin places the dot center 60px from both the card bottom and image top. */
@media (max-width:680px){
  .values .value-dots{margin:38px auto 0!important}
  main .content.wrap > .values + .conny-story-image{margin-top:44px!important}
}

/* --------------------------------------------------------------------------
   Review Round 9 — final pre-package audit corrections
   -------------------------------------------------------------------------- */
@media (max-width:680px), (orientation:landscape) and (max-height:500px) and (max-width:950px){
  /* One shared phone intro rhythm on Explore, About CASE, and Conny:
     match the structural space above and below H1. */
  main .hero .wrap{padding-top:44px!important}
  main .hero h1{margin-bottom:44px!important}

  /* Feedback: keep the invitation exactly midway between title and form. */
  .footer .feedback-title{margin-bottom:32px!important}
  .footer .feedback-form{margin-top:32px!important}
}

@media (max-width:680px){
  /* Discovery flip backs: center the H2 + description as one group.
     Typography remains unchanged; the close control stays independently inset. */
  .highlight.flip-test .highlight-copy{
    padding:24px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .highlight.flip-test .flip-copy-content{transform:none!important;width:100%!important}

  /* Workshop carousel: shorter equal-height cards with true vertical centering. */
  .workshops .workshop-items > article{
    min-height:330px!important;
    padding:20px 24px!important;
    justify-content:center!important;
  }
}


/* --------------------------------------------------------------------------
   Review Round 10 — desktop refinement pass
   -------------------------------------------------------------------------- */
@media (min-width:681px) and (min-height:501px), (min-width:951px){
  /* A new section should read as a deliberate break before Discovery. */
  main .hero:has(+ .highlights) .wrap{padding-bottom:60px!important}

  /* Keep the Core Values intro on the same page centerline as Mission/Vision. */
  main .values > h2,
  main .values > p{
    width:100%!important;
    max-width:800px!important;
    margin-inline:auto!important;
    text-align:center!important;
  }

}

/* Round 10: let presentation graphics carry more visual weight on desktop. */
@media (min-width:901px){
  main .conny-story-image{max-width:960px}
}


/* --------------------------------------------------------------------------
   Review Round 10 — final desktop + phone refinements
   -------------------------------------------------------------------------- */
@media (min-width:681px) and (min-height:501px), (min-width:951px){
  /* Match the established text-to-next-element rhythm below Advisory Board intro. */
  main .board .people{margin-top:44px!important}
}

@media (max-width:680px){
  /* Keep workshop card size fixed; tighten only the internal icon/title/copy rhythm. */
  .workshops .workshop-items img{margin-bottom:12px!important}
  main .workshops .workshop-items h3{margin-bottom:4px!important}
  /* About CASE phone: Core Values heading sits directly with its intro copy. */
  main:has(.values) .values .values-intro > h2{margin-bottom:0!important}
}


/* Round 10 review correction — Core Values intro uses its own centered wrapper.
   This removes it from competing .copy width/margin rules once and for all. */
.values .values-intro{
  width:100%;
  max-width:800px;
  margin:0 auto;
  text-align:center;
}
.values .values-intro h2{margin:0 0 16px!important}
.values .values-intro p{margin:0!important;text-wrap:pretty}
@media (min-width:681px) and (min-height:501px), (min-width:951px){
  .values .values-intro{width:min(800px,100%)!important;margin-inline:auto!important}
}


/* --------------------------------------------------------------------------
   Review Round 12 — tablet/desktop About CASE heading rhythm
   Mission, Vision, and Core Values H2s sit directly with their body copy;
   line-height supplies the visual breathing room, so no added margin is stacked.
   -------------------------------------------------------------------------- */
@media (min-width:681px) and (min-height:501px){
  main:has(.values) .content.wrap > .copy:not(.values) > h2{margin-bottom:0!important}
  main:has(.values) .values .values-intro > h2{margin-bottom:0!important}
}

/* Round 12 — Core Values icon geometry.
   Every icon uses the same centered 158x158 image box. Optical normalization
   is scale-only, centered on the shared box, so scaling cannot shift alignment. */
.values .value-icon{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  transform-origin:50% 50%;
}
.values .value-card[data-value-index="0"] .value-icon{transform:scale(1)}
.values .value-card[data-value-index="1"] .value-icon{transform:scale(.96)}
.values .value-card[data-value-index="2"] .value-icon{transform:scale(1.03)}
.values .value-card[data-value-index="3"] .value-icon{transform:scale(1.08)}
.values .value-card[data-value-index="4"] .value-icon{transform:scale(1)}


/* Round 12 — tablet Workshop descriptions: preserve a consistent four-line rhythm.
   The authored line breaks apply only at tablet widths; desktop and phone remain fluid. */
.tablet-workshop-line{display:inline}
@media (min-width:681px) and (max-width:1100px) and (min-height:501px){
  .workshops .workshop-items p .tablet-workshop-line{
    display:block;
    white-space:nowrap;
  }
}