/* About ALY: a standalone, token-driven product page. */
.aly-about-body { min-height: 100vh; overflow-x: hidden; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 20; background: var(--void); color: var(--text); padding: 12px 18px; border: 1px solid var(--hair-2); }
.skip-link:focus { left: 12px; top: 12px; }
.about-nav { width: min(1220px, calc(100% - 40px)); height: 76px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.about-brand { display: inline-flex; align-items: center; gap: 13px; color: var(--text); }
.about-brand:hover { text-decoration: none; }
.about-brand img { width: 118px; height: auto; display: block; }
:root[data-alyssiun-atmosphere="neo"] .about-brand img, :root[data-atmosphere="void"] .about-brand img { content: url("https://assets.lozanocorp.com/alyssiun/png/alyssiun-name-ffffff.png"); }
.about-brand span { padding-left: 13px; border-left: 1px solid var(--hair-2); font-size: 11px; font-weight: 650; letter-spacing: .18em; }
#about-main { width: min(1220px, calc(100% - 40px)); margin: auto; padding-bottom: 90px; }
.aly-about-panel { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.aly-about-panel #about-main { min-height: 100%; }
.aly-about-panel .about-hero { min-height: min(760px, calc(var(--aly-viewport-height, 100dvh) - 60px)); }
.about-hero { min-height: min(760px, calc(100vh - 76px)); display: grid; grid-template-columns: minmax(0, .94fr) minmax(420px, 1.06fr); align-items: center; gap: clamp(36px, 7vw, 112px); padding: 60px 0 96px; }
.about-hero-copy { position: relative; z-index: 1; }
.about-hero h1, .about-section h2 { margin: 14px 0 20px; font-size: clamp(46px, 6.5vw, 86px); line-height: .98; font-weight: 200; letter-spacing: -.055em; }
.about-hero h1 span { color: var(--muted); }
.about-lead { max-width: 50ch; margin: 0; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.65; color: var(--muted); }
.about-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.about-visual { position: relative; width: min(100%, 570px); aspect-ratio: 1; justify-self: end; border: 1px solid var(--hair); border-radius: 50%; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--jade) 13%, transparent), transparent 37%), var(--glass); overflow: hidden; isolation: isolate; }
.about-visual::before, .about-visual::after { content: ""; position: absolute; inset: 12%; border-radius: inherit; border: 1px solid var(--hair); }
.about-visual::after { inset: 28%; background: radial-gradient(circle at 35% 28%, var(--glass-2), transparent 36%), linear-gradient(145deg, color-mix(in srgb, var(--jade) 35%, var(--void)), var(--void-2)); box-shadow: var(--card-shadow); }
.about-orbit { position: absolute; inset: 8%; border: 1px dashed var(--hair-2); border-radius: 50%; animation: about-spin 40s linear infinite; }
.about-orbit-two { inset: 21%; animation-direction: reverse; animation-duration: 27s; }
.about-core { position: absolute; z-index: 2; inset: 36%; border: 1px solid var(--hair-2); border-radius: 50%; display: grid; place-items: center; align-content: center; gap: 3px; background: var(--surface); box-shadow: var(--card-shadow); font-size: clamp(18px, 2vw, 24px); letter-spacing: .18em; font-weight: 300; }
.about-core i { color: var(--jade); font-size: 15px; font-style: normal; }
.about-node { position: absolute; z-index: 3; padding: 7px 10px; border: 1px solid var(--hair-2); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 10px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; box-shadow: var(--thumb-shadow); }
.about-node-projects { top: 16%; left: 9%; }.about-node-work { right: 8%; top: 27%; }.about-node-build { bottom: 16%; right: 15%; }.about-node-store { bottom: 20%; left: 9%; }
.about-section { padding: 112px 0; border-top: 1px solid var(--hair); }
.about-intro { max-width: 860px; }.about-intro h2 { font-size: clamp(36px, 5vw, 64px); max-width: 14ch; }.about-intro > p:last-child, .about-difference > p:last-child { max-width: 55ch; color: var(--muted); font-size: 17px; }
.about-section-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 42px; }.about-section-head h2 { font-size: clamp(34px, 4.5vw, 58px); max-width: 13ch; margin: 14px 0 0; }
.about-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--hair); border-radius: var(--radius); overflow: hidden; background: var(--glass); }
.about-steps li { min-height: 230px; padding: 24px; border-right: 1px solid var(--hair); }.about-steps li:last-child { border-right: 0; }.about-steps span, .about-capability-index { color: var(--jade); font-size: 11px; font-weight: 650; letter-spacing: .16em; }.about-steps h3, .about-capability h3 { margin: 40px 0 9px; font-size: 17px; font-weight: 500; }.about-steps p, .about-capability p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.about-capability-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.about-capability { min-height: 230px; padding: 28px; border: 1px solid var(--hair); border-radius: var(--radius); background: var(--glass); }.about-capability-wide { background: radial-gradient(circle at 82% 20%, color-mix(in srgb, var(--jade) 14%, transparent), transparent 32%), var(--glass); }.about-capability h3 { margin-top: 62px; font-size: 22px; }.about-capability p { max-width: 30ch; font-size: 15px; }
.about-difference { text-align: center; display: grid; justify-items: center; }.about-difference blockquote { max-width: 13ch; margin: 18px 0 24px; font-size: clamp(40px, 5.5vw, 72px); font-weight: 200; line-height: 1.03; letter-spacing: -.05em; }.about-difference > p:last-child { margin: 0; }
.about-final { display: flex; align-items: end; justify-content: space-between; gap: 28px; padding-bottom: 20px; }.about-final h2 { font-size: clamp(44px, 6vw, 76px); margin-bottom: 0; }
@keyframes about-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .about-orbit { animation: none; } }
@media (max-width: 820px) { .about-hero { grid-template-columns: 1fr; padding-top: 40px; gap: 44px; }.about-visual { width: min(100%, 500px); justify-self: center; }.about-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }.about-steps li:nth-child(2) { border-right: 0; }.about-steps li:nth-child(-n+2) { border-bottom: 1px solid var(--hair); } }
@media (max-width: 540px) { .about-nav, #about-main { width: min(100% - 28px, 1220px); }.about-nav { height: 66px; }.about-brand img { width: 92px; }.about-brand span { padding-left: 9px; font-size: 10px; }.about-nav .btn { padding: 8px 10px; font-size: 10px; }.about-hero { min-height: auto; padding: 56px 0 74px; }.about-hero h1 { font-size: clamp(44px, 14vw, 62px); }.about-visual { width: min(100%, 390px); }.about-node { font-size: 8px; padding: 5px 7px; }.about-section { padding: 70px 0; }.about-section-head { display: block; margin-bottom: 28px; }.about-steps, .about-capability-grid { grid-template-columns: 1fr; }.about-steps li, .about-steps li:nth-child(2) { min-height: 0; border-right: 0; border-bottom: 1px solid var(--hair); }.about-steps li:last-child { border-bottom: 0; }.about-steps h3 { margin-top: 24px; }.about-capability { min-height: 180px; }.about-capability h3 { margin-top: 42px; }.about-difference blockquote { font-size: clamp(38px, 12vw, 54px); }.about-final { align-items: start; flex-direction: column; }.about-final .btn { width: 100%; } }

/* ---------------------------------------------------------------------------
 * Hero as a full-width photo banner. The image is a real <img> with
 * object-fit: cover so it fills edge to edge and NEVER distorts on any
 * viewport; a dark gradient sits above it so the existing headline and lead
 * stay readable. Overrides the split copy/visual grid above (later in source,
 * so no !important needed except where the base rule is equally specific).
 * ------------------------------------------------------------------------- */
.about-hero.about-hero-banner {
  position: relative;
  display: flex;
  align-items: center;
  grid-template-columns: none;
  gap: 0;
  /* Full width of the content column — edge to edge inside #about-main,
     whether that is the standalone page or the workspace About panel (which
     has a sidebar, so a viewport-width breakout would overflow). Pull past
     #about-main's own top padding so it sits flush under the nav. */
  width: 100%;
  margin: 0 0 8px;
  min-height: clamp(440px, 62vh, 660px);
  padding: 64px clamp(20px, 6vw, 88px);
  border-radius: var(--radius, 12px);
  overflow: hidden;
  isolation: isolate;
}
.aly-about-panel .about-hero.about-hero-banner { min-height: clamp(420px, 62vh, 640px); }

.about-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
}
.about-hero.about-hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(4, 5, 8, 0.86) 0%, rgba(4, 5, 8, 0.62) 46%, rgba(4, 5, 8, 0.34) 100%),
    linear-gradient(0deg, rgba(4, 5, 8, 0.55), rgba(4, 5, 8, 0.15));
}

.about-hero.about-hero-banner .about-hero-copy { max-width: 620px; }
.about-hero.about-hero-banner .eyebrow { color: color-mix(in srgb, var(--jade) 55%, #ffffff); }
.about-hero.about-hero-banner h1 { color: #f6f6f3; }
.about-hero.about-hero-banner h1 span { color: rgba(246, 246, 243, 0.62); }
.about-hero.about-hero-banner .about-lead { color: rgba(246, 246, 243, 0.82); }
.about-hero.about-hero-banner .btn.ghost {
  color: #f6f6f3;
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.06);
}
.about-hero.about-hero-banner .btn.ghost:hover { border-color: rgba(255, 255, 255, 0.7); }

@media (max-width: 820px) {
  .about-hero.about-hero-banner {
    grid-template-columns: none;
    min-height: clamp(380px, 58vh, 520px);
    padding: 56px clamp(18px, 7vw, 48px);
  }
}
@media (max-width: 540px) {
  .about-hero.about-hero-banner {
    min-height: 360px;
    padding: 48px 22px 56px;
  }
}