/* Shared palette for the three active portfolio pages. Amber is light, never a panel fill. */
body[data-theme="dark"] {
  --bg: #07090d;
  --ink: #f0f2f0;
  --muted: #afb7ba;
  --line: rgba(244, 189, 87, .19);
  --card: rgba(17, 22, 28, .76);
  --soft: rgba(24, 30, 37, .7);
  --nav: rgba(10, 14, 20, .78);
  --accent: #f4bd57;
  --accent-deep: #e9a544;
  --inverse: #0a0e14;
  --inverse-text: #f0f2f0;
  --shadow: 0 22px 65px rgba(0, 0, 0, .32);
  --signal-accent: #e9a544;
  background: #07090d;
  color: var(--ink);
}
body > .site-atmosphere, .site-atmosphere {
  background: radial-gradient(ellipse at 55% 66%, rgba(216, 112, 20, .045), transparent 53%), #07090d;
}
.nav-shell {
  border-color: rgba(244, 189, 87, .2);
  background: rgba(10, 14, 20, .76);
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 14px 40px rgba(0, 0, 0, .25);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
}
body[data-theme="dark"] .button-primary { background: #f4bd57; color: #15110a; }
body[data-theme="dark"] .button-primary:hover { background: #ffd075; color: #15110a; }
.button-quiet, .tag-list span, .skill-icon, .social-icon {
  background: rgba(18, 23, 29, .74);
  border-color: rgba(244, 189, 87, .21);
}
.section-kicker, .eyebrow, .work-company, .work-number, .project-top span:last-child,
.story-index, .gallery-index, .gallery-count, .card-meta { color: #eab15a; }
.section-kicker span, .hero-lede, .work-body > p:not(.work-company),
.work-body ul, .project-content p, .skill-group p, .contact-grid > div > p,
.about-heading > p, .about-story p { color: #b5bdc0; }
.hero-art {
  background: radial-gradient(ellipse at 72% 76%, rgba(239, 146, 34, .055), transparent 54%);
}
.hero-art::before { background: linear-gradient(90deg, #07090d, rgba(7, 9, 13, .96) 19%, rgba(7, 9, 13, .78) 36%, rgba(7, 9, 13, .2) 65%, transparent); }
.hero-art::after { background: linear-gradient(0deg, #07090d, transparent 20%, transparent 78%, rgba(7, 9, 13, .52)); }
.ai-section { background: rgba(9, 13, 19, .64); border-color: rgba(244, 189, 87, .16); }
.ai-board, .project-card, .projects .project-card, .project-archive-cta,
.gallery-card, .factory-note, .decision-card, .hero-system, .ownership-grid article {
  background: linear-gradient(145deg, rgba(34, 42, 49, .56), rgba(10, 15, 21, .85) 52%, rgba(13, 18, 24, .78));
  border-color: rgba(244, 189, 87, .23);
  box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 20px 55px rgba(0, 0, 0, .24);
}
.project-archive-cta:hover { background: linear-gradient(145deg, rgba(42, 48, 53, .74), rgba(13, 18, 24, .94)); }
.ai-board, .project-archive-cta, .factory-note, .decision-card, .hero-system {
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  backdrop-filter: blur(12px) saturate(115%);
}
.work-card, .project-card, .skill-group, .social-panel, .gallery-card {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.board-header, .board-row, .factory-steps, .factory-steps li,
.gallery-links, .gallery-end, .gallery-tags span { border-color: rgba(244, 189, 87, .18); }
.board-header, .board-row, .ai-lede, .project-archive-cta strong,
.about-story h3 { color: #f0f2f0; }
.about {
  background: linear-gradient(180deg, rgba(10, 15, 21, .96), rgba(16, 22, 29, .86) 58%, rgba(8, 12, 18, .96));
  border-color: rgba(244, 189, 87, .17);
}
.about::after { background: radial-gradient(ellipse at 67% 56%, rgba(235, 143, 35, .10), transparent 53%); }
.about-landscape { background: radial-gradient(ellipse at 59% 87%, rgba(226, 130, 27, .13), transparent 50%); }
.about-landscape::after { background: linear-gradient(180deg, rgba(7, 10, 16, .15), transparent 45%, rgba(7, 10, 16, .46)); }
.ridge-back { stroke: #424953; }
.mountain-contour { stroke: #9a7750; }
.about-stories, .about-story + .about-story { border-color: rgba(244, 189, 87, .18); }
.landscape-label { color: #aeb8b8; }
.site-footer { color: #9fa9ac; }

/* Project illustrations use charcoal geometry with amber signals. */
.projects .project-visual, .gallery-media, .gallery-media--factory {
  background: radial-gradient(circle at 68% 34%, rgba(232, 143, 35, .13), transparent 48%), #0c1118;
  border-color: rgba(244, 189, 87, .18);
}
body[data-theme="dark"] .projects .visual-openspot { background-color: #111820; background-image: linear-gradient(37deg, transparent 44%, rgba(244, 189, 87, .17) 45%, rgba(244, 189, 87, .17) 48%, transparent 49%), linear-gradient(135deg, transparent 43%, rgba(244, 189, 87, .17) 44%, rgba(244, 189, 87, .17) 47%, transparent 48%); }
body[data-theme="dark"] .projects .street-line, body[data-theme="dark"] .projects .street-block { background: #303943; border-color: #a37138; }
body[data-theme="dark"] .projects .visual-bread, body[data-theme="dark"] .projects .visual-mytudo { background: radial-gradient(circle at 67% 28%, rgba(235, 154, 42, .15), transparent 43%), #0d141b; }
body[data-theme="dark"] .projects .mail-card, body[data-theme="dark"] .projects .task-board, .factory-preview b,
.ledger-step, .inbox-preview > div, .tasks-preview > div, .cad-preview > div {
  background: rgba(21, 28, 35, .92);
  border-color: rgba(244, 189, 87, .28);
  color: #e9e8dd;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
}
body[data-theme="dark"] .projects .mail-two { background: #e9ab4b; color: #10151a; }
body[data-theme="dark"] .projects .task-board > span { color: #f2ba67; }
body[data-theme="dark"] .projects .task-board > div, body[data-theme="dark"] .projects .task-board i { border-color: rgba(244, 189, 87, .28); }
.projects .project-top, .gallery-card p, .gallery-tags span,
.factory-steps p, .factory-note p { color: #b5bdc0; }
.project-preview-label, .home-preview-control, .media-label, .preview-control {
  background: rgba(9, 14, 19, .86);
  border-color: rgba(244, 189, 87, .28);
  color: #eab15a;
}
.home-preview-control:hover { background: #252e36; }
.gallery-hero h1 em, .factory-heading h2 em { color: #f5b74e; }
.gallery-filter, .gallery-search, .gallery-empty button {
  background: rgba(20, 27, 34, .8);
  border-color: rgba(244, 189, 87, .25);
  color: #d7dddc;
}
.gallery-filter:hover, .gallery-filter.is-active { background: #e9a544; border-color: #e9a544; color: #11151b; }
.gallery-search input { color: #f0f2f0; }
.gallery-count, .gallery-card p, .factory-preview small { color: #aeb8ba; }
.gallery-card:hover { border-color: #eab15a; }
.gallery-tags span { border-color: rgba(244, 189, 87, .25); }
.gallery-media--factory { background: radial-gradient(ellipse at 55% 65%, rgba(223, 134, 28, .17), transparent 58%), #0c1118; }
.map-preview { background-image: linear-gradient(22deg, transparent 47%, #454c52 48%, #454c52 50%, transparent 51%), linear-gradient(105deg, transparent 47%, #4e555c 48%, #4e555c 50%, transparent 51%); }
.market-columns div:last-child i, .ledger-step i { background: #596168; }
.assistant-question { background: #303942; }
.factory-note { color: #eef0ec; }
.ai-board, .project-archive-cta, .projects .project-card, .gallery-card {
  transition: border-color 1.4s ease, box-shadow 1.4s ease, transform .2s;
}
.ai-board.is-glowing, .project-archive-cta.is-glowing,
.projects .project-card.is-glowing, .gallery-card.is-glowing {
  border-color: rgba(255, 204, 105, .48);
  box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 0 34px rgba(236, 149, 34, .12), 0 20px 55px rgba(0, 0, 0, .24);
}

/* The workflow's text and dividers should read neutral, with amber reserved for labels. */
.workflow-atmosphere { background: radial-gradient(ellipse 65% 32% at 50% 105%, rgba(225, 122, 23, .075), transparent 70%), #07090d; }
.workflow-atmosphere::before {
  width: min(45vw, 550px);
  right: -6%;
  background: radial-gradient(circle, rgba(255, 200, 86, .15), rgba(255, 168, 42, .06) 18%, transparent 48%);
}
.hero-system::before { background: radial-gradient(circle at 51% 45%, rgba(255, 204, 94, .14), rgba(241, 161, 43, .05) 19%, transparent 42%); }
.workflow-jump a, .layer-heading small, .layer-content p, .thesis-grid p,
.run-track p, .learning-ledger p, .question-grid p, .source-section p:not(.section-kicker),
.decision-section > div:first-child > p:not(.section-kicker), .ownership-grid p { color: #b5bdc0; }
.layers-section, .boundaries-section { background: linear-gradient(150deg, rgba(18, 25, 32, .78), rgba(8, 12, 17, .88) 60%); }
.layer-list, .layer-list details, .run-track, .run-track li, .learning-ledger,
.learning-ledger > div, .source-links, .source-links a, .question-grid article,
.workflow-jump, .layers-section, .boundaries-section, .questions-section {
  border-color: rgba(244, 189, 87, .2);
}
.layer-artifact code, .orbit-node { background: rgba(15, 21, 28, .88); border-color: rgba(244, 189, 87, .28); }
.orbit-core { background: radial-gradient(circle at 35% 25%, rgba(244, 180, 68, .16), rgba(16, 22, 29, .96) 65%); }
.questions-section { background: radial-gradient(ellipse at 50% 105%, rgba(222, 111, 18, .075), transparent 58%), rgba(8, 12, 18, .8); }
.decision-card > div, .decision-card > span { border-color: rgba(244, 189, 87, .2); }

/* Clear, dark glass throughout the site; amber stays in the rim and reflected light. */
.ai-board, .project-card, .projects .project-card, .project-archive-cta,
.gallery-card, .factory-note, .decision-card, .hero-system, .ownership-grid article {
  background: linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(12, 18, 25, .20) 38%, rgba(7, 12, 18, .33));
  border-color: rgba(244, 189, 87, .24);
  box-shadow: inset 0 1px rgba(255, 255, 255, .13), inset 1px 0 rgba(255, 255, 255, .035), 0 20px 55px rgba(0, 0, 0, .20);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
}
.button-quiet, .tag-list span, .skill-icon, .social-icon,
.gallery-filter, .gallery-search, .gallery-empty button,
.project-preview-label, .home-preview-control, .media-label, .preview-control {
  background: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(10, 17, 24, .28) 48%, rgba(7, 12, 18, .38));
  border-color: rgba(255, 223, 158, .28);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);
}
.layers-section, .boundaries-section, .questions-section, .about {
  background: linear-gradient(155deg, rgba(255, 255, 255, .025), rgba(7, 12, 18, .25) 58%, rgba(7, 12, 18, .36));
}
body[data-theme="dark"] .projects .street-line, body[data-theme="dark"] .projects .street-block,
.assistant-question, .market-columns div:last-child i, .ledger-step i {
  background: rgba(255, 241, 209, .075);
  border-color: rgba(255, 205, 111, .36);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  backdrop-filter: blur(12px) saturate(130%);
}
.map-preview {
  background-image: linear-gradient(22deg, transparent 47%, rgba(255, 205, 111, .24) 48%, rgba(255, 205, 111, .24) 50%, transparent 51%), linear-gradient(105deg, transparent 47%, rgba(255, 205, 111, .18) 48%, rgba(255, 205, 111, .18) 50%, transparent 51%);
}
.home-preview-control:hover { background: rgba(255, 222, 163, .13); }
.ridge-back { stroke: rgba(234, 177, 90, .42); }
.mountain-contour { stroke: rgba(250, 187, 91, .56); }

/* The contact action behaves like a small curved glass lens. */
.hero-actions .button-quiet {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 17px;
  border: 1px solid rgba(255, 225, 165, .37);
  background: linear-gradient(160deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .035) 33%, rgba(16, 23, 31, .19) 68%, rgba(255, 190, 87, .065));
  color: #fff8ec;
  -webkit-backdrop-filter: blur(24px) saturate(165%);
  backdrop-filter: blur(24px) saturate(165%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 1px 0 0 rgba(255, 255, 255, .1), inset 0 -1px 0 rgba(255, 188, 92, .16), 0 10px 28px rgba(0, 0, 0, .16);
  transition: transform .25s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.hero-actions .button-quiet::before {
  content: "";
  position: absolute;
  inset: 1px 1px 52%;
  z-index: -1;
  border-radius: 15px 15px 50% 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .13), transparent);
  pointer-events: none;
}
.hero-actions .button-quiet:hover, .hero-actions .button-quiet:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(255, 211, 128, .9);
  background: linear-gradient(160deg, rgba(255, 239, 205, .23), rgba(255, 255, 255, .07) 34%, rgba(18, 24, 29, .18) 68%, rgba(255, 178, 62, .12));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .68), inset 0 -1px 0 rgba(255, 197, 104, .34), 0 0 0 1px rgba(255, 193, 88, .13), 0 0 19px rgba(255, 172, 52, .32), 0 0 44px rgba(241, 143, 31, .19), 0 12px 30px rgba(0, 0, 0, .24);
}
.hero-actions .button-quiet:focus-visible { outline: 2px solid #ffd27b; outline-offset: 4px; }

/* Give each Software Factory Kit phase a visible, restrained hover response. */
.ai-board .board-row {
  position: relative;
  background: transparent;
  transition: background .3s ease, box-shadow .3s ease, padding-left .3s ease;
}
.ai-board .board-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(transparent, #ffc46a, transparent);
  opacity: 0;
  box-shadow: 0 0 18px rgba(255, 177, 64, .7);
  transition: opacity .3s ease;
}
.ai-board .board-row:hover {
  padding-left: 34px;
  background: linear-gradient(90deg, rgba(255, 199, 99, .075), rgba(255, 255, 255, .04) 36%, transparent 83%);
  box-shadow: inset 0 1px rgba(255, 220, 164, .1), inset 0 -1px rgba(255, 220, 164, .08);
}
.ai-board .board-row:hover::before { opacity: 1; }
.ai-board .board-row strong, .ai-board .board-step { transition: color .3s ease, text-shadow .3s ease; }
.ai-board .board-row:hover strong { color: #fff9ec; text-shadow: 0 0 20px rgba(255, 188, 91, .28); }
.ai-board .board-row:hover .board-step { color: #ffd27b; text-shadow: 0 0 14px rgba(255, 188, 91, .55); }
.ai-board:hover { border-color: rgba(255, 205, 111, .48); box-shadow: inset 0 1px rgba(255, 255, 255, .16), 0 0 30px rgba(236, 149, 34, .1), 0 20px 55px rgba(0, 0, 0, .24); }
@media (max-width: 800px) {
  .hero-art::before { background: linear-gradient(180deg, rgba(7, 9, 13, .97), rgba(7, 9, 13, .8) 28%, rgba(7, 9, 13, .25) 63%, rgba(7, 9, 13, .4)); }
  .hero-copy .hero-lede { text-shadow: 0 1px 12px #07090d, 0 0 24px #07090d; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-board, .project-archive-cta, .projects .project-card, .gallery-card { transition: none; }
  .hero-actions .button-quiet, .ai-board .board-row, .ai-board .board-row::before,
  .ai-board .board-row strong, .ai-board .board-step { transition: none; }
}

/* Untinted liquid glass: blur the scene behind the surface, not its color.
   The small white reflections are soft Gaussian-blurred highlights. */
body[data-theme="dark"] {
  --card: rgba(255, 255, 255, .025);
  --soft: rgba(255, 255, 255, .035);
  --nav: rgba(255, 255, 255, .025);
}
.nav-shell,
.ai-board, .project-card, .projects .project-card, .project-archive-cta,
.gallery-card, .factory-note, .decision-card, .hero-system, .ownership-grid article {
  background: rgba(255, 255, 255, .025);
  border-color: rgba(255, 255, 255, .17);
  box-shadow: inset 0 1px rgba(255, 255, 255, .24), inset 1px 0 rgba(255, 255, 255, .055), 0 18px 44px rgba(0, 0, 0, .17);
  -webkit-backdrop-filter: blur(16px) saturate(100%);
  backdrop-filter: blur(16px) saturate(100%);
}
body[data-theme="dark"] .nav-shell {
  background: rgba(255, 255, 255, .018);
  border-color: rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(20px) saturate(100%);
  backdrop-filter: blur(20px) saturate(100%);
}
.ai-board:hover, .project-archive-cta:hover, .projects .project-card:hover,
.gallery-card:hover, .ai-board.is-glowing, .project-archive-cta.is-glowing,
.projects .project-card.is-glowing, .gallery-card.is-glowing {
  background: rgba(255, 255, 255, .035);
  border-color: rgba(255, 205, 111, .44);
  box-shadow: inset 0 1px rgba(255, 255, 255, .31), 0 0 28px rgba(236, 149, 34, .11), 0 20px 50px rgba(0, 0, 0, .2);
}
.button-quiet, body[data-theme="dark"] .button-primary,
.workflow-actions .button-quiet, .tag-list span, .gallery-tags span,
.skill-icon, .social-icon, .gallery-filter, .gallery-search,
.gallery-empty button, .project-preview-label, .home-preview-control,
.media-label, .preview-control, .layer-artifact code, .orbit-node,
.factory-preview b, .ledger-step, .inbox-preview > div,
.tasks-preview > div, .cad-preview > div {
  background: rgba(255, 255, 255, .025);
  border-color: rgba(255, 255, 255, .24);
  color: inherit;
  box-shadow: inset 0 1px rgba(255, 255, 255, .23), inset 0 -1px rgba(255, 255, 255, .035);
  -webkit-backdrop-filter: blur(11px) saturate(100%);
  backdrop-filter: blur(11px) saturate(100%);
}
.tag-list span, .gallery-tags span, .skill-icon, .social-icon,
.project-preview-label, .media-label, .preview-control { color: var(--accent); }
.hero-actions .button, .workflow-actions .button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .29);
  border-radius: 17px;
  background: rgba(255, 255, 255, .018);
  color: #f8f8f5;
  -webkit-backdrop-filter: blur(17px) saturate(100%);
  backdrop-filter: blur(17px) saturate(100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .46), inset 1px 0 rgba(255, 255, 255, .09), 0 10px 26px rgba(0, 0, 0, .16);
  transition: transform .25s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.hero-actions .button::before, .workflow-actions .button::before {
  content: "";
  position: absolute;
  inset: -18% 20% 52% -15%;
  z-index: -1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  filter: blur(12px);
  pointer-events: none;
}
.hero-actions .button::after, .workflow-actions .button::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 57%, #000 100%);
  mask-image: radial-gradient(ellipse at center, transparent 57%, #000 100%);
  pointer-events: none;
}
body[data-theme="dark"] .hero-actions .button-primary,
body[data-theme="dark"] .workflow-actions .button-primary {
  background: rgba(255, 255, 255, .018);
  border-color: rgba(255, 218, 149, .53);
  color: #ffd488;
  -webkit-backdrop-filter: blur(17px) saturate(100%);
  backdrop-filter: blur(17px) saturate(100%);
}
.hero-actions .button:hover, .hero-actions .button:focus-visible,
.workflow-actions .button:hover, .workflow-actions .button:focus-visible {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, .045);
  border-color: rgba(255, 220, 160, .78);
  color: #fffaf0;
  box-shadow: inset 0 1px rgba(255, 255, 255, .62), 0 0 0 1px rgba(255, 193, 88, .11), 0 0 20px rgba(255, 172, 52, .29), 0 0 43px rgba(241, 143, 31, .15), 0 12px 30px rgba(0, 0, 0, .21);
}
body[data-theme="dark"] .hero-actions .button-primary:hover,
body[data-theme="dark"] .workflow-actions .button-primary:hover {
  background: rgba(255, 255, 255, .045);
  color: #fffaf0;
}
.hero-actions .button:focus-visible, .workflow-actions .button:focus-visible {
  outline: 2px solid #ffd27b;
  outline-offset: 4px;
}
.gallery-filter:hover, .gallery-filter.is-active,
.home-preview-control:hover {
  background: rgba(255, 255, 255, .055);
  border-color: rgba(255, 205, 111, .7);
  color: #ffd488;
  box-shadow: inset 0 1px rgba(255, 255, 255, .37), 0 0 17px rgba(255, 172, 52, .19);
}
.ai-board .board-row:hover {
  background: linear-gradient(90deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .025) 42%, transparent 83%);
}
.layers-section, .boundaries-section, .questions-section, .about {
  background: rgba(255, 255, 255, .012);
}
.layer-artifact code, .orbit-node { color: #f4bd57; }
.orbit-core {
  background: rgba(255, 255, 255, .025);
  border-color: rgba(255, 255, 255, .28);
  box-shadow: inset 0 1px rgba(255, 255, 255, .28), 0 0 50px rgba(240, 160, 45, .11);
  -webkit-backdrop-filter: blur(12px) saturate(100%);
  backdrop-filter: blur(12px) saturate(100%);
}
body[data-theme="dark"] .projects .street-line,
body[data-theme="dark"] .projects .street-block,
.assistant-question, .market-columns div:last-child i, .ledger-step i {
  background: rgba(255, 255, 255, .035);
  border-color: rgba(255, 255, 255, .25);
}

/* Fit the laptop hero below the 78px header so the skyline reaches the visible fold. */
@media (min-width: 801px) {
  .hero.section-wrap { min-height: calc(100svh - 78px); }
  .hero-copy {
    padding-top: clamp(105px, 14svh, 150px);
    padding-bottom: clamp(70px, 10svh, 115px);
  }
}
@media (min-width: 801px) and (max-height: 740px) {
  .hero-copy {
    padding-top: clamp(70px, 10svh, 105px);
    padding-bottom: clamp(38px, 6svh, 70px);
  }
}
.city-interaction-zone { display: none; }
.hero-scroll-cue { display: none; }
/* Long presses should operate the skyline rather than select page copy. */
body, body * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
input, textarea, [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}
@media (max-width: 700px) {
  .hero.section-wrap { min-height: calc(100svh - 100px); }
  .hero-copy {
    padding-top: clamp(72px, 10svh, 100px);
    padding-bottom: 65px;
  }
  .hero-actions { display: none; }
  .hero-scroll-cue {
    display: grid;
    position: absolute;
    z-index: 4;
    right: 20px;
    bottom: clamp(92px, 13svh, 140px);
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(244, 181, 69, .52);
    border-radius: 50%;
    color: #f4bd57;
    background: rgba(7, 9, 13, .74);
    pointer-events: auto;
    animation: hero-cue-glow 6s ease-in-out 6s infinite;
  }
  .hero-scroll-cue svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .hero-scroll-cue::before {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: inherit;
    border: 1px solid rgba(255, 197, 82, .8);
    opacity: 0;
    filter: blur(3px);
    animation: hero-cue-halo 6s ease-in-out 6s infinite;
  }
  .portfolio-city-stage { pointer-events: none; touch-action: pan-y; }
  .city-interaction-zone {
    display: block;
    position: absolute;
    z-index: 3;
    inset: auto 0 0;
    height: 40%;
    cursor: crosshair;
    touch-action: pan-y;
  }
}
@keyframes hero-cue-glow {
  0%, 7%, 25%, 100% { box-shadow: none; }
  14% { box-shadow: 0 0 8px rgba(255, 184, 58, .65), 0 0 22px rgba(255, 153, 26, .28); }
}
@keyframes hero-cue-halo {
  0%, 7%, 25%, 100% { opacity: 0; transform: scale(.9); }
  14% { opacity: .9; transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue, .hero-scroll-cue::before { animation: none; }
}