/* Compact phone layout. All changes are restricted to phone widths. */
@media (max-width:620px) {
  html body #portfolio-dashboard {padding:0!important;min-height:100dvh!important}
  html body #portfolio-dashboard .rail {padding:6px 8px!important;height:auto!important;min-height:56px!important}
  html body #portfolio-dashboard .rail__inner {display:flex!important;flex-direction:row!important;height:auto!important;gap:8px!important;align-items:center!important}
  html body #portfolio-dashboard .rail__avatar,
  html body #portfolio-dashboard .rail__avatar img {width:36px!important;height:36px!important;flex:0 0 36px!important}
  html body #portfolio-dashboard .rail__name {display:flex!important;align-items:center!important;gap:4px!important;flex:1!important;min-width:0!important;width:auto!important;text-align:left!important;font-size:14px!important;line-height:1.2!important}
  html body #portfolio-dashboard .rail__actions {width:auto!important;flex:0 0 auto!important;margin:0!important;gap:0!important}
  /* Social links remain in Availability and Contact; the header keeps the theme control. */
  html body #portfolio-dashboard .rail__socials {display:none!important}
  html body #portfolio-dashboard .rail__theme {width:44px!important;height:44px!important;min-width:44px!important;max-width:44px!important;min-height:44px!important;max-height:44px!important;flex:0 0 44px!important}
  html body #portfolio-dashboard .shell__panel {min-height:0!important;padding-bottom:calc(66px + env(safe-area-inset-bottom))!important}
  html body #portfolio-dashboard .home {padding:7px!important;gap:6px!important;min-height:0!important}
  html body #portfolio-dashboard :is(.portfolio-eng-headline,.portfolio-about-headline,.portfolio-construction-headline) {margin:0 0 7px!important;padding:0 2px!important}
  html body #portfolio-dashboard :is(.portfolio-eng-headline,.portfolio-about-headline,.portfolio-construction-headline) h2 {font-size:22px!important;line-height:1.12!important}
  html body #portfolio-dashboard :is(.portfolio-eng-headline,.portfolio-about-headline,.portfolio-construction-headline) p {font-size:12px!important;line-height:1.35!important;margin-top:4px!important}
  html body #portfolio-dashboard .portfolio-reference-grid {height:auto!important;min-height:0!important;grid-template-rows:none!important;grid-auto-rows:auto!important;gap:6px!important;align-items:start!important}
  html body #portfolio-dashboard .portfolio-reference-grid > .portfolio-ref-card {min-height:0!important;height:auto!important;padding:8px!important;border-radius:12px!important;gap:6px!important}
  html body #portfolio-dashboard .portfolio-ref-head {margin:0!important;gap:5px!important}
  html body #portfolio-dashboard .portfolio-ref-label {gap:7px!important;min-width:0!important}
  html body #portfolio-dashboard .portfolio-ref-label h3 {font-size:14px!important;line-height:1.2!important;overflow-wrap:anywhere}
  html body #portfolio-dashboard .portfolio-ref-icon {width:28px!important;height:28px!important;flex-basis:28px!important;border-radius:8px!important}
  html body #portfolio-dashboard .portfolio-ref-icon .ph {font-size:17px!important}
  html body #portfolio-dashboard .portfolio-ref-head p {font-size:12px!important;line-height:1.35!important}
  /* Native disclosure retains keyboard interaction and all original content. */
  html body #portfolio-dashboard [data-mobile-disclosure] {display:block!important}
  .mobile-card-details {width:100%;min-width:0}
  .mobile-card-details > summary {position:relative;display:block;list-style:none;cursor:pointer;min-height:44px;padding:7px 25px 7px 0;box-sizing:border-box}
  .mobile-card-details > summary::-webkit-details-marker {display:none}
  .mobile-card-details > summary::after {content:'+';position:absolute;right:4px;top:10px;font:500 22px/1 system-ui;color:var(--dash-ink)}
  .mobile-card-details[open] > summary::after {content:'−'}
  html body #portfolio-dashboard .mobile-card-details:not([open]) .portfolio-ref-head p {display:none!important}
  .mobile-card-details[open] > summary {margin-bottom:6px}
  html body #portfolio-dashboard .mobile-card-details > :not(summary) {margin-top:6px!important}
  html body #portfolio-dashboard :is(.cva-service-grid,.cva-deliverable-grid,.cva-cred-grid,.cva-workflow-grid) {grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:none!important;gap:5px!important}
  html body #portfolio-dashboard :is(.cva-service,.cva-deliverable,.cva-cred) {grid-template-columns:20px minmax(0,1fr)!important;gap:5px!important;padding:7px!important}
  html body #portfolio-dashboard :is(.cva-service b,.cva-deliverable b,.cva-cred b,.cva-workflow-step strong) {font-size:12px!important;line-height:1.3!important}
  html body #portfolio-dashboard :is(.cva-service small,.cva-deliverable small,.cva-cred small,.cva-cred strong,.cva-workflow-step small,.cva-tool span,.cva-tool-group>strong) {font-size:11px!important;line-height:1.35!important;-webkit-line-clamp:unset!important;white-space:normal!important}
  html body #portfolio-dashboard .cva-tool-list {grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body #portfolio-dashboard .portfolio-ref-card--projects .portfolio-ref-reel {height:130px!important;min-height:130px!important;max-height:130px!important;flex:0 0 130px!important}
  html body #portfolio-dashboard .portfolio-reference-grid:not(.portfolio-reference-grid--engineering):not(.portfolio-reference-grid--construction) {grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body #portfolio-dashboard .portfolio-reference-grid:not(.portfolio-reference-grid--engineering):not(.portfolio-reference-grid--construction) > .portfolio-ref-card {grid-column:auto!important;grid-row:auto!important}
  html body #portfolio-dashboard .portfolio-reference-grid:not(.portfolio-reference-grid--engineering):not(.portfolio-reference-grid--construction) > .portfolio-ref-card--contact {grid-column:1/-1!important}
  html body #portfolio-dashboard .portfolio-reference-grid:not(.portfolio-reference-grid--engineering):not(.portfolio-reference-grid--construction) .portfolio-ref-detail-grid {display:none!important}
  html body #portfolio-dashboard .portfolio-ref-card--experience .portfolio-ref-timeline {gap:4px!important;padding:0!important}
  html body #portfolio-dashboard .portfolio-ref-card--experience .portfolio-ref-step {padding:4px!important;min-height:0!important}
  html body #portfolio-dashboard .portfolio-ref-card--experience .portfolio-ref-step small {display:none!important}
  html .mobile-nav {min-height:48px!important;bottom:max(6px,env(safe-area-inset-bottom))!important;width:calc(100% - 12px)!important;border-radius:13px!important}
  html .mobile-nav :is(a,button) {height:48px!important;min-height:48px!important;padding:9px!important}
  html .mobile-nav :is(a,button) > :is(i,svg) {font-size:21px!important;width:21px!important;height:21px!important;flex-basis:21px!important}
  /* Keep the accessibility launcher inside the screen, above the fixed navigator. */
  html body .a11y:not(.mobile-more-tools .a11y) {right:8px!important;left:auto!important;bottom:calc(62px + env(safe-area-inset-bottom))!important;width:44px!important;height:44px!important}
  html body .a11y:not(.mobile-more-tools .a11y) .a11y__button {width:44px!important;height:44px!important;padding:0!important}
  html body .a11y:not(.mobile-more-tools .a11y) .mobile-tool-label {display:none!important}
}

@media (max-width:620px) {
  html body #portfolio-dashboard .shell {min-height:100dvh!important}
  html body #portfolio-dashboard .automation-intro {min-height:300px!important;height:300px!important;padding:0!important}
  html body #portfolio-dashboard .automation-intro__copy {width:66%!important;padding:24px 12px!important}
  html body #portfolio-dashboard .automation-intro__eyebrow {font-size:9px!important;margin-bottom:12px!important;letter-spacing:.1em!important}
  html body #portfolio-dashboard .automation-intro__title {font-size:34px!important}
  html body #portfolio-dashboard .automation-intro__button {margin-top:18px!important;min-height:44px!important;padding:10px!important;font-size:12px!important;gap:6px!important}
  html body #portfolio-dashboard .automation-intro__avatar {position:absolute!important;right:-15px!important;bottom:0!important;width:52%!important;margin:0!important;max-height:230px!important}
  html body #portfolio-dashboard .automation-intro__tapes {width:130%!important;left:-15%!important;bottom:-75px!important}
  html body #portfolio-dashboard .portfolio-contact-page {padding:7px!important}
  html body #portfolio-dashboard .portfolio-contact-shell {padding:0!important;gap:7px!important;border:0!important;box-shadow:none!important;background:transparent!important}
  html body #portfolio-dashboard :is(.portfolio-faq-card,.portfolio-contact-form) {min-height:0!important;padding:12px!important;border-radius:12px!important}
  html body #portfolio-dashboard .portfolio-faq-card h2 {font-size:24px!important;margin:0!important}
  html body #portfolio-dashboard .portfolio-faq-sub {font-size:12px!important;margin:6px 0!important}
  html body #portfolio-dashboard .portfolio-faq-item summary {padding:12px 0!important;min-height:44px!important}
  html body #portfolio-dashboard .portfolio-contact-form {gap:10px!important}
  html body #portfolio-dashboard .portfolio-contact-message textarea {min-height:96px!important}
}
@media (max-width:620px) {
  html body .a11y:not(.mobile-more-tools .a11y) {left:8px!important;right:auto!important}
  html body .a11y:not(.mobile-more-tools .a11y) .a11y__panel {left:0!important;right:auto!important}
  html body #portfolio-dashboard .portfolio-ref-detail-grid {min-height:0!important;gap:5px!important}
  html body #portfolio-dashboard .portfolio-ref-detail-grid > span {grid-template-columns:20px minmax(0,1fr)!important;padding:7px!important;gap:3px 5px!important;min-width:0!important}
  html body #portfolio-dashboard .portfolio-ref-detail-grid > span > i {width:20px!important;height:24px!important;font-size:15px!important}
  html body #portfolio-dashboard .portfolio-ref-detail-grid b {font-size:12px!important;line-height:1.3!important;white-space:normal!important;overflow-wrap:anywhere}
  html body #portfolio-dashboard .portfolio-ref-detail-grid small {font-size:11px!important;line-height:1.3!important;white-space:normal!important}
}
@media (max-width:620px) {
  html body #portfolio-dashboard [data-about-modal] > :not(.portfolio-ref-head) {display:none!important}
  html body #portfolio-dashboard .portfolio-reference-grid--about .portfolio-creds-reel {height:96px!important;min-height:96px!important;flex-basis:96px!important}
  html body #portfolio-dashboard .portfolio-reference-grid--about .portfolio-creds-reel .portfolio-ref-reel {height:96px!important;min-height:96px!important;max-height:96px!important;flex-basis:96px!important}
  html body #portfolio-dashboard .portfolio-reference-grid--about .portfolio-ref-card--about .portfolio-ref-chips {display:none!important}
}
@media (max-width:620px) {
  html body #portfolio-dashboard .portfolio-contact-row {grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  html body #portfolio-dashboard .portfolio-contact-form label {min-width:0!important}
  html body #portfolio-dashboard .portfolio-contact-message textarea {height:96px!important}
}

@media (max-width:620px) {
  html body #portfolio-dashboard .portfolio-auto-sys {padding:0!important}
  html body #portfolio-dashboard .auto-mosaic--final {gap:6px!important}
  html body #portfolio-dashboard .auto-mosaic--final > .portfolio-ref-card {min-height:0!important;height:auto!important;padding:8px!important;border-radius:12px!important}
  html body #portfolio-dashboard .auto-mosaic--final .auto-showcase {height:142px!important;min-height:0!important;flex:0 0 142px!important;overflow:hidden!important}
  html body #portfolio-dashboard .auto-mosaic--final .auto-tile {height:68px!important}
  html body #portfolio-dashboard .auto-mosaic--final .auto-app-fan {height:125px!important;min-height:125px!important;max-height:125px!important}
  html body #portfolio-dashboard .auto-mosaic__utility-row--final {gap:6px!important}
  html body #portfolio-dashboard .auto-mosaic__utility-row--final > .auto-mosaic__mini {min-height:0!important;padding:8px!important}
  html body #portfolio-dashboard .auto-sys__title {font-size:24px!important;line-height:1.15!important}
}
@media (max-width:620px) {
  html body #portfolio-dashboard .portfolio-ref-card--experience .portfolio-ref-step {min-height:22px!important;height:auto!important;padding:3px!important;line-height:1.3!important}
  html body #portfolio-dashboard .portfolio-ref-card--experience .portfolio-ref-step b {font-size:12px!important;line-height:1.3!important;white-space:normal!important}
  html body #portfolio-dashboard .portfolio-reference-grid:not(.portfolio-reference-grid--engineering):not(.portfolio-reference-grid--construction) > .portfolio-ref-card--about {grid-column:1/-1!important}
}

/* Keep Free tools reachable without crowding the phone's bottom navigation. */
.portfolio-mobile-tools{display:none}
@media(max-width:620px){
  html body #portfolio-dashboard .rail__actions{gap:2px!important}
  html body #portfolio-dashboard .portfolio-mobile-tools{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px;color:var(--accent,#7E5B47);border-radius:12px;text-decoration:none;font-size:22px}
  html body #portfolio-dashboard .portfolio-ref-label h3{white-space:normal!important;min-width:0;word-break:normal}
  html body #portfolio-dashboard .portfolio-ref-step b{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;min-width:0}
}
@media(max-width:360px){
  html body #portfolio-dashboard .portfolio-reference-grid:not(.portfolio-reference-grid--engineering):not(.portfolio-reference-grid--construction):not(.portfolio-reference-grid--about){grid-template-columns:minmax(0,1fr)!important}
}