/* Tablet and phone refinements. Desktop styling remains in styles.css. */
@media(max-width:1180px) {
 .brand { min-width: 0; flex: 0 1 280px; }
 .brand .original-logo { width: 100%; }
 .brand .original-logo img { width: 100%; height: auto; }
 .legal-hero .page-hero { height: auto; min-height: 0; padding-block: 52px; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); align-items: center; }
 .legal-hero .hero-art { position: static; width: 100%; margin: 0; }
 .legal-hero h1 { font-size: clamp(30px,3.7vw,44px); overflow-wrap: anywhere; }
 .page-hero { min-height: 0; padding-block: 48px; align-items: center; }
 .hero-art { align-self: center; }
 .services-section, .about-intro { padding-top: 72px; }
 .contact-section { padding-top: 56px; }
 .about-story { gap: 32px; padding: 32px; }
 .footer-grid { grid-template-columns: 1.3fr 1fr; gap: 40px; padding-bottom: 32px; }
 .footer-brand .original-logo { width: min(100%, 300px); }
 .footer-grid nav > a, .footer-contact a { min-height: 44px; padding-block: 10px; }
 .footer-grid nav h2 { margin-bottom: 12px; }
}
@media(max-width:1024px) {
  .site-header {
    height: 88px;
    padding: 16px 24px;
    align-items: center;
  }
  .brand {
    flex-basis: 240px;
  }
  .brand img {
    width: 240px;
  }
  .menu-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #111214;
    border: 1px solid #7c3cff75;
    border-radius: 6px;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 16px;
  }
  .menu-symbol {
    width: 18px;
    height: 12px;
    border-block: 2px solid currentColor;
    position: relative;
  }
  .menu-symbol:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 4px;
    border-top: 2px solid currentColor;
  }
  .menu-toggle[aria-expanded="true"] .menu-symbol {
    transform: rotate(90deg);
  }
  .main-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 88px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: auto;
    padding: 16px 24px 24px;
    background: #111214;
    border-bottom: 1px solid #34343c;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition:
      opacity 0.15s,
      transform 0.15s,
      visibility 0.15s;
  }
  .main-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
  }
  .main-nav a {
    padding: 13px 8px;
    letter-spacing: 0;
    font-size: 18px;
  }
  .main-nav a[aria-current="page"]:after {
    inset: 10px auto 10px 0;
    height: auto;
    width: 2px;
  }

 .brand { flex-basis: 260px; min-width: 0; }
 .menu-toggle { flex: none; }
 .main-nav { z-index: 20; max-height: calc(100dvh - 88px); overflow-y: auto; }
 .main-nav a { transform: none; transition: none; }
 .main-nav a[aria-current="page"] { transform: none; }
 .main-nav a[aria-current="page"]:after { inset: 10px auto 10px 0; width: 2px; height: auto; }
 .contact-section { grid-template-columns: 1fr; gap: 40px; }
 .contact-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
 .personal-note { max-width: 620px; }
 .contact-form { max-width: 740px; width: 100%; justify-self: center; }
 .home-intro { grid-template-columns: 1fr; gap: 40px; }
 .intro-copy h2, .intro-copy > p:not(.eyebrow) { max-width: 65ch; }
 .service-preview { padding-top: 0; }
 .service-card { width: min(100%, 580px); }
 .brand-orbit { top: -135px; left: 25%; }
 .service-preview:after { top: 300px; }
}
@media(max-width:800px) {
 .legal-hero .page-hero { grid-template-columns: 1fr; padding-block: 36px; gap: 24px; }
 .page-hero { padding-top: 36px; gap: 28px; }
 .hero-art { max-width: 390px; }
 .portrait-stage { width: min(100%,440px); }
 .about-hero .portrait-stage .hero-art { width: 100% !important; max-width: none; }
 .hero-copy .motto { margin-top: 32px; }
 .about-hero .page-hero:before { width: 300px; height: 500px; right: 15%; }
 .about-intro { padding-top: 56px; }
 .contact-hero .hero-copy > p:not(.eyebrow) { font-size: 18px; line-height: 1.5; margin-top: 24px; }
 .contact-form input, .contact-form textarea, .contact-form select { font-size: 16px; }
 .contact-form .privacy-check { padding-block: 10px; align-items: start; }
 .page-about .faq-section { padding-top: 64px; }
}
@media(max-width:700px) {
 .project-grid, .process-grid { grid-template-columns: 1fr; }
 .project-grid { max-width: 620px; gap: 40px; }
 .project-grid .project-image { padding: 24px 24px 0; }
 .process-grid li { padding: 24px 8px; border-right: 0; border-bottom: 1px solid #7c3cff55; }
 .process-grid li:last-child { border: 0; }
 .process-grid li p { max-width: 60ch; margin-top: 12px; line-height: 1.5; }
 .process-grid h3 br { display: none; }
 .about-intro .two-columns { grid-template-columns: 1fr; gap: 24px; }
 .accent-column:before { display: none; }
}
@media(max-width:520px) {
 :root { --gutter: 20px; }
 .site-header { padding-inline: 20px; gap: 12px; }
 .brand { flex: 0 1 235px; }
 .menu-toggle { padding: 8px 10px; }
 .menu-toggle > span:last-child { display: none; }
 .menu-toggle { min-width: 44px; justify-content: center; }
 .hero-copy h1 { font-size: clamp(30px,8.2vw,36px); }
 .hero-copy h1 br { display: none; }
 .hero-art { max-width: 320px; }
 .portrait-stage { max-width: 350px; }
 .about-story { padding: 24px; gap: 28px; }
 .about-story blockquote { padding: 20px; }
 .contact-methods { grid-template-columns: 1fr; }
 .contact-form { padding: 24px 18px; }
 .contact-form h2 { font-size: 26px; }
 .privacy .legal-card .eyebrow { font-size: 14px; }
 .legal-card { padding: 22px; }
 .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
 .footer-brand, .footer-grid > div:nth-child(2) { grid-column: 1 / -1; }
 .footer-brand .original-logo { max-width: 300px; }
 .cta .button { min-width: 0; max-width: 100%; }
 .brand-orbit { left: 16%; opacity: .6; }
}

/* Compact phone screen: keep the headline and usable CTA inside the laptop. */
@media(max-width:600px) {
 .home-hero-copy > p { display: none; }
 .home-hero h1 { font-size: 8cqw; line-height: 1.08; }
 .home-hero .button { font-size: 16px; line-height: 1.3; min-height: 44px; margin-top: 4cqw; padding: 10px 18px; }
 .home-hero-copy { transform: perspective(1100px) rotateY(-.5deg); }
 .hero-color-fade { height: 90px; }
}
@media(max-width:1024px) and (max-height:600px) {
 .home-hero { --scene-width: min(100vw, calc(520px * 940 / 840)); height: 520px; min-height: 520px; padding-top: 0; }
 .home-hero-copy > p { display: none; }
 .home-hero .button { font-size: 16px; min-height: 44px; padding: 10px 20px; }
 .hero-color-fade { height: 100px; }
}
@media(max-width:520px) {
 .brand .original-tagline { gap: 2px; letter-spacing: 0; }
 .brand .original-tagline i { width: 2px; height: 2px; }
}

@media(max-width:1024px) {
 .menu-toggle { border: 0; background: transparent; border-radius: 0; padding: 10px; min-width: 44px; min-height: 44px; }
 .menu-toggle > span:last-child { display: none; }
 .menu-symbol { width: 24px; height: 16px; border-top: 2px solid #fff; border-bottom: 2px solid #fff; }
 .menu-symbol:after { display: none; }
 .menu-toggle[aria-expanded="true"] .menu-symbol { transform: none; border: 0; }
 .menu-toggle[aria-expanded="true"] .menu-symbol:before, .menu-toggle[aria-expanded="true"] .menu-symbol:after { display: block; content: ''; position: absolute; top: 7px; left: 0; width: 24px; height: 2px; border: 0; background: #fff; transform: rotate(45deg); }
 .menu-toggle[aria-expanded="true"] .menu-symbol:after { transform: rotate(-45deg); }
}
@media(max-width:700px) {
 .service-preview { padding-top: 145px; }
 .brand-orbit { width: 480px; top: -170px; left: 50%; transform: translateX(-50%); opacity: 1; }
 .brand-orbit img { width: 180px; }
 .service-preview:after { top: 250px; }
 .regional-art { width: calc(100% + var(--gutter)); max-width: none; margin-right: calc(-1 * var(--gutter)); margin-left: 0; }
}
@media(max-width:520px) {
 .brand { flex-basis: 255px; }
 .brand .original-tagline { font-size: 9px; gap: 2px; letter-spacing: 0; }
 .site-header { padding-inline: 16px; gap: 8px; }
}
@media(max-width:360px) {
 .brand .original-tagline { left: 32.5%; font-size: 8.5px; gap: 1.5px; }
}
@media(min-width:521px) and (max-width:1024px) {
 .brand .original-tagline { font-size: 9px; gap: 2px; letter-spacing: 0; }
}

/* Three bars remain unchanged when the menu is open. */
@media(max-width:1024px) {
 .menu-symbol, .menu-toggle[aria-expanded="true"] .menu-symbol { width: 24px; height: 18px; border-top: 2px solid #fff; border-bottom: 2px solid #fff; transform: none; }
 .menu-symbol:before, .menu-toggle[aria-expanded="true"] .menu-symbol:before { display: none; }
 .menu-symbol:after, .menu-toggle[aria-expanded="true"] .menu-symbol:after { content: ''; display: block; position: absolute; top: 6px; left: 0; width: 24px; height: 2px; background: #fff; border: 0; transform: none; }
 .regional-art { position: relative; right: auto; bottom: auto; display: block; width: calc(100% + var(--gutter)); max-width: none; margin: 30px calc(-1 * var(--gutter)) 0 0; }
 .regional { min-height: 0; padding-bottom: 0; }
 .regional > p:not(.eyebrow) { max-width: 65ch; }
}
@media(max-width:700px) {
 .service-preview { padding-top: 0; }
 .brand-orbit { width: 360px; top: 90px; left: auto; right: -45px; transform: none; border-width: 24px; box-shadow: inset 0 0 0 22px #7c3cff08; }
 .brand-orbit img { width: 140px; }
 .service-preview:after { top: 340px; }
}
@media(max-width:700px) {
 .service-preview { display: grid; grid-template-columns: minmax(0,1fr); gap: 30px; }
 .service-preview .service-card { margin-bottom: 0; }
 .service-preview .service-card:nth-of-type(1) { grid-row: 1; }
 .service-preview .service-card:nth-of-type(2) { grid-row: 2; }
 .service-preview .service-card:nth-of-type(3) { grid-row: 3; }
 .brand-orbit { grid-area: 2 / 1 / 3 / 2; top: 50%; transform: translateY(-50%); }
}

/* More legible small logo text on touch layouts; desktop remains unchanged. */
/* Slightly smaller decorative JU motif; preserve its existing responsive anchor. */
.brand-orbit { scale: .9; }
.brand-orbit::before {
 content: ''; position: absolute; inset: -16%; z-index: -1;
 border-radius: 50%; pointer-events: none;
 background: radial-gradient(ellipse, #7c3cff09 18%, #7c3cff06 42%, #7c3cff02 58%, transparent 73%);
}
.brand-orbit img { filter: drop-shadow(0 0 18px #7c3cff33); }
.service-preview::after { scale: .9; transform-origin: right top; }

@media(max-width:1024px) {
 .original-logo .original-tagline { font-size: 10px; font-weight: 700; letter-spacing: 0; gap: 2px; }
 .original-logo .original-tagline i { width: 2px; height: 2px; }
 .brand { flex-basis: 280px; }
}
@media(max-width:360px) {
 .brand .original-tagline { font-size: 9.5px; left: 32.5%; gap: 1px; }
}
@media(max-width:360px) {
 .site-header { padding-inline: 12px; }
 .brand .original-tagline { font-size: 9px; }
}