/* =========================================================
   media.css
   honeyway responsive styles
   ========================================================= */

/* =========================
   large desktop down
   ========================= */
@media (max-width: 1200px) {
  .home-hero-inner,
  .home-about-inner {
    gap: var(--space-40);
  }

  .home-services-grid,
  .home-process-grid {
    gap: var(--space-24);
  }

  .site-footer-main {
    grid-template-columns: 1.1fr 0.9fr 0.9fr 1fr;
    gap: var(--space-32);
  }

  .about-broker-grid,
  .about-focus-inner {
    gap: var(--space-40);
  }
}

/* =========================
   laptop / tablet landscape
   ========================= */
@media (max-width: 1024px) {
  .site-header-inner {
    min-height: 80px;
  }

  .site-brand img {
    max-height: 52px;
  }

  .site-header-right {
    gap: var(--space-20);
  }

  .site-nav-list {
    gap: var(--space-20);
  }

  .home-hero {
    padding: var(--space-80) 0 var(--space-72);
  }

  .home-hero-inner,
  .home-about-inner {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }

  .home-hero-side,
  .home-about-side {
    justify-content: flex-start;
  }

  .home-hero-panel,
  .home-about-panel {
    max-width: 100%;
  }

  .home-services-grid,
  .home-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-40) var(--space-32);
  }

  .about-broker-grid,
  .about-focus-inner {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }

  .about-values-grid,
  .about-focus-grid {
    grid-template-columns: 1fr;
  }

  .about-broker-photo-frame {
    max-width: 420px;
  }
}

/* =========================
   tablet
   ========================= */
@media (max-width: 900px) {
  .container,
  .container-narrow {
    width: min(100% - 32px, var(--site-max-width));
  }

  .section {
    padding: var(--space-72) 0;
  }

  .section-sm {
    padding: var(--space-56) 0;
  }

  .section-lg {
    padding: var(--space-88) 0;
  }

  .site-header {
    position: sticky;
  }

  .site-header-inner {
    min-height: 72px;
    gap: var(--space-16);
  }

  .site-brand img {
    max-height: 46px;
  }

  .site-header-actions {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
    flex-shrink: 0;
  }

  .site-header-right {
    justify-content: flex-end;
    gap: var(--space-16);
  }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: var(--space-24);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 12px 24px rgba(11, 31, 58, 0.08);
  }

  .site-nav.is-open {
    display: block;
  }

  .site-nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-12);
  }

  .site-nav-item {
    width: 100%;
  }

  .site-nav-link {
    width: 100%;
    min-height: 44px;
    font-size: 1rem;
  }

  .site-nav-link::after {
    display: none;
  }

  .site-dropdown {
    position: static;
    min-width: 100%;
    margin-top: var(--space-8);
    padding: var(--space-8) 0 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    box-shadow: none;
    border: 0;
    background: transparent;
    display: none;
  }

  .site-nav-item.has-dropdown:hover .site-dropdown,
  .site-nav-item.has-dropdown:focus-within .site-dropdown {
    display: block;
  }

  .site-dropdown-link {
    padding: 8px 0 8px 16px;
  }

  .home-hero {
    padding: var(--space-72) 0 var(--space-64);
  }

  .home-hero-inner {
    grid-template-columns: 1fr;
    gap: var(--space-24);
  }

  .home-hero-title {
    max-width: 14ch;
  }

  .home-hero-text {
    max-width: 100%;
  }

  .home-hero-side {
    justify-content: flex-start;
  }

  .home-hero-panel {
    max-width: 100%;
    padding: var(--space-24);
  }

  .home-services,
  .home-about,
  .home-process {
    padding: var(--space-72) 0;
  }

  .home-services-grid,
  .home-process-grid {
    gap: var(--space-20);
  }

  .home-service {
    padding: var(--space-24);
  }

  .home-about-inner {
    grid-template-columns: 1fr;
    gap: var(--space-28);
  }

  .home-about-panel {
    max-width: 100%;
    padding: var(--space-24);
  }

  .home-cta {
    padding: var(--space-80) 0;
  }

  .site-footer {
    padding: var(--space-64) 0 var(--space-24);
  }

  .site-footer-main {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }

  .site-footer-brand {
    max-width: 100%;
  }

  .site-footer-logo {
    margin-bottom: var(--space-16);
  }

  .site-footer-divider {
    margin: var(--space-40) 0 var(--space-20);
  }

  .site-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-12);
  }

  .about-hero {
    padding: var(--space-80) 0 var(--space-64);
  }

  .about-broker,
  .about-statement,
  .about-values,
  .about-focus {
    padding: var(--space-72) 0;
  }

  .about-broker-grid {
    gap: var(--space-32);
  }

  .about-broker-photo-frame {
    max-width: 380px;
  }

  .about-values-intro,
  .about-focus-intro {
    margin-bottom: var(--space-32);
  }

  .about-focus-grid {
    gap: var(--space-20);
  }

  .about-cta {
    padding: var(--space-80) 0;
  }
}

/* =========================
   mobile
   ========================= */
@media (max-width: 768px) {
  .container,
  .container-narrow {
    width: min(100% - 24px, var(--site-max-width));
  }

  body {
    font-size: 15px;
  }

  h1 {
    font-size: clamp(2.1rem, 8vw, 3rem);
  }

  h2 {
    font-size: clamp(1.7rem, 6vw, 2.35rem);
  }

  h3 {
    font-size: clamp(1.3rem, 4.5vw, 1.8rem);
  }

  .lead {
    font-size: 1rem;
  }

  .section {
    padding: var(--space-64) 0;
  }

  .section-sm {
    padding: var(--space-48) 0;
  }

  .section-lg {
    padding: var(--space-72) 0;
  }

  .site-header-inner {
    min-height: 72px;
  }

  .site-brand img {
    max-height: 44px;
  }

  .nav-toggle {
    width: 42px;
    height: 42px;
  }

  .nav-toggle-icon {
    font-size: 1.2rem;
  }

  .site-nav {
    padding: var(--space-20);
  }

  .home-hero {
    padding: var(--space-64) 0 var(--space-56);
  }

  .home-hero-content > * + * {
    margin-top: var(--space-16);
  }

  .home-hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-12);
  }

  .home-hero-panel {
    padding: var(--space-20);
  }

  .home-services-grid,
  .home-process-grid {
    grid-template-columns: 1fr;
  }

  .home-service {
    padding: var(--space-20);
    gap: var(--space-12);
  }

  .home-about-content > * + * {
    margin-top: var(--space-16);
  }

  .home-about-highlight {
    padding-left: var(--space-16);
  }

  .home-about-panel {
    padding: var(--space-20);
  }

  .home-process-step {
    gap: var(--space-12);
  }

  .home-process-text {
    max-width: 100%;
  }

  .home-cta {
    padding: var(--space-72) 0;
  }

  .home-cta-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-12);
  }

  .site-footer {
    padding: var(--space-56) 0 var(--space-20);
  }

  .site-footer-main {
    gap: var(--space-28);
  }

  .site-footer-title {
    margin-bottom: var(--space-8);
  }

  .site-footer-description {
    max-width: 100%;
  }

  .site-footer-badges {
    margin-top: var(--space-16);
  }

  .site-footer-bottom {
    text-align: left;
  }

  .site-footer-meta {
    gap: var(--space-12);
  }

  .about-hero {
    padding: var(--space-72) 0 var(--space-56);
  }

  .about-page-title {
    max-width: 100%;
  }

  .about-broker,
  .about-statement,
  .about-values,
  .about-focus {
    padding: var(--space-64) 0;
  }

  .about-broker-photo-frame {
    max-width: 100%;
  }

  .about-value-card,
  .about-focus-card {
    padding: var(--space-20);
  }

  .about-focus-card {
    min-height: auto;
  }

  .about-cta {
    padding: var(--space-72) 0;
  }

  .about-cta-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-12);
  }
}

/* =========================
   small mobile
   ========================= */
@media (max-width: 560px) {
  .site-header-inner {
    min-height: 68px;
  }

  .site-brand img {
    max-height: 40px;
  }

  .home-hero-title {
    max-width: 100%;
  }

  .home-hero-panel,
  .home-about-panel,
  .home-service {
    padding: 18px;
  }

  .home-services,
  .home-about,
  .home-process {
    padding: var(--space-64) 0;
  }

  .site-footer-copy,
  .site-footer-meta a {
    font-size: var(--font-size-xs);
  }

  .about-broker-role {
    margin-bottom: var(--space-20);
  }

  .about-value-card,
  .about-focus-card {
    padding: 18px;
  }
}

/* =========================
   extra small mobile
   ========================= */
@media (max-width: 420px) {
  .container,
  .container-narrow {
    width: min(100% - 20px, var(--site-max-width));
  }

  .home-hero {
    padding: var(--space-56) 0 var(--space-48);
  }

  .home-hero-panel,
  .home-about-panel,
  .home-service {
    padding: 16px;
  }

  .site-nav {
    padding: 16px;
  }

  .site-footer {
    padding: var(--space-48) 0 var(--space-20);
  }

  .about-value-card,
  .about-focus-card {
    padding: 16px;
  }
}