:root {
  color-scheme: dark;
  --cream: #f4e8cf;
  --ink: #22334a;
  --paper: #f2e7c9;
  --rule: rgba(77,103,142,.30);
  --hand: 'Caveat', 'Bradley Hand', 'Segoe Print', cursive;
}
*, *::before, *::after { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; }
body { background: #261d17; color: #fff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

/* Full-bleed photo for desktop. It never stretches; wide screens crop top/bottom
   a little instead of showing artificial side panels. Mobile pans horizontally. */
.desk-viewport { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; overscroll-behavior: contain; }
.desk-stage { position: relative; flex: none; width: max(100vw, calc(100dvh * 1.776833)); aspect-ratio: 1672 / 941; }
.desk-photo { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.hotspots { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hotspot { cursor: pointer; outline: none; }
.hotspot .hit { pointer-events: all; fill: rgba(0,0,0,.001); stroke: transparent; stroke-width: 24px; vector-effect: non-scaling-stroke; }
.hotspot .contour { pointer-events: none; fill: rgba(0,0,0,.001); stroke: transparent; stroke-width: 2.7; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; transition: fill .18s ease, stroke .18s ease, filter .18s ease; }
@media (hover:hover) and (pointer:fine) {
  .hotspot:hover .contour { fill: rgba(255,239,197,.055); stroke: rgba(255,232,185,.9); filter: drop-shadow(0 0 4px rgba(255,237,186,.8)); }
}
.hotspot:focus-visible .contour { fill: rgba(255,235,180,.14); stroke: #fff2c5; stroke-width: 3.5; }
.hotspot:active .contour { fill: rgba(255,235,180,.14); }
.debug-mode .hotspot .contour { stroke-width: 2.5; filter: none; }
.debug-label { fill: #fff; font: bold 21px system-ui, sans-serif; text-anchor: middle; paint-order: stroke; stroke: rgba(0,0,0,.95); stroke-width: 5; pointer-events: none; }
.tooltip { position: fixed; z-index: 9; pointer-events: none; max-width: 250px; padding: 8px 12px; border: 1px solid rgba(255,234,193,.28); background: rgba(27,21,18,.94); color: #f8eedc; border-radius: 8px; box-shadow: 0 8px 24px #0006; font-size: 13px; letter-spacing: .015em; transform: translate(14px, 16px); }

.mobile-hint { position: fixed; top: calc(env(safe-area-inset-top) + 14px); left: 50%; transform: translateX(-50%); z-index: 10; align-items: center; gap: 5px; background: rgba(30,23,20,.82); color: #fff3db; backdrop-filter: blur(10px); white-space: nowrap; padding: 6px 8px 6px 13px; font-size: 12px; border-radius: 30px; border: 1px solid #ffffff30; box-shadow: 0 4px 12px #0005; }
.mobile-hint button { border: 0; color: inherit; background: none; cursor: pointer; font-size: 21px; line-height: 1; width: 31px; height: 30px; }
@media (max-aspect-ratio: 1/1) {
  .desk-viewport { display: block; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; touch-action: pan-x; }
  .desk-viewport::-webkit-scrollbar { display: none; }
  .desk-stage { width: calc(100dvh * 1.776833); height: 100dvh; }
  .mobile-hint:not([hidden]) { display: flex; }
}

/* Overlay/dialog system */
.overlay { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: clamp(10px, 3vw, 26px); background: rgba(16,12,11,.79); backdrop-filter: blur(7px); animation: appear .2s ease-out; }
.dialog { position: relative; width: 100%; min-width: 0; max-height: calc(100dvh - 24px); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 25px 90px #000a; border-radius: 9px; animation: lift .23s ease-out; }
.dialog-scroll { overflow-y: auto; min-height: 0; flex: 1; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.close-dialog { position: absolute; z-index: 2; right: 12px; top: 10px; width: 42px; height: 42px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(25,25,25,.78); color: #fff; cursor: pointer; font-size: 28px; line-height: 1; }
.close-dialog:hover, .close-dialog:focus-visible { outline: 2px solid #ffe5aa; }
.dialog-video { max-width: 950px; background: #12100e; border: 1px solid #4d3b2c; padding: 13px; }
.video-frame { width: 100%; aspect-ratio: 16 / 9; background: #080808; overflow: hidden; border-radius: 3px; }
.video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.video-heading { color: #eee0c7; margin: 4px 56px 14px 3px; font: 500 18px Georgia, serif; }
.video-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; align-items: center; padding: 14px 5px 4px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.video-footer a { color: #f7e3ba; text-underline-offset: 3px; }
.video-footer a:hover { color: #fff; }
.video-fallback { margin: 12px 0 2px; color: #d3c2a2; font-size: 12px; text-align: center; }
.video-fallback a { color: #fae7b9; }

/* The dialogs use actual DOM text, not text baked into an image. */
.dialog-paper { max-width: 640px; background: var(--paper); color: var(--ink); border: 1px solid #e8dab5;
  background-image: linear-gradient(90deg, transparent 60px, rgba(185,80,80,.33) 60px, rgba(185,80,80,.33) 62px, transparent 62px),
  repeating-linear-gradient(to bottom, transparent 0px, transparent 36px, var(--rule) 37px, transparent 38px);
  background-position: 0 0, 0 17px; }
.dialog-paper.wide { max-width: 900px; }
.dialog-paper::before { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 35px rgba(91,71,34,.09); }
.dialog-paper .close-dialog { background: #e1d6b9; color: #27394c; }
.paper-inner { padding: 27px clamp(27px, 6vw, 56px) 38px clamp(74px, 9vw, 95px); font-family: var(--hand); }
.paper-kicker { font: 700 10px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; text-transform: uppercase; letter-spacing: .24em; color: #6b7890; margin-bottom: 7px; }
.paper-title { font-family: var(--hand); font-size: clamp(42px, 6vw, 58px); font-weight: 700; line-height: 1; margin: 0 56px 19px 0; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.paper-note { margin: 0 0 10px; font-family: var(--hand); font-size: clamp(26px, 3vw, 34px); font-weight: 500; line-height: 1.15; }
.paper-note::before { content: '– '; }
.paper-divider { height: 1px; background: #8c948c80; margin: 20px 0; }
.paper-cta { display: inline-block; margin-top: 13px; padding: 8px 20px; border: 2px solid #253c52; border-radius: 65% 43% 57% 38% / 28% 40% 37% 46%; color: #22384c; background: rgba(255,255,255,.22); text-decoration: none; font: 700 31px var(--hand); }
.paper-cta:hover, .paper-cta:focus-visible { background: #22384c; color: #fff7e4; }

/* Investment Criteria: ruled lines and handwriting share the SAME scrolling
   element. Previously the lines lived on the fixed dialog background while the
   text scrolled, making it appear to float over stationary notebook paper. */
.dialog-paper--criteria {
  max-width: 760px;
  background: var(--paper); /* solid fixed shell; no ruled background here */
}
.dialog-paper--criteria .criteria-document {
  min-height: 100%;
  background-image:
    linear-gradient(90deg, transparent 60px, rgba(185,80,80,.33) 60px, rgba(185,80,80,.33) 62px, transparent 62px),
    repeating-linear-gradient(to bottom, transparent 0px, transparent 36px, var(--rule) 37px, transparent 38px);
  background-position: 0 0, 0 17px;
  background-repeat: repeat;
}
.criteria-document { padding-top: 29px; padding-bottom: 40px; }
.criteria-document .paper-title { margin-bottom: 22px; }
.criteria-paragraph, .criteria-heart-line {
  margin: 0;
  color: #273b50;
  font-family: var(--hand);
  font-size: clamp(25px, 2.5vw, 31px);
  font-weight: 500;
  line-height: 1.16;
}
.criteria-paragraph { margin-bottom: 24px; }
.criteria-paragraph strong, .criteria-heart-line strong { font-weight: 700; }
.criteria-heart-introduction { margin-top: 7px; margin-bottom: 17px; }
.criteria-heart { display: grid; gap: 8px; margin: 0 0 23px; }
.criteria-heart-line { padding-left: 20px; text-indent: -20px; }
.criteria-heart-line strong { color: #1d3249; }
.criteria-closing { margin-top: 23px; margin-bottom: 0; }
.criteria-apply { font-weight: 700; color: #19354e; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.criteria-apply:hover, .criteria-apply:focus-visible { color: #0b6494; outline-offset: 3px; }
@media (max-width: 600px) {
  .criteria-document { padding: 25px 25px 29px 56px; }
  .criteria-document .paper-title { font-size: 42px; margin-right: 28px; }
  .criteria-paragraph, .criteria-heart-line { font-size: clamp(24px, 6.2vw, 28px); line-height: 1.19; }
  .criteria-paragraph { margin-bottom: 19px; }
  .criteria-heart { gap: 8px; margin-bottom: 16px; }
}
.paper-subnote { font: 12px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #536070; margin: 9px 0 0; }
.portfolio-section { margin-top: 22px; }
.portfolio-section h3 { margin: 0 0 12px; font: 700 38px var(--hand); text-decoration: underline; text-underline-offset: 5px; }
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(145px,1fr)); gap: 13px; }
.portfolio-tile { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 7px; min-height: 100px; padding: 14px 8px; color: #22384c; border: 1.5px solid rgba(42,57,72,.38); border-radius: 4px; text-decoration: none; background: rgba(255,255,255,.28); transition: background .2s, transform .2s; }
a.portfolio-tile:hover, a.portfolio-tile:focus-visible { background: rgba(255,255,255,.75); transform: translateY(-2px); }
.portfolio-tile img { display: block; width: 100%; max-width: 145px; height: 55px; object-fit: contain; }
.portfolio-name { font: 700 clamp(20px, 2.5vw, 26px) var(--hand); line-height: 1.03; }
.portfolio-note { font: 10px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #657181; }
.portfolio-explainer { margin-top: 24px; font: 12px/1.55 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #677287; }
@media (max-width: 600px) {
  .dialog-paper { max-height: calc(100dvh - 18px); }
  .overlay { padding: 9px; }
  .paper-inner { padding: 23px 24px 32px 73px; }
  .paper-title { margin-right: 35px; font-size: 44px; }
  .paper-note { font-size: 28px; }
  .dialog-video { padding: 8px; }
  .video-heading { font-size: 15px; margin-bottom: 11px; }
  .video-footer { font-size: 11px; }
}
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes lift { from { transform: translateY(10px); opacity: .75; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
 *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ----------- V4: minimal, page-turning portfolio binder ----------- */
.dialog-binder { max-width: min(1320px, 97vw); background: transparent; box-shadow: none; overflow: visible; }
.dialog-binder .dialog-scroll { overflow: visible; }
.dialog-binder .close-dialog { top: -36px; right: 0; color: white; background: #17191cbd; z-index: 7; }
.binder { padding: 46px 12px 9px; color: #1f2730; font-family: Georgia, 'Times New Roman', serif; }
.binder-tabs { display: flex; width: 100%; gap: clamp(8px,7vw,90px); align-items: end; justify-content: center; padding: 0 12%; height: 42px; position: relative; z-index: 3; }
.binder-tab { border: 1px solid #b8a58d; border-bottom: 0; border-radius: 13px 13px 0 0; min-width: clamp(140px,23vw,265px); background: #e2d5bf; padding: 10px 18px 8px; font-family: Georgia,serif; font-size: clamp(16px,1.8vw,23px); color: #293443; cursor: pointer; box-shadow: 0 -3px 6px #0002; }
.binder-tab.selected { background: #264264; color: #fff; border-color: #314b6b; }
.binder-tab:hover { filter: brightness(1.05); }
.binder-shell { width: 100%; height: min(73dvh, 690px); min-height: 395px; display: grid; grid-template-columns: 1fr 1fr; position: relative; background: #172239; border: 12px solid #1d2838; border-radius: 25px; box-shadow: inset 0 0 0 2px #6e604e, 0 12px 45px #000c, 0 1px 2px #0009; padding: 13px; }
.binder-leather-left,.binder-leather-right { background: #1a283d; min-width: 0; height: 100%; display:flex; }
.binder-blank-page, .binder-company-page { background: linear-gradient(111deg,#f1ece1,#fffdf6 40%,#faf4e7); border: 1px solid #e2d6c4; box-shadow: 0 0 0 3px #c2b6a2, 0 0 0 6px #f6efdf, 2px 3px 0 8px #e2d6c4; width:100%; height:100%; position: relative; }
.binder-blank-page { background: linear-gradient(90deg,#e7ded0 0%,#f9f5e9 11%,#fffdf7 60%); border-radius: 6px 1px 1px 7px; }
.binder-company-page { background: linear-gradient(91deg,#eee4d1 0%, #fffdf7 11%, #fffef9 93%, #f1e9da 100%); border-radius: 1px 5px 5px 1px; overflow: hidden; perspective: 900px; }
.binder-company-page::after { content:''; position:absolute; inset:0; pointer-events:none; box-shadow: inset 7px 0 14px #7857370c, inset -6px 0 10px #7857370d; }
.binder-rings { position: absolute; left: 50%; top: 13%; bottom: 11%; transform: translateX(-50%); width: 38px; z-index: 4; display:flex; flex-direction:column; justify-content:space-between; pointer-events:none; }
.binder-ring { width: 38px; height: 24px; border: 6px solid #b8a57a; border-right-color: #f5e3b0; border-bottom-color: #514d45; border-left-color: #827b71; border-radius: 55%; box-shadow: 0 3px 4px #0008, inset 0 1px 3px #0007; background: transparent; }
.binder-page-inside { height:100%; width:100%; display:flex; flex-direction:column; align-items:center; padding: clamp(20px,3dvh,32px) clamp(24px,3vw,45px) clamp(12px,2dvh,24px); gap: clamp(9px,1.7dvh,18px); transition: opacity .19s ease, transform .19s ease; }
.binder-company-page.is-flipping .binder-page-inside { opacity: 0; transform: rotateY(-8deg) translateX(-22px); }
.binder-logo { text-decoration: none; display:flex; align-items:center; justify-content:center; min-height: clamp(58px,9dvh,92px); max-width:100%; color:#1c334e; text-align:center; transition:transform .2s; }
.binder-logo:hover,.binder-logo:focus-visible { transform:scale(1.03); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.binder-logo--static { cursor: default; }
.binder-logo--static:hover { transform: none; text-decoration: none; }
.binder-logo img { height:clamp(46px,8dvh,82px); width:min(400px,35vw); max-width:100%; object-fit:contain; display:block; }
/* Preserve the official logos' proportions and their transparent backgrounds. */
.binder-wordmark { font: 650 clamp(31px,3.1vw,58px)/1.1 -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; letter-spacing:-.045em; }
.binder-photo-frame { width:min(100%,530px); height:min(36dvh,310px); min-height:110px; background:#f8f4ec; padding:6px; box-shadow: 0 1px 12px #44342038; border:1px solid #d5c9b5; transform:rotate(-.35deg); flex:1 1 auto; overflow:hidden; }
.binder-company-photo { width:100%; height:100%; object-fit:cover; display:block; }
.binder-company-description { margin:0; align-self:stretch; font:clamp(13px,1.2vw,19px)/1.45 -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; color:#263244; min-height:clamp(56px,8dvh,100px); display:grid; place-items:center; text-align:left; }
.binder-page-nav { border-top:1px solid #cfcac0; display:flex; align-items:center; justify-content:space-between; width:100%; padding:7px 0 0; margin-top:auto; }
.binder-counter { font:16px/1.2 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:#3c4149; font-variant-numeric:tabular-nums; }
.binder-nav-button { border:0; background:transparent; color:#1e364e; cursor:pointer; font:44px/1 Georgia,serif; width:54px; height:42px; display:grid; place-items:center; border-radius:50%; }
.binder-nav-button:hover:not(:disabled) { background:#2a3f571a; }
.binder-nav-button:disabled { color:#b4b6b6; cursor:not-allowed; }
@media (max-width: 700px) {
  .dialog-binder { width:min(98vw,500px); max-height:calc(100dvh - 18px); }
  .dialog-binder .dialog-scroll { overflow:hidden; }
  .dialog-binder .close-dialog { top:2px; right:3px; width:33px; height:33px; font-size:25px; }
  .binder { padding:34px 2px 3px; }
  .binder-tabs { gap:8px; height:38px; padding:0 6px; }
  .binder-tab { min-width:0; width:50%; font-size:clamp(15px,4vw,18px); padding:9px 4px; }
  .binder-shell { display:block; padding:9px; border-width:7px; height:min(78dvh,730px); min-height:350px; border-radius:15px; }
  .binder-leather-left,.binder-blank-page,.binder-rings { display:none; }
  .binder-leather-right { width:100%; }
  .binder-company-page { border-radius:3px; box-shadow:inset 0 0 10px #aaa4; }
  .binder-page-inside { padding:clamp(14px,2dvh,22px) 16px 14px; gap:8px; }
  .binder-logo { min-height:55px; }
  .binder-logo img { width:min(100%,320px); height:clamp(46px,10dvh,74px); }
  .binder-wordmark { font-size:clamp(28px,7vw,42px); }
  .binder-photo-frame { max-height:33dvh; min-height:95px; }
  .binder-company-description { font-size:clamp(12px,3.3vw,16px); min-height:65px; line-height:1.35; }
  .binder-page-nav { padding-top:2px; }
}

/* Goodreads reading-list dialog — isolated in an iframe so Goodreads' legacy
   widget script cannot interfere with the Jumpspeed website itself. */
.dialog-reading { width: min(100%, 640px); max-height: min(92dvh, 750px); background: #fdfbf5; border: 1px solid #dfd0b9; color: #263547; padding: 23px 20px 18px; border-radius: 12px; }
.dialog-reading .close-dialog { background: #e8e0d2; color: #293344; top: 14px; right: 12px; }
.dialog-reading .dialog-scroll { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.reading-heading { font: 500 clamp(28px,4vw,40px) Georgia,serif; text-align:center; margin: 5px 48px 3px; letter-spacing: -.025em; }
.reading-subheading { font: 13px/1.5 system-ui,sans-serif; color:#86735f; text-align:center; margin: 0 0 15px; }
.reading-widget-frame { width:100%; height:min(67dvh,585px); min-height:240px; flex:1 1 auto; border:0; background:#fff; border-radius:7px; }
@media (max-width: 600px) {
  .dialog-reading { padding: 18px 9px 10px; max-height:calc(100dvh - 16px); }
  .reading-widget-frame { height: min(70dvh,620px); }
}


/* Version 18 — Contact Jumpspeed now uses a cleaner digital/email form style. */
.dialog-contact {
  width: min(100%, 660px);
  background: linear-gradient(180deg, #f7fbff 0%, #eef3f8 100%);
  border: 1px solid #cad6e3;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(17, 31, 48, .24);
}
.dialog-contact .contact-sheet {
  min-height: 100%;
  background: transparent;
  background-image: none;
  padding: 26px 26px 30px;
}
.dialog-contact .paper-title {
  margin: 0 44px 6px 0;
  font: 700 clamp(31px, 4vw, 40px)/1.08 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #17324a;
  letter-spacing: -.03em;
}
.contact-intro {
  font: 500 16px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  margin: 0 0 18px;
  color: #5b6f83;
}
.contact-form { display:flex; flex-direction:column; gap: 14px; }
.contact-field { display:flex; flex-direction:column; gap: 6px; }
.contact-field label {
  font: 700 12px/1.2 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color:#33475b;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.contact-field input, .contact-field textarea {
  width:100%; min-width:0; padding: 12px 14px;
  color:#1c3046; font: 500 16px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:#ffffff; border:1px solid #c7d3df; border-radius: 10px;
  box-shadow: inset 0 1px 2px rgba(14, 36, 56, .05);
  outline-offset: 2px;
}
.contact-field input::placeholder, .contact-field textarea::placeholder { color:#96a4b3; }
.contact-field textarea { min-height:150px; resize:vertical; }
.contact-field input:focus, .contact-field textarea:focus { outline:2px solid rgba(35,112,189,.22); border-color:#2370bd; }
.contact-submit {
  align-self:flex-end; min-width:140px; min-height:46px; cursor:pointer;
  padding: 11px 20px; margin-top: 2px;
  background:#214867; color:#f8fbff; border:1px solid #1a3c57;
  border-radius: 10px; font: 700 15px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  letter-spacing: .01em;
}
.contact-submit:hover:not(:disabled), .contact-submit:focus-visible { background:#2b5a80; }
.contact-submit:disabled { opacity:.7; cursor:wait; }
.contact-feedback { margin:0; min-height:0; color:#53677c; font: 500 14px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.contact-feedback:empty { display:none; }
.contact-feedback.is-error { color:#b63f3f; }
.contact-success { padding: 48px 8px; font:700 22px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color:#214867; }
.contact-honeypot { position:absolute !important; left:-10000px !important; top:auto !important; width:1px !important; height:1px !important; overflow:hidden !important; }
@media (max-width:600px) {
  .dialog-contact .contact-sheet { padding:22px 18px 24px; }
  .dialog-contact .paper-title { font-size:clamp(29px,8vw,36px); margin-right:30px; }
  .contact-intro { font-size:15px; }
  .contact-form { gap:12px; }
  .contact-field label { font-size:11px; }
  .contact-field input, .contact-field textarea { font-size:16px; }
  .contact-field textarea { min-height:130px; }
  .contact-submit { width:100%; justify-content:center; }
}
/* Keep the keyboard tap region separate from the video screen above it. */
.hotspot[data-hotspot="laptop-keyboard"] .hit { stroke-width: 12px; }

/* Animated, photograph-aligned weather in the office window. */
.weather-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.hotspots { z-index: 2; }
.weather-sound {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  z-index: 12;
  font: 12px/1.2 system-ui,sans-serif;
  color: #fff4df;
  background: rgba(27,25,26,.76);
  backdrop-filter: blur(8px);
  border: 1px solid #fff5;
  border-radius: 30px;
  cursor: pointer;
  min-height: 37px;
  padding: 7px 13px;
}
.weather-sound:hover,.weather-sound:focus-visible { border-color:#f9dfad; background:rgba(27,25,26,.94); }
@media(max-width:520px) { .weather-sound { font-size:11px; min-height:36px; top:max(12px,env(safe-area-inset-top)); left:max(12px,env(safe-area-inset-left)); } }

/* Keep the small eyeglasses clickable without covering the adjacent LinkedIn mug. */
.hotspot[data-hotspot="eyeglasses"] .hit { stroke-width: 8px; }