/* Apple-inspired responsive refinement: calm hierarchy, direct feedback and adaptive glass. */
:root {
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a, button, summary, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid rgba(255,255,255,.92);
  outline-offset: 3px;
}

.button, .nav-cta, button, summary {
  transform-origin: center;
}

.button:active, .nav-cta:active, button:active, summary:active {
  transform: scale(.975);
  transition-duration: 90ms !important;
}

@media (max-width: 900px) {
  html { scroll-padding-top: 150px; }
  body {
    padding-bottom: 0;
    font-size: 16px;
    line-height: 1.6;
  }
  main { min-width: 0; }

  .shell { width: min(100% - 32px, 1180px) !important; }

  .nav {
    top: max(10px, env(safe-area-inset-top)) !important;
    width: min(100% - 20px, 1180px) !important;
    min-height: 60px !important;
    padding: 8px 9px 8px 10px !important;
    border-radius: 20px !important;
    background: rgba(12,12,12,.76) !important;
    -webkit-backdrop-filter: blur(30px) saturate(150%) !important;
    backdrop-filter: blur(30px) saturate(150%) !important;
    box-shadow: 0 16px 42px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.11) !important;
    flex-wrap: wrap;
    gap: 6px;
  }

  .brand { gap: 10px !important; min-width: 0; }
  .brand img { width: 40px !important; height: 40px !important; flex: 0 0 40px; }
  .brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; letter-spacing: -.01em; }

  .nav-cta {
    min-height: 44px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
    font-size: .8rem;
    white-space: nowrap;
  }
  .nav-cta span { display: inline !important; }
  .nav-cta b { display: none !important; }

  .nav-links {
    position: static !important;
    order: 3;
    transform: none !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 2px !important;
    width: 100%;
    padding: 4px;
    border: 0;
    border-radius: 16px;
    color: #a8a8a5 !important;
    background: rgba(255,255,255,.045);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
    font-size: .66rem !important;
    letter-spacing: .01em;
  }

  .nav-links a {
    display: grid;
    min-width: 0;
    min-height: 36px;
    place-items: center;
    padding: 3px 2px;
    border-radius: 15px;
    white-space: nowrap;
  }
  .nav-links a:active { background: rgba(255,255,255,.08); }
  .nav-links a[aria-current="page"] {
    color: #fff !important;
    background: rgba(255,255,255,.11);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  }

  .hero {
    min-height: auto !important;
    padding: 168px 0 64px !important;
    align-items: end !important;
  }
  .eyebrow {
    margin-bottom: 18px !important;
    font-size: .68rem !important;
    letter-spacing: .16em !important;
  }
  .eyebrow::before { width: 26px !important; }
  h1 {
    margin-bottom: 24px !important;
    max-width: 100% !important;
    font-size: clamp(2.45rem, 10.5vw, 3.6rem) !important;
    line-height: .96 !important;
    letter-spacing: -.035em !important;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }
  .hero p, .hero-copy { font-size: 1rem !important; line-height: 1.64; }

  section { padding: 72px 0 !important; }
  .section-head { margin-bottom: 34px !important; gap: 18px !important; }
  .section-head h2, .cta h2, .closing h2, .contact-copy h2,
  .collaboration h2, .support h2, .answer h2 {
    font-size: clamp(2.3rem, 10vw, 3.55rem) !important;
    line-height: .98 !important;
    letter-spacing: -.025em !important;
    text-wrap: balance;
  }
  .section-head p { font-size: 1rem !important; }

  .button {
    min-height: 48px !important;
    padding: 0 17px !important;
    border-radius: 14px !important;
  }
  .card, details, .about-panel, .contact-wrap, .principle-wrap,
  .answer-panel, .region-layout, .support-panel, .closing-panel {
    border-radius: 22px !important;
    -webkit-backdrop-filter: blur(20px) saturate(135%) !important;
    backdrop-filter: blur(20px) saturate(135%) !important;
    box-shadow: 0 22px 58px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08) !important;
  }

  .hero-orbit {
    width: min(78vw, 320px) !important;
    right: -36vw !important;
    top: 115px !important;
    box-shadow: 0 0 0 34px rgba(255,255,255,.014), 0 0 0 72px rgba(255,255,255,.009) !important;
  }
  .hero-bottom { gap: 24px !important; }
  .hero-actions { flex-wrap: wrap; gap: 10px !important; }
  .trust-grid { grid-template-columns: 1fr !important; }
  .trust-item { padding: 20px 0 !important; border-right: 0 !important; border-bottom: 1px solid var(--line); }
  .trust-item:last-child { border-bottom: 0; }

  .service-grid { gap: 12px !important; }
  summary {
    grid-template-columns: 34px minmax(0,1fr) 38px !important;
    min-height: 86px !important;
    gap: 10px !important;
    padding: 16px !important;
  }
  summary h3 { font-size: clamp(1.25rem, 6.3vw, 1.65rem) !important; line-height: 1.05; }
  .service-body, details:not([open]) > .service-body { padding-left: 60px !important; padding-right: 16px !important; }
  details[open] > .service-body { padding-bottom: 22px !important; }
  .service-body ul { grid-template-columns: 1fr !important; gap: 10px !important; }

  .about-preview, .contact, .principles { padding-top: 48px !important; }
  .about-panel, .contact-copy, .contact-form, .principle-wrap,
  .collaboration, .cta, .answer-panel, .region-layout, .support-panel, .closing-panel {
    padding: 24px !important;
  }
  .about-mark { min-height: 220px !important; border-radius: 18px !important; }
  .about-mark img { width: min(58%, 180px) !important; }
  .contact-wrap { overflow: clip; }
  .contact-copy { border-right: 0 !important; border-bottom: 1px solid var(--line); }
  .form-grid { grid-template-columns: 1fr !important; gap: 15px !important; }
  .field.full { grid-column: auto !important; }
  .field input, .field select, .field textarea { min-height: 48px; font-size: 16px; }
  .form-foot { align-items: stretch !important; flex-direction: column !important; }
  .submit-button { width: 100%; }
  .principle-wrap h2 { margin-bottom: 38px !important; }
  .principle-grid { gap: 18px !important; }
  .closing { min-height: auto !important; text-align: left !important; }
  .closing p { margin-inline: 0 !important; }

  .team-grid { gap: 14px !important; }
  .team-card { min-height: 0 !important; padding: 24px !important; gap: 18px !important; }
  .team-card-top { min-height: 220px !important; }
  .team-card-photo { top: 6px !important; width: min(76%, 250px) !important; height: 254px !important; }
  .team-card h2 { min-height: 0 !important; margin: 10px 0 12px !important; font-size: clamp(2rem, 9vw, 2.55rem) !important; }
  .team-card .team-focus { margin-top: 18px !important; padding-top: 0 !important; }
  .team-focus span { min-height: 32px; display: inline-flex; align-items: center; }
  .collaboration { gap: 24px !important; }
  .step { grid-template-columns: 32px 1fr !important; gap: 12px !important; }

  .service-layout { gap: 28px !important; padding-bottom: 72px !important; }
  .service-index {
    display: flex !important;
    overflow-x: auto;
    gap: 6px !important;
    padding: 8px !important;
    border-radius: 18px !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .service-index::-webkit-scrollbar { display: none; }
  .service-index span { display: none !important; }
  .service-index a { flex: 0 0 auto; min-height: 44px; display: grid; place-items: center; padding: 10px 13px !important; scroll-snap-align: start; }
  .service-section { padding-bottom: 64px !important; }
  .service-head { padding-bottom: 24px !important; margin-bottom: 18px !important; }
  .service-head h2 { font-size: clamp(2.35rem, 10vw, 3.6rem) !important; }
  .detail-grid { gap: 12px !important; }
  .detail { min-height: 0 !important; padding: 22px !important; border-radius: 18px !important; }
  .category-cta { padding: 20px !important; }
  .closing { padding-bottom: 72px !important; }

  .region-index { padding-bottom: 24px !important; }
  .region-links { grid-template-columns: 1fr !important; gap: 10px !important; }
  .region-links a { padding: 18px !important; border-radius: 16px !important; }
  .region { padding: 38px 0 !important; scroll-margin-top: 92px !important; }
  .region-layout, .answer-panel, .support-panel { gap: 24px !important; }
  .region h2 { font-size: clamp(2.35rem, 10vw, 3.7rem) !important; }
  .area-group { margin-top: 18px !important; padding-top: 18px !important; }
  .service-list { gap: 8px !important; }

  .reveal {
    transform: translateY(12px) !important;
    transition: opacity .42s ease-out, transform .42s cubic-bezier(.2,.72,.25,1) !important;
  }
  .reveal.visible { transform: none !important; }

  footer { padding: 30px 0 34px !important; }
  .footer-row { gap: 14px !important; font-size: .84rem; }
}

@media (max-width: 380px) {
  .shell { width: min(100% - 24px, 1180px) !important; }
  .brand span { max-width: 112px; }
  .nav-cta { padding-inline: 12px !important; }
  .nav-links a { font-size: .62rem; }
  h1 { font-size: clamp(2.3rem, 10.5vw, 3rem) !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: opacity 180ms ease !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .nav, .nav-links, .card, details, .about-panel, .contact-wrap,
  .principle-wrap, .answer-panel, .region-layout, .support-panel, .closing-panel {
    background: rgba(12,12,12,.96) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

@media (prefers-contrast: more) {
  .nav, .nav-links, .card, details, .about-panel, .contact-wrap,
  .principle-wrap, .answer-panel, .region-layout, .support-panel, .closing-panel {
    background: #0a0a0a !important;
    border-color: rgba(255,255,255,.42) !important;
  }
  body { color: #fff; }
}

/* Good to Know navigation: six links remain available at phone widths. */
@media(max-width:900px){.nav-links{grid-template-columns:repeat(3,minmax(0,1fr))!important}.nav-links a{min-height:36px!important}.hero{padding-top:205px!important}}
@media(min-width:901px){.nav-links{gap:22px!important;font-size:.84rem!important}}