:root  {
  --paper:#f3f3ed;
  --ink:#14232b;
  --blue:#2361e8;
  --line:#cdd2cf;
  --muted:#53616a;
  scroll-behavior:smooth;
  scroll-padding-top:30px}
*  {
  box-sizing:border-box}
body  {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Avenir Next",Avenir,"Trebuchet MS",sans-serif;
  -webkit-font-smoothing:antialiased}
a  {
  color:inherit;
  text-decoration:none}
p,h1,h2,h3,figure  {
  margin:0}
a:focus-visible  {
  outline:3px solid var(--blue);
  outline-offset:5px}
.wrap  {
  width:min(1440px,92%);
  margin-inline:auto}
.header  {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-block:30px}
.brand  {
  font-weight:700;
  font-size:25px;
  letter-spacing:-1.4px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px}
.brand>span  {
  background:var(--blue);
  color:white;
  font-size:22px;
  letter-spacing:-2px;
  display:grid;
  place-items:center;
  width:35px;
  height:35px;
  border-radius:3px;
  padding-right:3px}
.header nav  {
  display:flex;
  gap:8px}
.header nav a  {
  padding:12px 18px;
  border:1px solid var(--line);
  border-radius:30px;
  font-size:13px}
.header nav a:hover  {
  background:#e0e5df}
.button  {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:44px;
  border:1px solid #a9b4b5;
  border-radius:4px;
  min-height:52px;
  padding:14px 21px;
  font-size:14px;
  font-weight:600;
  transition:background .2s,transform .2s}
.button:hover  {
  background:#e1e6e0;
  transform:translateY(-2px)}
.button:active  {
  transform:none}
.button.small  {
  min-height:44px;
  padding:10px 15px;
  gap:28px;
  font-size:13px}
.button.blue  {
  color:white;
  background:var(--blue);
  border-color:var(--blue)}
.button.blue:hover  {
  background:#174cc1}
.skip  {
  position:absolute;
  top:8px;
  left:8px;
  padding:14px;
  background:white;
  z-index:2;
  transform:translateY(-160%)}
.skip:focus  {
  transform:none}
.hero  {
  padding-top:87px}
.hero-intro  {
  display:flex;
  justify-content:space-between;
  gap:30px}
.eyebrow  {
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  font-weight:600;
  display:flex;
  gap:10px;
  align-items:center}
.eyebrow i  {
  width:7px;
  height:7px;
  background:var(--blue);
  display:inline-block;
  flex-shrink:0}
.hero-intro>p:last-child  {
  font-size:15px;
  line-height:1.5;
  width:260px}
.hero h1  {
  font-weight:500;
  font-size:clamp(70px,9.3vw,154px);
  letter-spacing:-.075em;
  line-height:.99;
  margin:49px 0 42px;
  animation:arrive .8s both}
.hero em  {
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,serif;
  font-weight:400;
  color:var(--blue);
  letter-spacing:-.07em}
.baseline  {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:40px}
.baseline p  {
  font-size:14px}
.hero-figure  {
  background:#122c37;
  color:#e0e9e8;
  padding:22px 28px 20px;
  overflow:hidden}
.caption  {
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:11px;
  letter-spacing:.3px}
.hero-figure>div  {
  color:#b5c7cb}
.hero-figure img  {
  display:block;
  width:100%;
  height:auto;
  max-height:620px;
  object-fit:contain;
  margin:0 auto}
.section  {
  padding-block:126px}
.approach  {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:50px}
.approach>.eyebrow  {
  align-self:start;
  padding-top:15px}
h2  {
  font-size:clamp(43px,5.1vw,78px);
  font-weight:500;
  letter-spacing:-.055em;
  line-height:1.07}
.intro  {
  font-size:22px;
  line-height:1.6;
  max-width:650px;
  margin:32px 0;
  color:var(--muted);
  letter-spacing:-.4px}
.workflow  {
  background:#e7ebe5}
.section-heading  {
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:50px}
.section-heading>.eyebrow  {
  padding-top:12px}
.section-heading h2  {
  width:66%}
.workflow-layout  {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8%;
  margin-top:76px;
  align-items:center}
.record  {
  background:#fafbf8;
  box-shadow:0 24px 60px #233c3c12;
  padding:30px;
  border:1px solid #d6ddd8;
  transform:rotate(-2deg);
  border-radius:7px}
.record-top  {
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  padding-bottom:22px;
  font-size:12px;
  font-weight:600}
.record-top i  {
  width:10px;
  height:10px;
  background:var(--blue);
  border-radius:50%}
.record-ref  {
  font-size:10px;
  letter-spacing:1px;
  color:var(--muted);
  margin-top:30px}
.record-title  {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:32px;
  letter-spacing:-1px;
  margin-top:10px;
  gap:12px}
.record-title span  {
  font-size:10px;
  color:#325c47;
  background:#e1eddf;
  border:1px solid #cbdcc7;
  border-radius:20px;
  padding:6px 10px;
  letter-spacing:0}
.record-drawing  {
  height:160px;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden}
.record-drawing i  {
  width:160px;
  height:60px;
  border-left:3px solid #78919b;
  border-bottom:3px solid #78919b;
  transform:rotate(-30deg) skew(-30deg)}
.record-drawing b  {
  position:absolute;
  left:calc(50% - 14px);
  top:80px;
  background:var(--blue);
  color:white;
  width:29px;
  height:29px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:11px;
  border:3px solid white}
dl  {
  margin:0;
  font-size:12px}
dl>div  {
  display:flex;
  justify-content:space-between;
  padding:14px 0;
  border-top:1px solid #dce1dc}
dt  {
  color:var(--muted)}
dd  {
  margin:0;
  font-weight:600}
.record-caption  {
  font-size:10px;
  color:var(--muted);
  margin-top:16px}
.steps  {
  list-style:none;
  padding:0;
  margin:0}
.steps li  {
  display:flex;
  gap:30px;
  border-top:1px solid #bcc7bf;
  padding:30px 0}
.steps li>span  {
  font-size:11px;
  color:var(--blue);
  padding-top:7px}
.steps h3  {
  font-size:25px;
  font-weight:500;
  letter-spacing:-.7px;
  margin-bottom:12px}
.steps p  {
  font-size:15px;
  line-height:1.7;
  max-width:410px;
  color:var(--muted)}
.closing>.eyebrow  {
  margin-bottom:40px}
.closing h2  {
  font-size:clamp(70px,10vw,150px);
  letter-spacing:-.07em}
.closing .baseline  {
  align-items:end;
  margin-top:38px;
  margin-bottom:0}
.closing .baseline p  {
  font-size:17px;
  line-height:1.6;
  color:var(--muted)}
.footer  {
  border-top:1px solid var(--line);
  padding-block:28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px}
.footer p  {
  font-size:12px;
  color:var(--muted)}
@keyframes arrive  {
  from  {
  opacity:0;
  transform:translateY(18px)}
to  {
  opacity:1;
  transform:none}
}
@media(max-width:900px)  {
  .hero  {
  padding-top:65px}
.hero h1  {
  font-size:clamp(60px,10vw,100px)}
.section  {
  padding-block:90px}
.approach  {
  gap:24px}
.intro  {
  font-size:19px}
.workflow-layout  {
  gap:6%}
.record  {
  padding:22px}
.record-title  {
  font-size:26px}
.steps li  {
  gap:18px}
.steps h3  {
  font-size:22px}
.footer p  {
  max-width:230px}
}
@media(max-width:600px)  {
  .wrap  {
  width:90%}
.header  {
  padding-block:20px;
  gap:16px}
.header nav  {
  display:none}
.brand  {
  font-size:22px}
.button.small  {
  gap:17px}
.hero  {
  padding-top:52px}
.hero-intro  {
  display:block}
.hero-intro>p:last-child  {
  margin-top:22px;
  font-size:14px}
.eyebrow  {
  font-size:9px;
  letter-spacing:1.2px}
.hero h1  {
  font-size:clamp(44px,11.7vw,70px);
  letter-spacing:-.07em;
  margin-top:34px;
  margin-bottom:30px}
.baseline  {
  gap:20px;
  margin-bottom:28px}
.baseline p  {
  font-size:11px;
  max-width:120px;
  line-height:1.6}
.button  {
  gap:25px;
  padding:13px 16px;
  font-size:12px;
  min-height:48px}
.hero-figure  {
  padding:16px 13px}
.caption  {
  font-size:8px}
.caption span:last-child  {
  text-align:right}
.hero-figure img  {
  width:100%;
  margin-left:0;
  height:210px;
  object-fit:contain}
.section  {
  padding-block:70px}
.approach  {
  display:block}
.approach>.eyebrow  {
  margin-bottom:28px;
  padding:0}
h2  {
  font-size:43px}
.intro  {
  font-size:18px;
  line-height:1.6;
  margin-block:25px}
.section-heading  {
  display:block}
.section-heading>.eyebrow  {
  padding:0;
  margin-bottom:28px}
.section-heading h2  {
  width:100%}
.workflow-layout  {
  display:flex;
  flex-direction:column;
  gap:48px;
  margin-top:44px}
.record  {
  width:94%;
  padding:24px}
.record-title  {
  font-size:30px}
.steps li  {
  padding:25px 0;
  gap:22px}
.steps h3  {
  font-size:24px}
.steps p  {
  font-size:14px}
.closing>.eyebrow  {
  margin-bottom:30px}
.closing h2  {
  font-size:66px}
.closing .baseline  {
  align-items:start;
  flex-direction:column;
  gap:25px}
.closing .baseline p  {
  font-size:15px;
  max-width:none}
.footer  {
  flex-wrap:wrap;
  gap:20px}
.footer p  {
  order:3;
  width:100%;
  max-width:none;
  font-size:11px}
.footer .button  {
  margin-left:auto}
}
@media(prefers-reduced-motion:reduce)  {
  :root  {
  scroll-behavior:auto}
*,*::before,*::after  {
  animation:none!important;
  transition:none!important}
}
/* Editorial interactions: native disclosure, local product tour and progressive reveals. */
button,summary {
  font:inherit;
  color:inherit;
  cursor:pointer}
button {
  background:transparent}
button:focus-visible,summary:focus-visible,.gallery:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:5px}
button:disabled {
  opacity:.5;
  cursor:not-allowed}
.enhanced {
  display:none}
.enhanced-ready .enhanced {
  display:flex}
[hidden] {
  display:none!important}
.header {
  min-height:112px}
.header>.brand {
  position:relative;
  z-index:3}
.site-menu {
  position:fixed;
  z-index:20;
  top:26px;
  left:50%;
  transform:translateX(-50%);
  width:min(420px,40vw);
  background:#e7eae5eF;
  border-radius:5px;
  backdrop-filter:blur(16px);
  box-shadow:0 5px 25px #14232b05}
.site-menu summary {
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:48px;
  padding:12px 22px;
  font-size:14px;
  gap:24px}
.site-menu summary::-webkit-details-marker {
  display:none}
.site-menu summary i {
  height:12px;
  width:45px;
  border-block:1px solid currentColor;
  transition:transform .25s}
.site-menu[open] {
  background:#1e4ab0;
  color:#fff;
  box-shadow:0 16px 50px #122c3730}
.site-menu[open] summary i {
  border-bottom:0;
  transform:rotate(25deg)}
.site-menu[open] summary i::after {
  content:"";
  display:block;
  border-top:1px solid currentColor;
  transform:rotate(-50deg);
  margin-top:-1px}
.site-menu nav {
  display:flex;
  flex-direction:column;
  padding:10px 22px 26px;
  max-height:calc(100dvh - 110px);
  overflow-y:auto;
  gap:0}
.header .site-menu nav a {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border:0;
  border-bottom:1px solid #ffffff35;
  border-radius:0;
  padding:20px 0;
  font-size:20px;
  min-height:62px;
  transition:padding .2s,background .2s}
.header .site-menu nav a:hover {
  background:#ffffff0c;
  padding-inline:10px}
.site-menu nav a span {
  font-size:10px;
  color:#d1ddff}
.site-menu nav p {
  font-size:11px;
  margin-top:26px;
  color:#d1ddff}
.hero .wordmark {
  font-family:"Avenir Next",Avenir,"Trebuchet MS",sans-serif;
  font-size:clamp(120px,22.9vw,355px);
  font-weight:500;
  letter-spacing:-.09em;
  line-height:.86;
  color:#2051c3;
  margin:66px 0 30px;
  margin-left:-.02em}
.hero-intro>p:last-child {
  width:300px}
.hero-figure {
  position:relative}
.hero-figure .caption,.hero-figure img,.media-actions {
  position:relative;
  z-index:1}
.hero-scan {
  position:absolute;
  inset:60px 28px 70px;
  pointer-events:none;
  overflow:hidden}
.hero-scan::after {
  content:"";
  position:absolute;
  width:100%;
  height:2px;
  top:0;
  background:linear-gradient(90deg,transparent,#90b4ff,transparent);
  box-shadow:0 0 55px 14px #2361e82a;
  animation:scan 6s linear infinite}
.motion-paused .hero-scan::after {
  animation-play-state:paused;
  opacity:0}
.media-actions {
  justify-content:flex-end;
  gap:12px;
  margin-top:20px}
.button.ghost {
  border-color:#a7b9c47d;
  color:inherit}
.hero-figure .button.ghost:hover {
  background:#ffffff15}
.media-actions .button {
  font-size:11px;
  min-height:44px;
  padding:10px 14px;
  gap:24px}
.showcase {
  border-top:1px solid var(--line)}
.product-links {
  gap:30px;
  margin-top:64px}
.product-link {
  position:relative;
  text-align:left;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:48px;
  width:50%;
  padding:30px;
  min-height:220px;
  border:1px solid #b7c4c0;
  background:#e1e9e1;
  overflow:hidden;
  transition:background .3s,transform .3s}
.product-link:nth-child(2) {
  background:#dce4ed}
.product-link::before {
  content:"";
  position:absolute;
  width:190px;
  height:190px;
  border:1px solid #7b938e35;
  transform:rotate(-30deg) skew(-30deg);
  top:-60px;
  right:20px;
  transition:transform .5s}
.product-link:hover {
  background:#d5e2f1;
  transform:translateY(-4px)}
.product-link:hover::before {
  transform:rotate(-15deg) skew(-30deg) scale(1.15)}
.product-link>span:first-child {
  font-size:10px;
  letter-spacing:1px;
  text-transform:uppercase;
  z-index:1}
.product-link strong {
  font-size:33px;
  letter-spacing:-1.5px;
  font-weight:500;
  z-index:1}
.tile-arrow {
  position:absolute;
  right:26px;
  top:24px;
  font-size:25px;
  color:var(--blue)}
.gallery {
  margin-top:60px;
  scroll-margin-top:100px}
.gallery-stage {
  background:#e2e9e2;
  overflow:hidden}
.slide {
  margin:0;
  animation:slide-in .45s ease both}
.slide img {
  width:100%;
  height:auto;
  max-height:700px;
  object-fit:contain;
  display:block;
  transition:transform .7s}
.slide img:hover {
  transform:scale(1.025)}
.slide figcaption {
  display:block;
  background:var(--paper);
  padding:28px 0 12px}
.slide figcaption>span {
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--muted)}
.slide h3 {
  font-weight:500;
  font-size:36px;
  letter-spacing:-1.3px;
  margin-top:16px}
.slide p {
  font-size:15px;
  line-height:1.6;
  color:var(--muted);
  margin-top:12px}
.dark-slide {
  background:#122c37}
.gallery-controls {
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-top:15px}
.gallery-status {
  font-size:12px;
  color:var(--muted)}
.gallery-buttons {
  display:flex;
  gap:8px}
.gallery-buttons button {
  width:48px;
  justify-content:center;
  font-size:20px}
.tour-controls {
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid var(--line);
  padding-top:20px;
  margin-top:20px}
.tour-controls label {
  font-size:11px;
  display:flex;
  align-items:center;
  gap:16px}
.tour-controls input {
  accent-color:var(--blue);
  width:140px;
  min-height:44px;
  cursor:pointer}
.visual-note {
  color:var(--muted);
  font-size:10px;
  margin-top:20px}
.site-footer {
  background:#1e4ab0;
  color:white;
  padding-block:64px 30px}
.footer-top {
  display:flex;
  justify-content:space-between;
  gap:40px}
.footer-top .eyebrow {
  line-height:1.7;
  letter-spacing:1px}
.footer-top nav {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:24px}
.footer-top nav a {
  padding:10px 12px;
  border:1px solid #ffffff55;
  display:flex;
  justify-content:space-between;
  min-width:240px;
  font-size:13px;
  min-height:44px}
.footer-top nav a:hover {
  background:#ffffff15}
.footer-feature {
  width:32%;
  display:block;
  border:1px solid #ffffff44;
  align-self:start}
.footer-feature img {
  background:#122c37;
  width:100%;
  height:auto;
  display:block;
  transition:filter .3s}
.footer-feature:hover img {
  filter:brightness(1.2)}
.footer-feature>span {
  font-size:11px;
  padding:12px;
  display:flex;
  justify-content:space-between}
.footer-wordmark {
  display:block;
  font-size:clamp(100px,22.7vw,350px);
  font-weight:500;
  letter-spacing:-.09em;
  line-height:1.15;
  margin-top:60px;
  margin-left:-.02em}
.footer-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid #ffffff44;
  padding-top:24px}
.footer-bottom p {
  font-size:11px}
.site-footer .button:hover {
  background:#ffffff15}
.reveal {
  opacity:1}
.enhanced-ready .reveal:not(.revealed) {
  opacity:.01;
  transform:translateY(30px)}
.reveal {
  transition:opacity .8s,transform .8s}
dialog {
  border:1px solid #bdc9c3;
  border-radius:8px;
  background:var(--paper);
  color:var(--ink);
  padding:24px;
  width:min(1200px,94vw);
  max-height:92dvh;
  overflow:auto}
dialog::backdrop {
  background:#071b28d9;
  backdrop-filter:blur(8px)}
.dialog-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:20px}
.dialog-head h2 {
  font-size:22px;
  letter-spacing:-.6px}
dialog img {
  width:100%;
  max-height:70dvh;
  height:auto;
  object-fit:contain;
  background:#122c37}
dialog p {
  font-size:11px;
  color:var(--muted);
  margin-top:16px}
html:has(dialog[open]) {
  overflow:hidden}
@keyframes scan {
  from {
  transform:translateY(0)}
to {
  transform:translateY(600px)}
}
@keyframes slide-in {
  from {
  opacity:.3;
  transform:translateX(12px)}
to {
  opacity:1;
  transform:none}
}
@media(max-width:900px) {
  .hero .wordmark {
  font-size:23vw}
.site-menu {
  width:36vw}
.header .site-menu nav a {
  font-size:17px}
.product-link {
  min-height:180px;
  padding:24px}
.product-link strong {
  font-size:27px}
.tour-controls {
  flex-wrap:wrap}
.tour-controls label {
  flex:1;
  justify-content:center}
.footer-feature {
  width:40%}
}
@media(max-width:600px) {
  .header {
  min-height:100px;
  align-items:start}
.header>.button {
  margin-right:92px;
  font-size:11px;
  padding-inline:10px;
  gap:15px}
.site-menu {
  top:20px;
  left:auto;
  right:5%;
  transform:none;
  width:82px;
  max-width:90%}
.site-menu summary {
  padding:12px;
  gap:12px;
  min-height:44px;
  font-size:11px}
.site-menu summary i {
  width:20px;
  height:8px}
.site-menu[open] {
  width:90%}
.site-menu[open] summary {
  padding-inline:20px}
.site-menu[open] summary i {
  width:36px}
.header .site-menu nav {
  display:flex;
  padding:10px 20px 24px}
.header .site-menu nav a {
  padding-block:17px;
  font-size:21px}
.hero {
  padding-top:48px}
.hero-intro>p:last-child {
  width:auto}
.hero .wordmark {
  font-size:22.5vw;
  margin-top:54px;
  margin-bottom:24px}
.hero-figure .caption {
  font-size:8px}
.media-actions {
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap}
.media-actions .button {
  font-size:10px;
  gap:12px;
  padding-inline:10px;
  flex:1;
  white-space:nowrap}
.hero-scan {
  inset:50px 13px 70px}
.product-links {
  gap:14px;
  margin-top:36px}
.product-link {
  padding:18px;
  min-height:200px;
  gap:60px}
.product-link strong {
  font-size:24px;
  letter-spacing:-.8px}
.product-link>span:first-child {
  font-size:8px}
.tile-arrow {
  right:12px;
  top:14px;
  font-size:20px}
.gallery {
  margin-top:36px}
.slide h3 {
  font-size:29px}
.slide p {
  font-size:14px}
.slide figcaption {
  padding-top:22px}
.slide figcaption>span {
  font-size:9px}
.gallery-status {
  font-size:10px;
  max-width:190px;
  line-height:1.6}
.gallery-buttons {
  gap:6px}
.gallery-buttons button {
  width:44px;
  padding:10px}
.tour-controls {
  gap:14px}
.tour-controls label {
  order:3;
  flex-basis:100%;
  justify-content:space-between}
.tour-controls input {
  width:65%}
.tour-controls button {
  font-size:10px}
.visual-note {
  font-size:9px}
.footer-top {
  flex-direction:column;
  gap:35px}
.footer-top nav a {
  min-width:0}
.footer-feature {
  width:100%}
.site-footer {
  padding-top:45px}
.footer-wordmark {
  font-size:22.5vw;
  margin-top:45px}
.footer-bottom {
  gap:20px}
.dialog-head h2 {
  font-size:17px}
.dialog-head .button {
  white-space:nowrap}
dialog {
  padding:16px}
.enhanced-ready .reveal:not(.revealed) {
  transform:translateY(16px)}
}
@media(prefers-reduced-motion:reduce) {
  .enhanced-ready .reveal:not(.revealed) {
  opacity:1;
  transform:none}
.hero-scan,#motion-toggle,#tour-toggle {
  display:none!important}
.slide img:hover,.product-link:hover {
  transform:none}
}
.hero .wordmark {
  font-size:clamp(120px,30.5vw,470px)}
.footer-wordmark {
  font-size:clamp(100px,30.2vw,465px)}
.slide img {
  height:clamp(210px,56vw,700px)}
.slide figcaption {
  min-height:160px}
@media(max-width:900px) {
  .hero .wordmark {
  font-size:30.5vw}
}
@media(max-width:600px) {
  .hero .wordmark,.footer-wordmark {
  font-size:30.5vw}
.slide figcaption {
  min-height:180px}
}
.gallery {
  position:relative}
.gallery-buttons {
  position:absolute;
  top:clamp(105px,28vw,350px);
  left:18px;
  right:18px;
  justify-content:space-between;
  pointer-events:none;
  z-index:2}
.gallery-buttons button {
  pointer-events:auto;
  background:#f3f3edf2;
  box-shadow:0 3px 15px #122c3718}
.gallery-controls {
  min-height:44px}
.gallery-buttons button:hover {
  background:white}
@media(max-width:600px) {
  .gallery-buttons {
  left:8px;
  right:8px;
  top:82px}
.gallery-buttons button {
  width:44px;
  min-height:44px}
.gallery-status {
  max-width:none}
}
.site-footer a:focus-visible,.site-menu[open] a:focus-visible,.site-menu[open] summary:focus-visible,.hero-figure button:focus-visible {
  outline-color:white}
.product-link[aria-pressed="true"] {
  border-color:var(--blue);
  box-shadow:inset 0 0 0 1px var(--blue)}
#tour-toggle[aria-pressed="true"] {
  background:var(--blue);
  border-color:var(--blue);
  color:white}
/* Three menu states: neutral, blue hover/focus, then expanded information. */
.site-menu {
  background:#f5f5f3;
  border-radius:8px;
  transition:background-color .2s ease,color .2s ease;
}
.site-menu[open] {
  background:var(--blue);
  color:#fff;
}
@media (hover:hover) and (pointer:fine) {
  .site-menu:hover {
    background:var(--blue);
    color:#fff;
  }
}
.site-menu:focus-within {
  background:var(--blue);
  color:#fff;
}
.site-menu summary i {
  position:relative;
  height:12px;
  border:0;
  transform:none;
}
.site-menu summary i::before,.site-menu summary i::after {
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  border-top:1px solid currentColor;
  transition:transform .25s ease;
}
.site-menu summary i::after {
  top:10px;
}
.site-menu[open] summary i {
  transform:none;
  border:0;
}
.site-menu[open] summary i::before {
  top:5px;
  transform:rotate(14deg);
}
.site-menu[open] summary i::after {
  top:5px;
  margin:0;
  transform:rotate(-14deg);
}
.header .site-menu nav a {
  position:relative;
  justify-content:flex-start;
  font-weight:400;
  animation:menu-information .3s ease both;
}
.site-menu nav a span {
  display:none;
}
.site-menu nav a[aria-current="location"]::before {
  content:"";
  width:7px;
  height:7px;
  background:currentColor;
  margin-right:15px;
  flex-shrink:0;
}
.site-menu nav a:nth-child(2){animation-delay:.03s}
.site-menu nav a:nth-child(3){animation-delay:.06s}
.site-menu nav a:nth-child(4){animation-delay:.09s}
.site-menu nav a:nth-child(5){animation-delay:.12s}
.site-menu summary:focus-visible{outline-color:var(--blue)}
.site-menu:focus-within summary:focus-visible{outline-color:white;outline-offset:-5px}
@keyframes menu-information {
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
/* A visual explanation and an under-page footer reveal. */
.button {
  gap:16px}
.header .talk-link {
  min-width:110px;
  justify-content:center}
.gallery-buttons {
  position:static;
  pointer-events:auto;
  justify-content:flex-end}
.gallery-buttons button {
  width:auto;
  min-width:76px;
  font-size:12px;
  box-shadow:none}
.gallery-controls {
  gap:20px}
.product-link {
  gap:42px}
.problem-section {
  display:block}
.problem-heading {
  display:flex;
  justify-content:space-between;
  gap:40px}
.problem-heading h2 {
  width:66%}
.problem-heading>.eyebrow {
  align-self:start;
  padding-top:12px}
.problem-scene {
  position:relative;
  height:560px;
  overflow:hidden;
  background:#e6ebe5;
  border:1px solid #c9d3cc;
  margin-top:56px;
  border-radius:3px}
.scene-grid {
  position:absolute;
  inset:0;
  background-image:linear-gradient(#788f7b0d 1px,transparent 1px),linear-gradient(90deg,#788f7b0d 1px,transparent 1px);
  background-size:35px 35px}
.scene-label {
  position:absolute;
  top:32px;
  left:32px;
  font-size:14px;
  letter-spacing:-.2px}
.before-label {
  position:absolute;
  white-space:nowrap;
  opacity:0}
.scene-lines {
  position:absolute;
  width:100%;
  height:100%;
  inset:0}
.scene-lines path {
  fill:none;
  stroke:#2361e8;
  stroke-width:1.5;
  stroke-dasharray:6 8;
  opacity:.45}
.source-card {
  position:absolute;
  width:190px;
  height:150px;
  background:#fafbf8;
  border:1px solid #c8d3cd;
  box-shadow:0 8px 20px #233b3520;
  border-radius:5px;
  padding:19px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  z-index:2}
.source-card>span {
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:#53616a}
.source-card>b {
  font-size:13px;
  font-weight:500}
.drawing-card {
  left:12%;
  top:16%}
.evidence-card {
  right:12%;
  top:16%}
.note-card {
  left:calc(50% - 95px);
  bottom:8%;
  height:120px}
.drawing-card svg {
  height:70px;
  width:100%;
  fill:none;
  stroke:#608290;
  stroke-width:3}
.photo-symbol {
  height:55px;
  position:relative;
  background:#d6e1da;
  overflow:hidden;
  border-radius:2px}
.photo-symbol::before,.photo-symbol::after {
  content:"";
  position:absolute;
  width:65px;
  height:65px;
  background:#77988a;
  transform:rotate(45deg);
  top:22px;
  left:25px}
.photo-symbol::after {
  left:75px;
  background:#a4bfb0}
.photo-symbol i {
  position:absolute;
  width:11px;
  height:11px;
  border-radius:50%;
  background:#e7f0e8;
  left:25px;
  top:10px}
.note-lines {
  display:flex;
  flex-direction:column;
  gap:5px}
.note-lines i {
  display:block;
  height:3px;
  background:#b6c7bd;
  width:90%}
.note-lines i:last-child {
  width:65%}
.solution-record {
  position:absolute;
  left:calc(50% - 130px);
  top:35%;
  width:260px;
  min-height:165px;
  background:var(--blue);
  color:#fff;
  border-radius:6px;
  padding:25px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:16px;
  box-shadow:0 16px 40px #2361e830;
  z-index:3}
.solution-record>span {
  font-size:12px;
  font-weight:600}
.solution-record strong {
  font-size:30px;
  letter-spacing:-1px;
  font-weight:500}
.solution-record>div {
  font-size:11px;
  display:flex;
  align-items:center;
  gap:8px}
.solution-record i {
  width:6px;
  height:6px;
  background:#c4f4c9;
  border-radius:50%}
.problem-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:24px}
.problem-bottom p {
  font-size:13px;
  color:var(--muted)}
.story-running .drawing-card {
  animation:drawing-connect 4.8s both}
.story-running .evidence-card {
  animation:evidence-connect 4.8s both}
.story-running .note-card {
  animation:note-connect 4.8s both}
.story-running .solution-record {
  animation:record-in 4.8s both}
.story-running .scene-lines {
  animation:connection-in 4.8s both}
.story-running .before-label {
  animation:before-out 4.8s both}
.story-running .after-label {
  animation:after-in 4.8s both}
.story-paused * {
  animation-play-state:paused!important}
.conversation {
  padding-bottom:100px;
  padding-top:10px}
.conversation>.eyebrow {
  margin-bottom:24px}
.conversation h2 {
  font-size:clamp(54px,7vw,110px)}
.conversation>p:not(.eyebrow) {
  font-size:14px;
  color:var(--muted);
  margin-block:25px}
.conversation .button {
  margin-top:10px}
.header {
  position:relative;
  z-index:4;
  background:var(--paper)}
main {
  position:relative;
  z-index:2;
  background:var(--paper);
  border-radius:0 0 18px 18px;
  box-shadow:0 18px 35px #071b2815}
.site-footer {
  position:sticky;
  bottom:0;
  z-index:1;
  padding-top:60px;
  padding-bottom:25px;
  min-height:600px;
  display:flex;
  align-items:end}
.site-footer>.wrap {
  width:min(1440px,92%)}
.footer-top {
  align-items:start}
.footer-top nav {
  margin:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  width:48%}
.footer-top nav a {
  min-width:0}
.footer-wordmark {
  margin-top:28px;
  line-height:1.06}
.footer-bottom {
  padding-top:20px}
.site-footer .eyebrow {
  font-size:12px}
@keyframes drawing-connect {
  0%,22% {
  transform:translate(35%,85%) rotate(-14deg)}
70%,100% {
  transform:none}
}
@keyframes evidence-connect {
  0%,22% {
  transform:translate(-15%,135%) rotate(12deg)}
70%,100% {
  transform:none}
}
@keyframes note-connect {
  0%,22% {
  transform:translate(110%,-5%) rotate(-9deg)}
70%,100% {
  transform:none}
}
@keyframes record-in {
  0%,30% {
  opacity:0;
  transform:translateY(40px) scale(.9)}
72%,100% {
  opacity:1;
  transform:none}
}
@keyframes connection-in {
  0%,40% {
  opacity:0}
75%,100% {
  opacity:1}
}
@keyframes before-out {
  0%,23% {
  opacity:1}
45%,100% {
  opacity:0}
}
@keyframes after-in {
  0%,40% {
  opacity:0}
75%,100% {
  opacity:1}
}
@media(max-width:900px) {
  .source-card {
  width:150px;
  height:135px;
  padding:15px}
.note-card {
  left:calc(50% - 75px);
  height:110px}
.problem-scene {
  height:520px}
.solution-record {
  width:220px;
  left:calc(50% - 110px);
  padding:23px}
.drawing-card {
  left:6%}
.evidence-card {
  right:6%}
.site-footer {
  min-height:540px}
}
@media(max-width:600px) {
  .problem-heading {
  display:block}
.problem-heading h2 {
  width:100%;
  font-size:38px;
  margin-top:26px}
.problem-heading>.eyebrow {
  padding:0}
.problem-scene {
  margin-top:32px;
  height:470px}
.scene-label {
  top:25px;
  left:18px;
  font-size:12px}
.source-card {
  width:118px;
  height:115px;
  padding:13px}
.source-card>span {
  font-size:8px}
.source-card>b {
  font-size:10px}
.drawing-card {
  left:5%;
  top:18%}
.evidence-card {
  right:5%;
  top:18%}
.note-card {
  left:calc(50% - 59px);
  bottom:8%;
  height:100px}
.solution-record {
  left:calc(50% - 100px);
  top:45%;
  width:200px;
  min-height:125px;
  padding:20px;
  gap:10px}
.solution-record strong {
  font-size:25px}
.solution-record>div {
  font-size:10px}
.scene-lines {
  display:none}
.problem-bottom p {
  font-size:11px;
  max-width:170px}
.problem-bottom .button {
  font-size:10px;
  min-width:120px}
.gallery-buttons button {
  width:auto;
  min-width:68px;
  font-size:11px}
.gallery-status {
  max-width:150px}
.gallery-controls {
  align-items:center}
.gallery-buttons {
  gap:6px}
.conversation {
  padding-bottom:65px}
.site-footer {
  min-height:440px;
  padding-top:35px;
  padding-bottom:20px}
.site-footer>.wrap {
  width:90%}
.footer-top {
  gap:24px}
.footer-top nav {
  width:100%;
  grid-template-columns:1fr 1fr;
  gap:8px}
.site-footer .eyebrow {
  font-size:10px}
.footer-wordmark {
  margin-top:20px}
.footer-bottom {
  padding-top:16px}
.footer-bottom .button {
  font-size:10px;
  min-height:44px}
}
@media(prefers-reduced-motion:reduce) {
  .site-footer {
  position:relative}
.story-running .before-label {
  opacity:0}
.story-running .after-label,.story-running .solution-record,.story-running .scene-lines {
  opacity:1}
.story-running .source-card,.story-running .solution-record {
  transform:none}
}
.contact-email {
  display:block;
  width:fit-content;
  max-width:100%;
  overflow-wrap:anywhere;
  font-size:clamp(20px,3vw,36px);
  letter-spacing:-.8px;
  margin-top:26px;
  padding-block:12px;
  border-bottom:1px solid #879ca8}
.contact-email:hover {
  color:var(--blue)}
.conversation .button {
  margin-top:28px}
@media(prefers-reduced-motion:reduce) {
  #story-control {
  display:none!important}
}
.site-footer {
  background:var(--blue)}
/* Full-width header surface covers the footer underlay at the page edges. */
.header.wrap {
  width:100%;
  padding-inline:max(4vw,calc((100vw - 1440px)/2));
}
.hero {
  padding-top:clamp(100px,12vh,180px);
}
.hero .wordmark {
  margin-top:clamp(85px,11vh,150px);
  margin-bottom:clamp(80px,12vh,160px);
}
@media(max-width:600px) {
  .header.wrap{padding-inline:5%}
  .hero{padding-top:75px}
  .hero .wordmark{margin-top:85px;margin-bottom:100px}
}
/* Lower the complete hero composition below the header. */
.hero{padding-top:clamp(170px,22vh,280px)}
@media(max-width:600px){.hero{padding-top:125px}}
/* Product walkthrough: a drawing QR leads to its revision, weld and evidence. */
.practical-example{border-top:1px solid var(--line)}.qr-demo{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(290px,1fr);gap:7%;align-items:center;margin-top:65px}.example-paper{min-width:0}.example-paper .hero-figure{padding:18px}.example-paper .hero-figure img{height:auto;max-height:none}.example-paper .caption{font-size:9px}.example-paper .media-actions{margin-top:18px;flex-wrap:wrap}.example-paper .media-actions .button{flex:1;justify-content:center;white-space:nowrap}.printed-qr{display:flex;align-items:center;gap:26px;margin-top:25px;padding:25px;background:#e7ece5;border:1px solid #c9d3cc}.printed-qr>a{flex-shrink:0;border:1px solid #ccd4ce;background:white;display:block;padding:4px}.printed-qr img{display:block;width:130px;height:130px}.printed-qr h3{font-size:23px;letter-spacing:-.6px;font-weight:500;margin-top:13px}.printed-qr>div>p:not(.eyebrow){font-size:12px;color:var(--muted);margin-top:10px}.printed-qr .button{margin-top:18px;min-height:44px;font-size:12px;justify-content:center}.printed-qr .demo-caption{font-size:9px}.phone-example{position:relative;min-height:580px;background:#fafbf8;border:7px solid #172b36;border-radius:35px;box-shadow:0 24px 60px #122c3722;overflow:hidden;max-width:380px;width:100%;margin-inline:auto;padding:24px 20px;transition:box-shadow .3s}.phone-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:42px;font-size:15px;letter-spacing:-.7px;font-weight:700}.phone-speaker{width:58px;height:7px;border-radius:10px;background:#172b36}.demo-panel>h3{font-size:28px;letter-spacing:-1px;font-weight:500;margin-top:15px;line-height:1.2}.demo-panel>h3>span{font-size:11px;margin-left:10px;letter-spacing:0;border:1px solid #c9d3cc;padding:5px 8px;border-radius:14px;vertical-align:middle}.sample-scan-frame{width:205px;height:205px;position:relative;background:#e9eee8;display:grid;place-items:center;margin:32px auto;border:1px solid #9bb4c9;overflow:hidden}.sample-scan-frame>img{width:160px;height:160px}.sample-scan-frame>i{position:absolute;left:0;right:0;top:0;height:2px;background:var(--blue);opacity:0}.demo-scanning .sample-scan-frame>i{animation:sample-scan 1.2s linear both;opacity:1}.demo-scanning .phone-example{box-shadow:0 0 0 4px #2361e830,0 24px 60px #122c3722}.phone-drawing{position:relative;background:#122c37;margin-top:24px;border-radius:4px;overflow:hidden}.phone-drawing>img{width:100%;height:auto;display:block}.sample-weld{position:absolute;left:66.8%;top:53.6%;transform:translate(-50%,-50%);width:44px;height:44px;background:var(--blue);color:white;border:2px solid white;border-radius:50%;font-size:12px;box-shadow:0 0 0 5px #2361e840}.sample-weld:hover{background:#174cc1}.demo-panel .demo-hint{margin-top:18px;color:var(--blue);font-size:13px}.demo-panel dl{margin-top:24px}.demo-panel .button{font-size:12px;min-height:44px}.demo-panel .button.blue{margin-top:25px;width:100%;justify-content:center}.demo-panel>.button.small{margin-bottom:25px}.example-status{font-size:10px;color:var(--muted);line-height:1.7;margin-top:30px;min-height:34px}.phone-example>#sample-reset{margin-top:12px;font-size:10px;min-height:44px}.example-paper .hero-scan{inset:45px 15px 60px}.qr-demo .eyebrow{font-size:9px;letter-spacing:1px}@keyframes sample-scan{from{transform:translateY(0)}to{transform:translateY(205px)}}@media(max-width:900px){.qr-demo{gap:30px;grid-template-columns:minmax(0,1fr) minmax(285px,1fr)}.printed-qr{gap:15px;padding:18px;flex-wrap:wrap}.printed-qr img{width:95px;height:95px}.printed-qr h3{font-size:20px}.phone-example{padding:22px 15px;min-height:565px}.example-paper .hero-figure{padding:14px}.example-paper .caption{font-size:8px;gap:12px}}@media(max-width:650px){.qr-demo{grid-template-columns:1fr;gap:40px;margin-top:38px}.printed-qr{flex-wrap:nowrap;align-items:center;gap:18px;padding:18px}.printed-qr h3{font-size:21px}.phone-example{max-width:330px;min-height:560px;padding:25px 20px}.example-paper .hero-figure img{width:100%;margin-left:0;height:auto}.phone-top{margin-bottom:35px}.printed-qr .demo-caption{font-size:8px}.practical-example .section-heading h2{font-size:43px}}@media(max-width:360px){.printed-qr{gap:12px;padding:13px}.printed-qr img{width:80px;height:80px}.printed-qr h3{font-size:18px}.printed-qr .button{font-size:10px;padding:11px}.phone-example{padding:22px 14px}}@media(prefers-reduced-motion:reduce){.demo-scanning .sample-scan-frame>i{animation:none!important}}
/* Match the footer to the large d2weld wordmark. */
.site-footer{background:#2051c3}
/* Light, open illustrations: no decorative grids or staged background panels. */
.problem-scene{background:transparent;border:0;box-shadow:none}
.scene-grid{display:none}
.source-card,.solution-record,.record,.phone-example{box-shadow:none}
.workflow,.gallery-stage,.dark-slide,.hero-figure,.phone-drawing,.printed-qr,.sample-scan-frame{background:transparent}
.hero-figure{color:var(--ink)}
.hero-figure>div.caption{color:var(--muted)}
.hero-figure .button.ghost{border-color:#a9b4b5;color:var(--ink)}
.hero-figure .button.ghost:hover{background:#2361e80b}
.hero-figure button:focus-visible{outline-color:var(--blue)}
.product-link,.product-link:nth-child(2){background:transparent}
.product-link::before{display:none}
.product-link:hover{background:#2361e80a}
.printed-qr{border:0;padding-inline:0}
.sample-scan-frame{border-color:#bccad4}
.demo-scanning .phone-example{box-shadow:0 0 0 3px #2361e825}
.hero-scan::after{box-shadow:none;background:linear-gradient(90deg,transparent,#2361e85c,transparent)}
dialog img{background:transparent}
main{box-shadow:none}
dialog::backdrop{background:#eef0ebed}
/* A short solutions page; controls are plain text with a hover underline. */
.button,.button.small,.button.blue,.button.ghost,.header .talk-link,.footer-top nav a,.site-footer .button,.text-action {
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  color:inherit;
  text-decoration:none;
  text-underline-offset:6px;
  text-decoration-thickness:1px;
  transform:none;
}
.button:hover,.button.blue:hover,.button.ghost:hover,.site-footer .button:hover,.footer-top nav a:hover,.text-action:hover {
  background:transparent;
  transform:none;
  text-decoration:underline;
}
.site-menu:not([open]),.site-menu:not([open]):hover,.site-menu:not([open]):focus-within {
  background:transparent;
  color:var(--ink);
  box-shadow:none;
  backdrop-filter:none;
}
.site-menu summary:hover>span {text-decoration:underline;text-underline-offset:6px}
.site-menu:not([open]) summary:focus-visible {outline-color:var(--blue)}
.site-menu nav a:hover {text-decoration:underline;text-underline-offset:6px}
.header .site-menu nav a:hover{background:transparent;padding-inline:0}
.site-menu[open]{box-shadow:none}
.faq-section{border-top:1px solid var(--line);padding-top:90px;padding-bottom:110px}
.faq-list{width:66%;margin-left:auto;margin-top:45px}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:30px;list-style:none;min-height:84px;padding:22px 0;font-size:21px;letter-spacing:-.5px;line-height:1.4;text-underline-offset:6px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{text-decoration:underline}
.faq-list summary i{position:relative;flex-shrink:0;width:16px;height:16px}
.faq-list summary i::before,.faq-list summary i::after{content:"";position:absolute;left:0;top:7px;width:16px;border-top:1px solid currentColor}
.faq-list summary i::after{transform:rotate(90deg);transition:transform .2s}
.faq-list details[open] summary i::after{transform:rotate(0)}
.faq-list details p{max-width:600px;padding:0 35px 26px 0;font-size:16px;line-height:1.7;color:var(--muted)}
.faq-list details[open] p{animation:menu-information .25s ease both}
.footer-top nav a{padding-inline:0}
.footer-top nav{gap:10px 30px}
@media(max-width:600px){.faq-section{padding-top:65px;padding-bottom:70px}.faq-list{width:100%;margin-top:30px}.faq-list summary{font-size:19px;min-height:76px;gap:20px}.faq-list details p{font-size:14px}.problem-heading h2{font-size:38px}}
/* Point-by-point traceability, with no explanatory caption/control row. */
.trace-problem{padding-bottom:40px}.lost-context{position:relative;display:flex;align-items:center;justify-content:center;gap:18%;height:330px;margin-top:45px}.loose-sheet,.loose-photo{width:230px;min-height:190px;border:1px solid #cbd2cf;background:#fafbf8;padding:22px;display:flex;flex-direction:column;gap:20px;justify-content:space-between}.loose-sheet{transform:rotate(-6deg)}.loose-photo{transform:rotate(6deg);width:190px}.loose-sheet>span{font-size:11px;color:var(--muted)}.loose-sheet svg{height:95px;width:100%;fill:none;stroke:#7e939d;stroke-width:3}.loose-sheet b,.loose-photo b{font-weight:500;font-size:15px}.loose-photo .photo-symbol{height:95px}.missing-link{position:absolute;left:50%;top:45%;font-family:Georgia,serif;font-size:45px;color:#85949b}.trace-demo{margin-top:60px}.trace-steps{display:flex;gap:32px;justify-content:space-between;max-width:850px;margin-inline:auto}.trace-steps button{border:0;background:transparent;padding:14px 0;min-height:48px;font-size:13px;color:var(--muted);text-underline-offset:6px}.trace-steps button:hover{text-decoration:underline}.trace-steps button[aria-pressed="true"]{color:var(--blue);font-weight:600}.trace-example{display:grid;grid-template-columns:minmax(0,2fr) minmax(230px,1fr);gap:40px;align-items:center;margin-top:45px}.trace-drawing-head{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);padding:12px 0}.trace-sheet{position:relative;aspect-ratio:1000/560}.trace-sheet>svg{display:block;width:100%;height:100%;overflow:visible}.iso-line{fill:none;stroke:#6b8797;stroke-width:13;stroke-linecap:round;stroke-linejoin:round;transition:opacity .4s}.iso-b{opacity:0}.trace-demo:not([data-stage="0"]) .iso-a{opacity:.12}.trace-demo:not([data-stage="0"]) .iso-b{opacity:1}.old-position{fill:none;stroke:#92a1aa;stroke-width:2;stroke-dasharray:4 5;opacity:0}.trace-demo:not([data-stage="0"]) .old-position{opacity:.7}#trace-connector{stroke:#2361e8;stroke-width:2;stroke-dasharray:5 7;fill:none;opacity:.55;transition:d .4s}.trace-point{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;border:1px solid #9eaeb7;border-radius:50%;background:var(--paper);color:#3e5a69;font-size:12px;display:grid;place-items:center;transition:left .4s,top .4s,background .2s}.trace-point[aria-pressed="true"]{background:var(--blue);color:white;border-color:var(--blue)}.trace-point:hover{box-shadow:0 0 0 4px #2361e820}.point-01{left:22%;top:62.7%}.point-02{left:54%;top:23.4%}.point-03{left:73.5%;top:58%}.trace-demo:not([data-stage="0"]) .point-03{left:79%;top:62.5%}.point-record{min-height:340px;padding:25px 0;border-top:1px solid var(--line)}.point-record h3{font-size:42px;font-weight:500;letter-spacing:-1.5px;margin-top:16px;color:var(--blue)}.point-state{font-size:13px;line-height:1.6;margin-top:15px;min-height:42px;color:var(--muted)}.point-record dl{margin-top:12px}.point-record dd{font-size:11px}.point-history{margin-top:18px;border-top:1px solid var(--line);padding-top:16px;animation:menu-information .25s both}.point-history p{display:flex;justify-content:space-between;gap:12px;font-size:11px;line-height:1.8;margin:8px 0}.point-history span{color:var(--muted)}.point-history b{font-weight:400}.trace-section{padding-top:90px}.trace-point:focus-visible,.trace-steps button:focus-visible{outline:2px solid var(--blue);outline-offset:5px}@media(max-width:700px){.trace-example{gap:25px;grid-template-columns:minmax(0,1.5fr) minmax(190px,1fr)}.trace-steps{gap:15px}.trace-steps button{font-size:11px}.point-record h3{font-size:35px}}@media(max-width:600px){.lost-context{height:270px;gap:12%;margin-top:30px}.loose-sheet{width:160px;min-height:160px;padding:17px}.loose-photo{width:120px;min-height:145px;padding:15px}.loose-sheet svg{height:70px}.loose-sheet>span{font-size:9px}.loose-sheet b,.loose-photo b{font-size:12px}.loose-photo .photo-symbol{height:70px}.missing-link{left:48%;font-size:30px;top:44%}.trace-problem{padding-bottom:20px}.trace-section{padding-top:65px}.trace-demo{margin-top:35px}.trace-steps{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.trace-steps button{text-align:left;font-size:12px}.trace-example{grid-template-columns:1fr;margin-top:25px;gap:20px}.trace-point{width:44px;height:44px;font-size:11px}.point-record{min-height:0;padding-top:22px}.point-record h3{font-size:34px}.point-state{min-height:0;margin-top:12px}.point-record dl{margin-top:18px}.point-history{padding-top:12px}.trace-drawing-head{font-size:10px}.trace-sheet{margin-block:12px}.trace-section .problem-heading h2{font-size:38px}}@media(prefers-reduced-motion:reduce){.iso-line,.trace-point,#trace-connector,.point-history{transition:none;animation:none}}
/* Menu retains its blue hover treatment; other text controls stay unfilled. */
@media(hover:hover) and (pointer:fine){
  .site-menu:not([open]):hover{background:var(--blue);color:white}
  .site-menu:not([open]):hover summary>span{text-decoration:none}
}
.site-menu:not([open]):focus-within{background:var(--blue);color:white}
.site-menu:not([open]):focus-within summary:focus-visible{outline-color:white}

/* Start each story section directly with its question. */
.trace-problem .problem-heading,.trace-section .problem-heading{display:block}
.trace-problem .problem-heading h2,.trace-section .problem-heading h2{width:100%;margin-top:0}

/* Quiet menu surface, with a smaller footprint after scrolling. */
.site-menu{width:min(560px,46vw);transition:width .25s ease,background-color .2s ease,color .2s ease}
.site-menu:not([open]){background:#e9e9e7}
.site-menu summary{min-height:56px;padding-inline:24px;transition:min-height .25s ease}
.site-menu.is-compact:not([open]){width:min(420px,40vw)}
.site-menu.is-compact:not([open]) summary{min-height:48px}
@media(hover:hover) and (pointer:fine){.site-menu:not([open]):hover{background:var(--blue);color:white}}
.site-menu:not([open]):focus-within{background:var(--blue);color:white}
@media(max-width:600px){
 .site-menu{width:96px}
 .site-menu summary{min-height:48px;padding-inline:12px}
 .site-menu.is-compact:not([open]){width:88px}
 .site-menu.is-compact:not([open]) summary{min-height:44px}
 .site-menu[open]{width:90%}
}
@media(prefers-reduced-motion:reduce){.site-menu,.site-menu summary{transition:none}}

/* Full-screen closing section with navigation that adapts to its surface. */
.site-footer{min-height:100svh;padding-top:100px;padding-bottom:24px}
.site-footer>.wrap{min-height:calc(100svh - 124px);display:flex;flex-direction:column;justify-content:space-between}
.footer-wordmark{margin-block:30px;font-size:clamp(100px,min(30.2vw,40svh),465px)}
.site-menu:not([open]){background:transparent}
.site-menu.is-on-color:not([open]){background:#fff;color:var(--ink)}
@media(hover:hover) and (pointer:fine){.site-menu:not([open]):hover{background:var(--blue);color:#fff}}
.site-menu:not([open]):focus-within{background:var(--blue);color:#fff}

/* Frosted glass stays visible while letting the page show through. */
.site-menu:not([open]){background:rgba(221,223,220,.66);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.site-menu.is-on-color:not([open]){background:rgba(255,255,255,.86)}
@media(hover:hover) and (pointer:fine){.site-menu:not([open]):hover{background:var(--blue);color:#fff}}
.site-menu:not([open]):focus-within{background:var(--blue);color:#fff}

@media(min-width:601px){.trace-problem .problem-heading h2,.trace-section .problem-heading h2{font-size:clamp(32px,4.5vw,68px)}}

/* Give the revision problem its own full, calm scene. */
.trace-problem{min-height:100svh;padding-top:clamp(100px,14svh,160px);padding-bottom:90px}
.lost-context{height:clamp(400px,60svh,620px);margin-top:55px;gap:14%;overflow:clip}
.loose-sheet{width:clamp(250px,27vw,360px);min-height:300px;padding:30px}
.loose-photo{width:clamp(220px,23vw,310px);min-height:280px;padding:28px}
.loose-sheet svg{height:160px}
.loose-photo .photo-symbol{height:160px}
.loose-sheet>span{font-size:13px}
.loose-sheet b,.loose-photo b{font-size:18px}
.missing-link{top:46%}
.problem-arrived .loose-sheet{animation:paper-arrives 2.6s cubic-bezier(.2,.7,.2,1) both}
.problem-arrived .loose-photo{animation:photo-arrives 2.8s cubic-bezier(.2,.7,.2,1) both}
.problem-arrived .photo-symbol{animation:photo-settles 2.8s ease-out both}
.problem-arrived .loose-sheet svg{animation:line-appears 2.2s ease-out both}
@keyframes paper-arrives{0%{opacity:.15;transform:translate(-50px,90px) rotate(-15deg)}65%{opacity:1;transform:translate(0,-10px) rotate(-4deg)}100%{transform:translate(0,0) rotate(-6deg)}}
@keyframes photo-arrives{0%{opacity:.15;transform:translate(60px,100px) rotate(16deg)}65%{opacity:1;transform:translate(0,-12px) rotate(4deg)}100%{transform:translate(0,0) rotate(6deg)}}
@keyframes photo-settles{from{opacity:.3;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
@keyframes line-appears{from{opacity:.2;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.loose-sheet{width:210px;min-height:250px;padding:22px}.loose-photo{width:180px;min-height:230px;padding:22px}.lost-context{gap:10%}}
@media(max-width:600px){
 .trace-problem{min-height:90svh;padding-top:90px;padding-bottom:65px}
 .lost-context{height:380px;margin-top:35px;gap:8%}
 .loose-sheet{width:160px;min-height:210px;padding:18px}
 .loose-photo{width:140px;min-height:190px;padding:17px}
 .loose-sheet svg,.loose-photo .photo-symbol{height:105px}
 .loose-sheet>span{font-size:10px}
 .loose-sheet b,.loose-photo b{font-size:13px}
 .missing-link{left:48%;top:47%}
}
@media(prefers-reduced-motion:reduce){.problem-arrived .loose-sheet,.problem-arrived .loose-photo,.problem-arrived .photo-symbol,.problem-arrived .loose-sheet svg{animation:none}}

/* Footer navigation sits together in the right-hand corner. */
.footer-top nav{display:flex;flex-direction:column;width:max-content;max-width:100%;margin:0 0 0 auto;gap:4px;align-items:stretch}
.footer-top nav a{justify-content:flex-start;padding-inline:0}
@media(max-width:600px){.footer-top{flex-direction:row;align-items:flex-start;gap:24px}.footer-top nav{flex-shrink:0}.footer-top .eyebrow{max-width:120px}}
@media(min-width:601px){.site-footer{padding-top:80px}.site-footer>.wrap{min-height:calc(100svh - 104px)}.footer-wordmark{font-size:clamp(100px,min(30.2vw,36svh),465px);margin-block:20px}}
/* Compact footer link rhythm without the oversized button spacing. */
.footer-top nav{gap:0}
.footer-top nav a{min-height:30px;padding-block:4px;line-height:1.4}
@media(max-width:600px){.footer-top nav a{min-height:34px;padding-block:5px}}

/* One open field-work sequence, without extra cards or panels. */
.scan-story{margin-top:clamp(110px,18svh,200px);padding-top:65px;border-top:1px solid var(--line)}
.scan-story h2{font-size:clamp(32px,4.5vw,68px);font-weight:500;letter-spacing:-.055em;line-height:1.1}
.scan-steps{display:flex;justify-content:space-between;gap:18px;max-width:850px;margin:50px auto 0}
.scan-steps button{background:none;border:0;min-height:44px;padding:10px 0;color:var(--muted);font-size:13px;text-underline-offset:6px}
.scan-steps button:hover{text-decoration:underline}.scan-steps button[aria-pressed="true"]{color:var(--blue);font-weight:600}
.scan-steps button:focus-visible{outline:2px solid var(--blue);outline-offset:5px}
.scan-scene{max-width:1000px;margin:20px auto 0;overflow:clip}.scan-scene svg{display:block;width:100%;height:auto}
.scan-scene text{fill:var(--ink);font:17px sans-serif;letter-spacing:0}.scan-scene .white-text{fill:#fff;font-size:18px}
.scan-result,.scan-evidence,.scan-reviewed{opacity:0;transition:opacity .35s ease,transform .35s ease;transform:translateY(10px)}
.scan-camera{transition:opacity .25s}.scan-story:not([data-scan-stage="0"]) .scan-camera{opacity:0}
.scan-story:not([data-scan-stage="0"]) .scan-result{opacity:1;transform:none}
.scan-story[data-scan-stage="2"] .scan-evidence,.scan-story[data-scan-stage="3"] .scan-evidence,.scan-story[data-scan-stage="3"] .scan-reviewed{opacity:1;transform:none}
.scan-story.scan-playing[data-scan-stage="0"] .scan-beam{animation:qr-sweep .9s ease-in-out both}
.scan-story.scan-playing .scan-link{animation:link-arrives .8s ease-out both}
@keyframes qr-sweep{from{transform:translateY(-12px);opacity:.3}to{transform:translateY(96px);opacity:1}}
@keyframes link-arrives{from{stroke-dashoffset:60;opacity:0}to{stroke-dashoffset:0;opacity:1}}
.scan-benefit{text-align:center;font-size:clamp(18px,2vw,26px);letter-spacing:-.025em;margin-top:10px;min-height:2.8em;line-height:1.4}
.scan-note{text-align:center;color:var(--muted);font-size:10px;line-height:1.6;margin-top:12px}
@media(max-width:600px){.scan-story{margin-top:95px;padding-top:45px}.scan-steps{margin-top:28px;gap:12px}.scan-steps button{font-size:11px}.scan-scene{width:110%;max-width:none;margin-left:-5%;margin-top:20px}.scan-benefit{font-size:19px;max-width:290px;margin:18px auto 0}.scan-note{font-size:9px}}
@media(prefers-reduced-motion:reduce){.scan-story .scan-beam,.scan-story .scan-link{animation:none!important}.scan-result,.scan-evidence,.scan-reviewed,.scan-camera{transition:none}}