/* Component styling stays outside the cinematic scene and its geometry. */
:root {
  --component-surface: #201e1b;
  --component-raised: #28251f;
  --component-line: #514b41;
  --component-radius: 12px;
}

.header-link { gap: 6px; white-space: nowrap; }
.header-work-short { display: none; }

/* Generated artwork fills each card; text and actions remain native HTML. */
#apps { padding: 64px clamp(20px, 4.5vw, 76px); }
#apps .wrap { max-width: 1520px; }
#apps .section-heading { margin-bottom: 44px; }
#apps .section-heading h2 { font-size: clamp(48px, 6.8vw, 112px); font-weight: 600; line-height: 1.04; }
#apps .section-heading > p { display: none; }
#apps .apps-list { gap: 32px; align-items: stretch; }
#apps .product-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  min-width: 0;
  background: linear-gradient(125deg, #1e1d1a, #171717);
  border: 1px solid #403b31;
  border-radius: 24px;
}
.product-preview {
  position: relative;
  display: block;
  flex: 0 0 auto;
  aspect-ratio: 694 / 386;
  margin: 26px 26px 0;
  padding: 0;
  height: auto;
  overflow: hidden;
  border-radius: 20px;
}
#apps .product-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  filter: none;
}
.product-card-body { display: flex; flex: 1; flex-direction: column; padding: 26px 30px 28px; }
.product-identity { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
#apps .product-card h3 { margin: 0; font-size: clamp(28px, 2.85vw, 48px); font-weight: 600; line-height: 1.1; }
#apps .product-card .status { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; min-height: 36px; border: 1px solid #6b391f; border-radius: 999px; color: #ff9c6c; background: #2b1d14; font-size: 12px; line-height: 1.3; white-space: nowrap; }
#apps .product-card .status::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--orange); }
#apps .product-card-body > p { margin: 16px 0 20px; max-width: 35ch; color: #bdbbb8; font-size: clamp(16px, 1.6vw, 24px); line-height: 1.45; }
.product-action {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 44px;
  margin-top: auto;
  padding: 8px 0;
  border: 0;
  border-bottom: 2px solid var(--orange);
  background: transparent;
  color: #ff7a3d;
  font-size: clamp(18px, 1.55vw, 24px);
  font-weight: 600;
  text-align: left;
}
#product-dialog { border-radius: var(--component-radius); }
.footer .footer-socials { display: flex; justify-content: flex-end; gap: 28px; }
.footer-socials a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; font-size: 14px; color: var(--paper); }

/* Align summaries and actions without hiding commercial detail. */
.pricing-section .pricing-grid { gap: 20px; }
.pricing-section .price-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 24px;
  padding: 28px 24px;
  border-color: var(--component-line);
  border-radius: var(--component-radius);
  background: var(--component-surface);
}
.pricing-section .package-category { min-height: 34px; margin-bottom: 12px; color: #c9c1b4; }
.pricing-section .package-price { color: var(--paper); margin-block: 24px; }
.pricing-section .package-price > span { color: #ff9c6c; }
.pricing-section .package-purpose { font-size: 15px; }
.pricing-section .package-cta {
  grid-column: auto;
  align-self: start;
  min-height: 48px;
  border: 1px solid #e97843;
  border-radius: 8px;
  color: #ffb28d;
  background: #33251c;
}
.pricing-section .package-detail {
  border: 0;
  border-top: 1px solid var(--component-line);
  padding: 0;
  min-width: 0;
}
.pricing-section .package-detail-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  gap: 12px;
  margin: 0;
  font-size: 14px;
  cursor: pointer;
  list-style: none;
}
.package-detail-label::-webkit-details-marker { display: none; }
.package-detail[open] .package-detail-label > span { transform: rotate(45deg); }
.pricing-section .price-card ul { padding: 0; list-style: none; gap: 0; }
.pricing-section .price-card li {
  padding: 12px 0;
  border-top: 1px solid #eeede71a;
  line-height: 1.5;
}
.pricing-section .package-boundary { margin-top: 16px; color: #c9c1b4; }
.pricing-section .pricing-notes { gap: 20px; margin-top: 28px; }

/* One frame contains selection, preview, project context and actions. */
.project-showcase {
  border: 1px solid var(--component-line);
  border-radius: var(--component-radius);
  background: var(--component-surface);
  padding: 24px;
}
.project-toolbar { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; margin-bottom: 24px; }
#work .gallery-select { justify-content: flex-start; flex-wrap: wrap; gap: 8px; margin: 0; }
#work .gallery-select button { border-radius: 8px; min-height: 44px; border-color: var(--component-line); color: var(--paper); }
#work .gallery-select button[aria-pressed=true] { color: #ffb28d; background: #39271d; border-color: #e97843; }
#work .work-enquiry { margin: 0; font-size: 14px; }
#work .work-grid { max-width: none; }
#work .work-item:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(240px, 1fr); gap: 28px; }
#work .site-preview { height: 460px; border-radius: 8px; border-color: var(--component-line); overflow: auto; }
#work .project-caption { display: flex; flex-direction: column; gap: 24px; padding: 12px 0 0; }
#work .project-caption h3 { margin: 0 0 16px; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; }
#work .project-caption .project-story { margin-top: 20px; font-size: 16px; line-height: 1.6; color: var(--paper); }
.project-visit { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 48px; margin-top: 24px; padding: 12px 16px; border: 1px solid #e97843; border-radius: 8px; color: #ffb28d; font-size: 15px; }
#work .preview-controls { margin-top: auto; }
#work .preview-controls button { width: 48px; height: 48px; border-radius: 8px; border-color: var(--component-line); }
.project-preview-help { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--component-line); max-width: 70ch; color: #c9c1b4; font-size: 13px; line-height: 1.6; }

/* The enquiry and email-only signup are distinct, labelled panels. */
.contact .wrap { align-items: start; }
.contact-panels { min-width: 0; display: grid; gap: 24px; }
.enquiry-panel, .contact .waitlist { padding: 28px; border: 1px solid var(--component-line); border-radius: var(--component-radius); background: var(--component-surface); }
.enquiry-panel > h3, .contact .waitlist h3 { margin: 0 0 12px; font-size: clamp(24px, 2.5vw, 30px); line-height: 1.15; letter-spacing: -.03em; }
.contact .preview-note { font-size: 14px; color: #c9c1b4; line-height: 1.6; margin: 0 0 24px; }
.contact .waitlist { margin-top: 0; }
.contact form { position: relative; }
.contact .form-grid { gap: 20px; }
.contact .field { font-size: 14px; gap: 10px; }
.contact input, .contact textarea, .contact select { border: 1px solid #756b5d; border-radius: 8px; background: #181818; color: var(--paper); min-height: 48px; font-size: 16px; }
.contact textarea { min-height: 140px; }
.contact fieldset { margin-block: 24px; }
.contact legend { margin-bottom: 12px; font-size: 14px; }
.contact .pickers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.contact .picker { min-width: 0; min-height: 48px; padding: 10px; gap: 8px; border: 1px solid #756b5d; border-radius: 8px; color: var(--paper); font-size: 13px; line-height: 1.4; }
.contact .picker::before { content: ''; width: 12px; height: 12px; border: 1px solid #a69b8b; border-radius: 3px; flex: 0 0 12px; }
.contact .picker:has(input:checked) { background: #39271d; color: #ffb28d; border-color: #e97843; }
.contact .picker:has(input:checked)::before { content: '✓'; display: grid; place-items: center; color: #171717; background: #ff9c6c; border-color: #ff9c6c; font-size: 12px; line-height: 1; }
.contact .picker:has(input:focus-visible) { outline: 2px solid #ffb28d; outline-offset: 3px; }
.contact .optional { border-block: 1px solid var(--component-line); margin-block: 24px; padding-block: 0; }
.contact .optional summary { min-height: 48px; display: flex; align-items: center; font-size: 14px; line-height: 1.5; cursor: pointer; }
.contact .optional[open] { padding-bottom: 20px; }
.contact .button { border-radius: 8px; min-height: 48px; }
.contact .waitlist-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.contact .waitlist-row .button { justify-self: start; }
.contact .form-message { font-size: 14px; line-height: 1.6; }
.contact .form-message:empty { display: none; }
.contact-copy > a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }

.product-action, .project-visit, #work .gallery-select button, #work .preview-controls button, .contact .picker { transition: color 160ms, border-color 160ms, background-color 160ms; }
@media (hover: hover) and (pointer: fine) {
  .product-action:hover { color: var(--paper); }
  .project-visit:hover, .pricing-section .package-cta:hover { color: #181818; background: #ffb28d; border-color: #ffb28d; }
  #work .gallery-select button:hover, #work .preview-controls button:hover { background: var(--component-raised); border-color: #c9c1b4; }
}

@media (max-width: 999px) {
  .pricing-section .price-card { grid-row: auto; grid-template-rows: auto; gap: 20px; }
  .pricing-section .package-category { min-height: 0; }
  #work .work-item:not([hidden]) { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  #work .project-caption { flex-direction: row; align-items: start; }
  #work .preview-controls { flex-shrink: 0; margin-top: 0; }
  .contact .pickers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .header-work-full { display: none; }
  .header-work-short { display: inline; }
  .header-actions { gap: 12px; }
  #apps .apps-list { gap: 20px; }
  #apps { padding-block: 40px; }
  #apps .section-heading { margin-bottom: 28px; }
  #apps .section-heading h2 { font-size: clamp(40px, 9vw, 64px); }
  .product-preview { margin: 16px 16px 0; border-radius: 12px; }
  .product-card-body { padding: 22px 20px 24px; }
  .product-identity { gap: 12px; }
  #apps .product-card .status { padding: 6px 10px; min-height: 32px; }
  .footer .footer-socials { justify-content: center; }
  .project-showcase { padding: 20px; }
  #work .gallery-select { display: grid; grid-template-columns: 1fr; width: 100%; }
  #work .gallery-select button { text-align: left; padding: 12px; font-size: 14px; }
  #work .site-preview { height: 360px; }
  #work .project-caption { flex-direction: column; }
  #work .project-caption .project-story { font-size: 15px; }
  .enquiry-panel, .contact .waitlist { padding: 24px 20px; }
  .contact .enquiry-panel > h3, .contact .waitlist h3 { text-align: left; }
  .contact .picker { font-size: 13px; }
}
@media (max-width: 599px) {
  .pricing-section .price-card { padding: 24px 20px; }
  .pricing-section .package-price { font-size: clamp(36px, 10vw, 48px); }
  .pricing-section .package-category { margin-bottom: 12px; }
  .contact .form-grid { grid-template-columns: minmax(0, 1fr); }
  .contact .button, .contact .waitlist-row .button { width: 100%; justify-self: stretch; }
  .contact .picker { padding: 10px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .product-action, .project-visit, #work .gallery-select button, #work .preview-controls button, .contact .picker { transition: none; }
}

.newsletter-panel{padding:24px;border:1px solid var(--line,#514b41);border-radius:12px;background:#201e1b}.newsletter-panel h3{margin:0 0 8px}.newsletter-panel form{display:grid;gap:16px}.newsletter-consent{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.5;cursor:pointer;min-height:44px}.newsletter-consent input{width:20px;height:20px;flex:none;accent-color:#ff671f;margin:2px 0}.newsletter-consent input:focus-visible{outline:2px solid #ff9c6c;outline-offset:4px}.newsletter-privacy{font-size:14px;margin:0}.newsletter-privacy a{display:inline-flex;min-height:44px;align-items:center;color:#ff9c6c}@media(max-width:600px){.newsletter-panel{padding:20px}}

/* Footer links stay one wrapping row on phones; a stacked column wasted a full screen of scroll. */
.footer .wrap.footer-socials { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 28px; }
@media (min-width: 761px) { .footer .wrap.footer-socials { justify-content: flex-end; } }

/* Tablets: the two-column contact layout squeezed the form into a narrow column.
   Up to 1080px the intro sits above a full-width form, with the service pickers in three columns. */
@media (max-width: 1080px) {
  .contact .wrap { grid-template-columns: 1fr; gap: 32px; }
  .contact-copy > p:not(.eyebrow) { max-width: 560px; }
  .contact-copy h2 br { display: none; }
}
@media (min-width: 600px) and (max-width: 1080px) {
  .contact .pickers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* Apps section: "dusk continuation". The land under the mountain scene, not a new page.
   Starts in the scene's own end colour (#26363d), so the join has no edge. Images are untouched; everything here is CSS over them. */
#apps.apps-dusk { --dusk: #26363d; --card: #1a2226; position: relative; z-index: 1; isolation: isolate; overflow-x: clip; padding-top: clamp(150px, 15vw, 220px); background: linear-gradient(180deg, var(--dusk) 0, #212d32 170px, #1b2225 440px, #181818 760px); }
.dusk-seam { position: absolute; z-index: -1; left: 0; top: clamp(-120px, -8vw, -70px); width: 100%; height: clamp(220px, 21vw, 300px); pointer-events: none; overflow: hidden; }
#apps .wrap { position: relative; }
#apps.apps-dusk .section-heading { margin-bottom: 84px; }
#apps .apps-list { position: relative; }
.apps-orbit { position: absolute; left: 0; right: 0; top: -62px; width: 100%; height: 70px; overflow: visible; pointer-events: none; }
.orbit-base, .orbit-spark { fill: none; stroke-linecap: round; }
.orbit-base { stroke: #8ea3aa; stroke-opacity: .42; stroke-width: 1.4; stroke-dasharray: 1 8; }
.orbit-spark { stroke: #ff8e57; stroke-width: 2.4; stroke-dasharray: 3 520; animation: orbit-run 16s linear 4; }
@keyframes orbit-run { to { stroke-dashoffset: -523; } }
.motion-paused .orbit-spark, .apps-offscreen .orbit-spark { animation-play-state: paused; }

#apps .product-card { --accent: #e7bb74; position: relative; background: linear-gradient(180deg, #202b30, var(--card) 62%); border-color: #3a4a50; box-shadow: inset 0 1px 0 #ffffff14, 0 30px 70px -40px #000; transition: border-color .3s ease, transform .3s ease; }
#apps .app-takeabreak { --accent: #bda6ff; }
#apps .product-card::after { content: ''; position: absolute; inset: auto 0 0; height: 45%; pointer-events: none; border-radius: inherit; background: radial-gradient(70% 90% at 15% 110%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); }
@media (hover: hover) and (pointer: fine) { #apps .product-card:hover { transform: translateY(-4px); } }
@supports (color: color-mix(in srgb, red, blue)) { @media (hover: hover) and (pointer: fine) { #apps .product-card:hover { border-color: color-mix(in srgb, var(--accent) 55%, #3a4a50); } } }
#apps .product-preview { margin: 0; border-radius: 0; }
#apps .product-preview::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #26363d73 0, #26363d00 34%, #1f2a2f00 58%, #202a2f 100%), linear-gradient(0deg, #26363d2e, #26363d2e); }
#apps .product-card-body { position: relative; z-index: 1; padding-top: 18px; }
#apps .product-identity { gap: 12px 16px; }
#apps .product-icon { width: 52px; height: 52px; flex: none; object-fit: cover; border-radius: 13px; border: 1px solid #ffffff24; box-shadow: 0 8px 22px -10px #000; }
#apps .product-card .status { border-color: #47595f; color: var(--paper); background: #26363d; }
#apps .product-card .status::before { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
#apps .product-card-body > p.product-meta { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; max-width: none; color: var(--accent); font-size: 14px; line-height: 1.4; }
#apps .product-meta svg { flex: none; }
#apps .product-card-body > p.product-meta + p { margin-top: 8px; }

#apps .development { align-items: center; gap: 10px 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid #ffffff1a; font-size: 13px; }
#apps .development span { min-height: 40px; padding: 4px 14px 4px 6px; border: 1px solid #ffffff1a; border-radius: 999px; background: #ffffff08; color: #c6c9c6; }
#apps .development .dev-label { padding: 0 6px 0 0; border: 0; background: none; color: #93a2a6; }
#apps .development img, .dev-mono { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.dev-mono { display: inline-grid; place-items: center; background: #26363d; color: #c6d3d6; font-style: normal; font-size: 12px; font-weight: 600; }

@media (max-width: 760px) {
  #apps.apps-dusk { padding-top: 124px; }
  #apps.apps-dusk .section-heading { margin-bottom: 28px; }
  .apps-orbit { display: none; }
  #apps .apps-list { row-gap: 34px; }
  #apps .app-takeabreak::before { content: ''; position: absolute; left: 50%; top: -34px; height: 34px; border-left: 2px dotted #8ea3aa6b; }
  #apps .product-card { overflow: visible; }
  #apps .product-preview { overflow: hidden; border-radius: 23px 23px 0 0; }
  #apps .product-icon { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .orbit-spark { animation: none; display: none; } #apps .product-card { transition: none; } #apps .product-card:hover { transform: none; } }
/* Reduced motion and save-data skip the mountain fade, so the stage itself must end in the section's colour. */
.static-mode .launch-stage { background: linear-gradient(180deg, #141414 calc(100% - 260px), #26363d); }

/* Homepage band pointing to /services, and the short "start a project" panel in the contact section. */
.services-band { background: linear-gradient(180deg, #181818, #1b2225); }
.services-band .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px clamp(32px, 6vw, 96px); align-items: end; }
.services-band h2 { margin: 0; font-size: clamp(36px, 5vw, 72px); font-weight: 550; line-height: 1.04; letter-spacing: -.05em; }
.services-band-copy p { margin: 0 0 24px; color: #c6c9c6; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; }
.start-project p { margin: 0 0 20px; color: #c6c9c6; line-height: 1.55; }
@media (max-width: 760px) { .services-band .wrap { grid-template-columns: 1fr; } }

/* The form spam trap must stay off screen on every page with a form. */
.submission-trap, .contact input.submission-trap { position: absolute; left: -10000px; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; overflow: hidden; }

/* Join hub: native radios styled as the 21st.dev "Segmented Tabs" sliding control. Works with no JavaScript; :has() shows the fields for the chosen list. */
.join-hub { position: relative; padding: clamp(22px, 3vw, 32px); border: 1px solid #3a4a50; border-radius: 20px; background: linear-gradient(180deg, #202b30, #1a2226 70%); box-shadow: inset 0 1px 0 #ffffff14; }
.join-hub #waitlist { position: absolute; top: 0; }
.join-hub .eyebrow { color: var(--orange); margin-bottom: 8px; }
.join-hub h3.join-title { margin: 0 0 18px; font-size: clamp(24px, 2.5vw, 32px); font-weight: 600; line-height: 1.15; letter-spacing: -.03em; }
.join-tabs { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 0 14px; padding: 4px; border: 1px solid #3a4a50; border-radius: 14px; background: #141a1d; }
.join-tabs legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.join-tabs label { position: relative; z-index: 1; cursor: pointer; }
.join-tabs input { position: absolute; inset: 0; opacity: 0; margin: 0; min-height: 0; cursor: pointer; }
.join-tabs label span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 4px 8px; border-radius: 10px; color: #c6c9c6; font-size: 14px; text-align: center; transition: color .2s ease; }
/* The chosen label paints its own ground once the thumb arrives: same colour, so no flash, and it still reads in a browser without :has(). */
.join-tabs input:checked + span { color: #181818; font-weight: 600; background: var(--paper); transition: color .2s ease, background-color 0s linear .28s; }
.join-tabs input:focus-visible + span { outline: 2px solid #ff8e57; outline-offset: 2px; }
.join-thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 4); border-radius: 10px; background: var(--paper); transition: transform .28s cubic-bezier(.3, .9, .3, 1); }
.join-tabs:has(input[value=investor]:checked) .join-thumb { transform: translateX(100%); }
.join-tabs:has(input[value=lako-rides]:checked) .join-thumb { transform: translateX(200%); }
.join-tabs:has(input[value=cursusvox]:checked) .join-thumb { transform: translateX(300%); }
.join-note { min-height: 3em; margin: 0 0 12px; color: #c6c9c6; font-size: 14px; line-height: 1.5; }
.join-hub .form-grid { margin-bottom: 16px; }
.join-hub .button { border-radius: 8px; }
.join-hub .field { font-size: 14px; gap: 8px; }
.join-hub input:not([type=radio]):not(.submission-trap), .join-hub select { width: 100%; min-height: 48px; border: 1px solid #756b5d; border-radius: 8px; background: #181818; color: var(--paper); font-size: 16px; padding: 12px; }
.join-hub:has(input[value=cleanos-demo]:checked) [data-join-for]:not([data-join-for=cleanos-demo]),
.join-hub:has(input[value=investor]:checked) [data-join-for]:not([data-join-for=investor]),
.join-hub:has(input[value=lako-rides]:checked) [data-join-for]:not([data-join-for=lako-rides]),
.join-hub:has(input[value=cursusvox]:checked) [data-join-for]:not([data-join-for=cursusvox]) { display: none; }
.join-hub:has(input[value=lako-rides]:checked) .join-business, .join-hub:has(input[value=cursusvox]:checked) .join-business,
.join-hub:has(input[value=lako-rides]:checked) .join-optional, .join-hub:has(input[value=cursusvox]:checked) .join-optional,
.join-hub:not(:has(input[value=cleanos-demo]:checked)) .join-team { display: none; }
.join-hub:has(input[value=cleanos-demo]:checked) [data-join-label=investor], .join-hub:has(input[value=investor]:checked) [data-join-label=cleanos-demo] { display: none; }
.join-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-top: 16px; padding-top: 12px; border-top: 1px solid #ffffff1a; font-size: 14px; }
.join-foot a { display: inline-flex; align-items: center; min-height: 44px; }
.join-live { color: #93a2a6; }
.join-live a { margin-left: 10px; color: var(--paper); }
@media (max-width: 599px) {
  .join-tabs { grid-template-columns: 1fr 1fr; }
  .join-thumb { display: none; }
}
@media (prefers-reduced-motion: reduce) { .join-thumb, .join-tabs label span { transition: none; } }
.cos-join { max-width: 780px; }


/* Loading screen: paints instantly, Koa condenses out of mist, then dissolves into the opening scene. */
.launch-loader { background: radial-gradient(90% 70% at 50% 62%, #26363d 0, #182126 58%, #141414 100%); gap: 10px; overflow: hidden; cursor: pointer; }
.loader-mist { position: absolute; inset: 0; pointer-events: none; }
.loader-mist i { position: absolute; left: -20%; width: 140%; height: 46%; border-radius: 50%; background: radial-gradient(closest-side, #9fb4bb55, #9fb4bb00); filter: blur(18px); animation: loader-mist 2.4s ease-out both; }
.loader-mist i:nth-child(1) { top: 26%; }
.loader-mist i:nth-child(2) { top: 46%; animation-delay: .08s; animation-direction: reverse; background: radial-gradient(closest-side, #d9a98c33, #d9a98c00); }
.loader-mist i:nth-child(3) { top: 60%; animation-delay: .16s; }
@keyframes loader-mist { from { opacity: 1; transform: translateX(-6%) scale(1.1); } to { opacity: .45; transform: translateX(6%) scale(1); } }
.loader-koa { position: relative; width: clamp(170px, 26vh, 260px); height: auto; aspect-ratio: 1; background: none; object-fit: contain; animation: koa-form .7s cubic-bezier(.2, .7, .2, 1) both, koa-breathe 2.4s ease-in-out .7s infinite alternate; }
@keyframes koa-form { from { opacity: 0; filter: blur(14px); } to { opacity: 1; filter: blur(0); } }
@keyframes koa-breathe { to { transform: translateY(-4px); } }
.loader-word { position: relative; display: flex; align-items: center; gap: 10px; margin: 0; color: var(--paper, #f1f0e7); font-size: 15px; animation: koa-form .6s ease .35s both; }
.loader-word .loader-mark { color: #ff5b18; font-weight: 600; letter-spacing: -.06em; }
.loader-skip { position: absolute; right: 20px; bottom: max(20px, env(safe-area-inset-bottom)); min-width: 44px; min-height: 44px; padding: 0 12px; background: none; border: 0; color: #c6c9c6; font: inherit; font-size: 14px; cursor: pointer; }
.launch-loader.leaving { opacity: 0; filter: blur(6px); transition: opacity .28s ease, filter .28s ease; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .loader-mist i, .loader-koa, .loader-word { animation: none; } }

/* Header links to the three things people come for. */
.header-actions { gap: clamp(12px, 1.8vw, 26px); }
.quick-bar { display: none; }
@media (max-width: 760px) {
 .quick-bar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); padding-bottom: env(safe-area-inset-bottom); background: #181818f5; border-top: 1px solid #ffffff1f; transform: translateY(100%); transition: transform .25s ease; }
 .quick-bar a { display: flex; align-items: center; justify-content: center; min-height: 48px; color: var(--paper, #f1f0e7); font-size: 14px; text-decoration: none; }
 .header-on-content ~ .quick-bar { transform: none; }
 .footer { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* Apps: calmer, part of the scene. The same layout, with Lako as a wide third card. */
#apps .section-heading h2 { font-size: clamp(40px, 4.6vw, 72px); font-weight: 550; }
#apps .section-heading > p { display: block; margin: 0; max-width: 34ch; color: #b7c2c2; font-size: 16px; line-height: 1.5; }
#apps .eyebrow { color: #c9d3d3; }
#apps .apps-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dusk-land { position: absolute; z-index: -2; inset: 0 0 auto; display: none; height: clamp(760px, 62vw, 1000px); pointer-events: none; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.dusk-land img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
#apps .dusk-land { display: block; }
.dusk-seam.fog-live .wisp { opacity: 0; }
.fog-seam { position: absolute; z-index: -1; left: 0; top: clamp(-120px, -8vw, -70px); width: 100%; height: clamp(220px, 21vw, 300px); pointer-events: none; opacity: 0; transition: opacity .8s ease; }
.fog-seam.on { opacity: 1; }
#apps .product-card .status { background: none; border-color: #efeee42e; }
#apps .product-action { color: #efeee4; border-bottom: 1px solid #efeee466; font-size: 15px; font-weight: 500; }
#apps .product-card::after { opacity: .35; }
.app-lako { --accent: #8ea3aa; grid-column: 1 / -1; }
.app-lako .status { text-transform: none; letter-spacing: 0; white-space: normal; }
.app-lako .status::before { background: none !important; box-shadow: inset 0 0 0 1.5px #8ea3aa !important; }
.app-lako .product-meta { color: #b7c2c2 !important; }
.app-lako .product-icon { border-radius: 22%; }
.app-lako .product-action { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
@media (min-width: 901px) { #apps .app-lako { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; } #apps .app-lako .product-preview { margin: 0; aspect-ratio: 16/8; height: 100%; } #apps .app-lako .product-preview img { height: 100%; object-fit: cover; } #apps .app-lako .product-card-body { padding: 28px clamp(24px, 3vw, 44px); } }
@media (max-width: 900px) { #apps .apps-list { grid-template-columns: 1fr; } }
#apps .product-card { background: #161d20cc; border-color: #efeee41f; box-shadow: none; }

/* The closing choice: three clear doors. */
.doors { display: grid; gap: 10px; }
.doors a { display: grid; gap: 2px; padding: 16px 18px; border: 1px solid #ffffff24; border-radius: 12px; background: #1b2225; color: var(--paper, #f1f0e7); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.doors a:hover, .doors a:focus-visible { border-color: #ff8e57; transform: translateY(-2px); }
.doors strong { font-size: 18px; font-weight: 600; }
.doors span { color: #b7c2c2; font-size: 14px; line-height: 1.45; }
.contact-panels { display: grid; gap: 20px; }

/* Footer pages, above the existing social links. */
.footer .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; margin-bottom: 4px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--paper, #f1f0e7); font-size: 14px; text-decoration: none; }
@media (min-width: 761px) { .footer .footer-links { justify-content: flex-end; } }

/* Fixes: phone mountain edge, CleanOS teaser video bars, section outline, background steps, scene text. */
@media (max-width: 760px) { .world-mountain { max-width: none; object-fit: cover; object-position: 50% 100%; } }
.cos-teaser .cleanos-film-frame video { aspect-ratio: 16/9; object-fit: contain; }
.section:not(.startup)::before { content: none; }
#founders, #services, .services-band, #contact { background: #181818; }
.world-copy h2, .world-copy p { text-shadow: 0 1px 24px #14141499; }

/* Scroll reveal. Only added by script, so nothing hides without it. */
.rv { opacity: 0; transform: translateY(14px); }
.rv.rv-in { opacity: 1; transform: none; transition: opacity .45s ease var(--rv-d, 0ms), transform .45s cubic-bezier(.2, .7, .2, 1) var(--rv-d, 0ms); }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }

/* Second pass after looking at it. */
.launch-loader .loader-word .loader-mark { font-size: clamp(30px, 4.4vh, 44px); line-height: 1; }
.loader-koa { width: clamp(210px, 34vh, 330px); }
#apps .dusk-land { z-index: -1; -webkit-mask-image: linear-gradient(transparent 0, #000 26%, #000 64%, transparent); mask-image: linear-gradient(transparent 0, #000 26%, #000 64%, transparent); }
#apps .dusk-land::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#26363d80, #18181873); }
#apps .ridge { display: none; }
@media (max-width: 760px) { .header .header-actions .header-link { display: none; } #apps .dusk-land::after { background: linear-gradient(#26363db3, #181818a6); } }
#apps .app-lako .product-preview { min-width: 0; width: 100%; }
#apps .app-lako .product-card-body > p { font-size: clamp(16px, 1.3vw, 19px); }

/* Third pass: Lako's real material, stage controls, shared navigation. */
.lako-actions { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; margin-top: auto; }
#apps .app-lako .status { min-height: 32px; font-size: 13px; }
.scene-left .pause-button, .scene-left .skip-intro { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s; }
.menu-pause { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.menu-pause[hidden] { display: none; }
.join-note a { color: var(--paper, #f1f0e7); }
@media (max-width: 760px) {
 .subpage .subpage-nav { display: none; }
 .subpage .quick-bar { transform: none; }
 .subpage .footer { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
 body:has(input:focus, textarea:focus, select:focus) .quick-bar { transform: translateY(100%); }
}

/* Apps cards: full-colour previews, tidy identity rows, one clear action. */
#apps .product-preview::after { background: linear-gradient(180deg, #161d2000 74%, #161d20b3 100%); }
#apps .product-preview img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) and (pointer: fine) { #apps .product-card:hover .product-preview img { transform: scale(1.025); } }
#apps .product-card-body { padding: 22px 26px 26px; }
#apps .product-identity { align-items: center; }
#apps .app-falah .status, #apps .app-takeabreak .status { margin-left: auto; }
#apps .product-action { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 44px; margin-top: auto; padding: 0 18px; border: 1px solid #efeee440; border-radius: 999px; text-decoration: none; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
#apps .product-action:hover, #apps .product-action:focus-visible { background: var(--paper, #f1f0e7); border-color: var(--paper, #f1f0e7); color: #181818; }
.art-tag { position: absolute; z-index: 1; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: 999px; background: #101416c7; color: #efeee4; font-size: 12px; line-height: 1.4; }
@media (min-width: 901px) { #apps .app-lako { align-items: stretch; } #apps .app-lako .product-card-body { justify-content: center; } #apps .app-lako .lako-actions { margin-top: 18px; } }
@media (prefers-reduced-motion: reduce) { #apps .product-preview img { transition: none; } #apps .product-card:hover .product-preview img { transform: none; } }
@media (max-width: 760px) { #apps .app-falah .status, #apps .app-takeabreak .status { margin-left: 0; } }

/* Phones: the quick bar is there from the first screen, so CleanOS, Services and Investors are always one tap away. */
@media (max-width: 760px) {
 .quick-bar { transform: none; }
 .koda-in-view .quick-bar { transform: translateY(100%); }
 body:has(input:focus, textarea:focus, select:focus) .quick-bar { transform: translateY(100%); }
 .stage-bottom { bottom: calc(18px + 49px + env(safe-area-inset-bottom)); }
}

/* Solid bars, so headings never show through. */
.header.header-on-content { background: #181818; }
@media (max-width: 760px) {
 .quick-bar { background: #181818; }
 #site-menu { overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(24px + 49px + env(safe-area-inset-bottom)); }
}

/* Soften the straight edge where the mountain meets the foothills. */
#apps::after { content: ''; position: absolute; z-index: 0; left: 0; right: 0; top: -44px; height: 88px; pointer-events: none; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); -webkit-mask-image: linear-gradient(transparent, #000 50%, transparent); mask-image: linear-gradient(transparent, #000 50%, transparent); }
@media (min-width: 1081px) { .contact .contact-copy { position: sticky; top: 96px; align-self: start; } }

/* MYK Pixel logo. */
.brand-pixel, .header .brand-pixel { display: block; width: auto; height: 30px; font-size: 0; }
.launch-loader .loader-word .brand-pixel { height: clamp(26px, 3.8vh, 38px); }
@media (max-width: 760px) { .header .brand-pixel { height: 26px; } }

/* Client site previews: the whole site width sits inside the card, and only the height scrolls. */
#work .site-preview { overflow-x: hidden; overflow-y: auto; }
#work .site-preview img { display: block; width: 100%; min-width: 0; max-width: 100%; height: auto; }
/* This capture is a phone screenshot, so it stays at phone width instead of stretching. */
#work .site-preview img[src*="cleanupbros-detail"] { width: min(100%, 458px); margin: 0 auto; }
@media (max-width: 760px) { #work .site-preview { height: auto; max-height: 360px; } }

/* AVIF wrappers don't affect layout: the image behaves as if it were a direct child. */
picture { display: contents; }
picture source { display: none; }