.portfolio-shell{position:relative;margin-top:11vh}
.project-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.project-track::-webkit-scrollbar{display:none}
.project-track .project{flex:0 0 100%;margin-top:0;scroll-snap-align:start}
.portfolio-arrow{position:absolute;z-index:8;top:50%;display:grid;place-items:center;width:64px;height:88px;padding:0;transform:translateY(-50%);border:0;background:transparent;color:#000;font:700 5rem/1 Arial,sans-serif;cursor:pointer;text-shadow:0 1px 8px #fff}
.portfolio-prev{left:1.5vw}
.portfolio-next{right:1.5vw}
.portfolio-arrow:disabled{opacity:.2;cursor:default}
.contact-side>p{font-size:1.15rem;line-height:1.55}
.contact form{margin-top:38px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-field{margin-bottom:20px}
.contact label{display:block;margin-bottom:8px;font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.contact input,.contact textarea{width:100%;padding:14px 0;border:0;border-bottom:1px solid #11272480;border-radius:0;background:transparent;color:var(--navy);font:inherit;outline:none}
.contact textarea{min-height:105px;resize:vertical}
.contact input:focus,.contact textarea:focus{border-bottom-color:var(--blue)}
.contact button[type=submit]{margin-top:12px;padding:14px 24px;border:2px solid var(--navy);background:var(--navy);color:var(--warm);font-weight:800;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.contact button[type=submit]:hover,.contact button[type=submit]:focus-visible{background:var(--blue);color:var(--navy)}
.contact button[type=submit]:disabled{opacity:.55;cursor:wait}
.form-status{min-height:1.5em;margin-top:14px!important;font-size:.9rem!important}
.form-success{display:none;margin-top:38px;padding-top:28px;border-top:1px solid #11272466;outline:none}
.form-success.show{display:block}
.form-success strong{display:block;font-size:clamp(1.6rem,3vw,2.8rem);line-height:1.05}
.form-success p{margin-top:12px!important;font-size:1rem!important}
.website-field{position:absolute!important;left:-9999px!important}
@media(max-width:850px){.portfolio-arrow{width:42px;height:64px;font-size:3.6rem}.portfolio-prev{left:2vw}.portfolio-next{right:2vw}.form-row{grid-template-columns:1fr;gap:0}}
@media(prefers-reduced-motion:reduce){.project-track{scroll-behavior:auto}}
.logo-image{display:block;width:clamp(220px,22vw,310px);padding:8px 10px;line-height:0}
.logo-image img{display:block;width:100%;height:auto}
footer .logo-image{width:clamp(240px,25vw,340px)}
@media(max-width:850px){.header .logo-image{width:210px;padding:7px 8px}footer .logo-image{width:min(100%,300px)}}
.header,.header.scrolled{background:#fff;color:#000;box-shadow:0 1px rgba(20,34,32,.1)}
.header nav a,.header.scrolled nav a{color:#000}
.nav-cta{border-bottom:0;padding-bottom:0}
.contact{display:block;min-height:100vh;padding-top:15vh;padding-bottom:14vh}
.contact>div:first-child{width:100%;display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.contact>div:first-child>p{margin-left:0;margin-right:0}
.contact h2{margin-left:0;text-align:left;transform:translateX(-.04em)}
.contact h2 span{margin-left:0;text-align:left}
.contact-side{width:min(720px,100%);margin:9vh auto 0}
.contact-side>p{max-width:620px;margin:0 auto 34px;text-align:center}
.contact form{margin-top:0}
@media(max-width:850px){.contact{padding-top:12vh;padding-bottom:12vh}.contact-side{margin-top:7vh}.contact-side>p{text-align:left}}

/* September 2026 content and layout refinements */
.opening h1{transform:translateX(calc(-1 * clamp(10px,1vw,16px)))}
.about-line{flex-wrap:nowrap;white-space:nowrap}
.word-viewport{flex:1 1 auto;min-width:0;contain:layout paint}
.word-viewport b{width:max-content;will-change:transform,opacity;backface-visibility:hidden;transform:translateZ(0)}
.word-viewport b.enter,.word-viewport b.exit{animation-fill-mode:both}
.electric-text{color:#2878ff}
.portfolio-shell[hidden]{display:none}
footer{background:#fff;color:var(--navy);align-items:center}
footer p{color:var(--navy)}
.footer-links{display:flex;gap:24px;margin-left:auto}
.footer-links a{color:var(--navy);font-size:.72rem;font-weight:800;text-decoration:none}
.footer-links a:hover,.footer-links a:focus-visible{text-decoration:underline;text-underline-offset:4px}
.about-grid{gap:5vw}
.process-promise span,.whitepapers .section-head>p span{display:block}
@media(min-width:851px){.intro-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.75fr);gap:5vw;max-width:1450px;margin-left:auto;margin-right:auto}}
@media(max-width:850px){.about-line{flex-wrap:nowrap;white-space:nowrap;align-items:baseline}.word-viewport{flex:1 1 auto;min-width:0}.word-viewport b{width:max-content}}

/* Whitepaper carousel */
.whitepapers{padding-bottom:0}
.whitepapers .section-head{align-items:end}
.whitepaper-shell{margin-top:10vh;background:var(--navy)}
.whitepaper-slide{min-height:72vh;margin-top:0;grid-template-columns:minmax(0,.9fr) minmax(320px,.55fr);gap:8vw;padding:6vh 10vw}
.whitepaper-slide-featured{grid-template-columns:minmax(0,1fr) minmax(250px,320px) minmax(260px,.72fr);gap:3vw;padding-left:5vw;padding-right:5vw}
.whitepaper-copy h3{font-size:clamp(2.7rem,5.1vw,5.5rem);line-height:.88;margin:5vh 0 3vh}
.whitepaper-slide-featured .whitepaper-copy h3{font-size:clamp(2.5rem,4.1vw,4.7rem)}
.whitepaper-copy>p{max-width:600px;font-size:clamp(1rem,1.35vw,1.22rem);line-height:1.58}
.download-link,.coming-soon{display:inline-block;margin-top:4vh;padding-bottom:8px;font-size:.72rem;font-weight:900;letter-spacing:.12em}
.download-link{text-decoration:none;border-bottom:2px solid currentColor}
.download-link:hover,.download-link:focus-visible{color:#fff}
.coming-soon{border-bottom:2px solid currentColor;opacity:.65}
.whitepaper-visual{justify-self:center;width:min(100%,390px);filter:drop-shadow(0 34px 30px #0004)}
.whitepaper-visual a{display:block;transition:transform .25s ease}
.whitepaper-visual a:hover,.whitepaper-visual a:focus-visible{transform:translateY(-8px)}
.whitepaper-visual img{display:block;width:100%;height:auto;background:white}
.whitepaper-quote{position:relative;max-width:470px;margin:0;padding:3.2rem 1.3rem 2rem;font-size:clamp(1rem,1.25vw,1.3rem);font-weight:700;line-height:1.48;letter-spacing:-.015em}
.whitepaper-quote:before,.whitepaper-quote:after{position:absolute;color:inherit;font:900 6rem/.7 Georgia,serif}
.whitepaper-quote:before{content:"“";top:0;left:0}
.whitepaper-quote:after{content:"”";right:0;bottom:-.6rem}
.whitepaper-quote-social:after{right:1.3rem;bottom:-2.45rem}
.placeholder-cover{aspect-ratio:8.5/11;display:flex;flex-direction:column;justify-content:space-between;padding:9%;filter:drop-shadow(0 34px 30px #0003);font-weight:900}
.placeholder-cover span{font-size:.7rem;line-height:1.2;letter-spacing:.12em}
.placeholder-cover strong{font-size:clamp(1.6rem,2.6vw,2.8rem);line-height:.9;letter-spacing:-.055em}
.placeholder-cover small{font-size:.6rem;letter-spacing:.15em}
.placeholder-rebrand{background:var(--navy);color:#fff;border-top:16px solid var(--blue)}
.placeholder-rebrand strong{color:var(--blue)}
.placeholder-social{background:var(--blue);color:var(--navy);border-top:16px solid #fff}
.placeholder-social strong{color:#fff}
.whitepaper-shell .portfolio-arrow{width:54px;height:54px;border:1px solid #14222055;border-radius:50%;background:#ffffffdd;color:var(--navy);font:700 1.5rem/1 Arial,sans-serif;text-shadow:none;transition:background .2s,color .2s,opacity .2s}
.whitepaper-shell .portfolio-prev{left:3vw}
.whitepaper-shell .portfolio-next{right:3vw}
.whitepaper-shell .portfolio-arrow:hover:not(:disabled),.whitepaper-shell .portfolio-arrow:focus-visible{background:var(--navy);color:#fff}
.carousel-status{position:absolute;z-index:8;left:10vw;bottom:4vh;display:flex;align-items:center;gap:13px;font-size:.66rem;font-weight:900;letter-spacing:.12em}
.carousel-status i{display:block;width:56px;height:1px;background:currentColor;opacity:.5}
.project-track:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
@media(max-width:850px){
  .whitepaper-slide,.whitepaper-slide-featured{min-height:auto;grid-template-columns:1fr;gap:7vh;padding:9vh 14vw 13vh}
  .whitepaper-copy h3{font-size:clamp(2.3rem,9vw,4.4rem)}
  .whitepaper-visual{width:min(76vw,340px)}
  .whitepaper-quote{justify-self:center;max-width:520px}
  .whitepaper-shell .portfolio-prev{left:2vw}.whitepaper-shell .portfolio-next{right:2vw}
  .carousel-status{left:14vw;bottom:5vh}
  .footer-links{margin-left:0;flex-wrap:wrap}
}
@media(max-width:520px){
  .whitepaper-slide{padding-left:12vw;padding-right:12vw}
  .whitepaper-shell .portfolio-arrow{top:auto;bottom:3.4vh;width:42px;height:42px;font-size:1.15rem}
  .whitepaper-shell .portfolio-prev{left:auto;right:68px}.whitepaper-shell .portfolio-next{right:16px}
  .carousel-status{left:12vw;bottom:4.8vh}
}

/* Contact-form validation popup
   This locks the page in place while a validation message is open. */
.validation-open {
  overflow: hidden;
}

/* The popup remains completely hidden until JavaScript opens it. */
.validation-popup[hidden] {
  display: none;
}

/* Full-screen popup background. */
.validation-popup {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20, 34, 45, 0.8);
  backdrop-filter: blur(5px);
}

/* Main light-blue popup panel. */
.validation-popup-panel {
  position: relative;
  width: min(520px, 100%);
  padding: 58px 42px 38px;
  overflow: hidden;
  border: 1px solid #70b7ff;
  background: #e8f3fa;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.47);
  color: #14222d;
  text-align: left;
}

/* Electric-blue line across the top of the popup. */
.validation-popup-signal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 9px;
  background: #2878ff;
}

/* Subtle OUTSPOQEN signal graphic below the blue line. */
.validation-popup-signal::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 100%;
  height: 34px;
  opacity: 0.38;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 34'%3E%3Cpath d='M0 17 C70 17 70 6 140 6 S210 29 280 29 350 4 420 4 475 17 520 17' fill='none' stroke='%232878FF' stroke-width='3'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
}

/* Validation-message typography. */
.validation-popup p {
  margin: 0;
  font-size: clamp(1.25rem, 3vw, 1.65rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-transform: none;
}

/* Popup OK button. */
.validation-popup button {
  margin-top: 30px;
  padding: 12px 28px;
  border: 2px solid #14222d;
  background: #14222d;
  color: #ffffff;
  font: 800 0.75rem/1 Arial, sans-serif;
  letter-spacing: 0.14em;
  cursor: pointer;
}

/* Button interaction state. */
.validation-popup button:hover,
.validation-popup button:focus-visible {
  border-color: #2878ff;
  background: #2878ff;
  color: #14222d;
  outline: none;
}

/* Mobile popup adjustments. */
@media (max-width: 520px) {
  .validation-popup-panel {
    padding: 54px 26px 30px;
  }

  .validation-popup button {
    width: 100%;
  }
}