/* Mobile Optimizations - Applied to all pages */
/* Ensure desktop view is not affected */
/* All mobile text follows a uniform, smaller sizing pattern */

@media (max-width: 768px) {
  /* Base body text size - applies to most elements */
  body {
    font-size: 0.65rem !important;
  }

  /* Logo sizing */
  .logo {
    font-size: 0.8rem;
  }

  .logo img {
    height: 45px !important;
    width: auto !important;
  }

  /* Heading sizes - all reduced for mobile */
  h1 {
    font-size: 0.6rem !important;
  }

  h2 {
    font-size: 0.6rem !important;
  }

  h3 {
    font-size: 0.6rem !important;
  }

  h4 {
    font-size: 0.6rem !important;
  }

  h5 {
    font-size: 0.6rem !important;
  }

  h6 {
    font-size: 0.6rem !important;
  }

  /* Hero section */
  .hero h1 {
    font-size: clamp(1rem, 4vw, 1.5rem);
  }

  .hero-tagline {
    font-size: 0.65rem !important;
  }

  .hero-subline {
    font-size: 0.65rem !important;
  }

  /* Navigation */
  nav a, .nav-item {
    font-size: 0.65rem;
  }

  /* Service cards */
  .service-card h3 {
    font-size: 0.65rem;
  }

  .service-card p {
    font-size: 0.65rem;
  }

  .service-list li {
    font-size: 0.65rem;
  }

  /* Project cards */
  .project-card h3 {
    font-size: 0.65rem;
  }

  .project-location {
    font-size: 0.65rem;
  }

  /* Process section */
  .process-number {
    font-size: 1.5rem;
  }

  .process-item h3 {
    font-size: 0.65rem;
  }

  .process-item p {
    font-size: 0.65rem;
  }

  /* Footer */
  footer h3 {
    font-size: 0.65rem !important;
  }

  footer p {
    font-size: 0.65rem !important;
  }

  footer a {
    font-size: 0.65rem !important;
  }

  /* Footer quick links */
  footer ul li a {
    font-size: 0.65rem !important;
  }

  footer .reveal a {
    font-size: 0.65rem !important;
  }

  /* Newsletter form text */
  .newsletter-content p {
    font-size: 0.65rem !important;
  }

  /* Footer logo */
  .footer-logo {
    display: block !important;
    text-align: center !important;
    margin: 0 auto 8px !important;
  }

  .footer-logo img {
    height: 45px !important;
    width: auto !important;
    display: block !important;
    margin: 0 auto 8px !important;
  }

  /* Footer first column - center logo and location */
  footer .reveal:first-child {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  footer .reveal:first-child p {
    margin: 0 !important;
    margin-left: 0 !important;
  }

  /* CTA section */
  .cta-section h2 {
    font-size: 0.65rem;
  }

  .cta-section p {
    font-size: 0.65rem;
  }

  /* Slideshow text */
  .slideshow-title {
    font-size: 0.65rem !important;
  }

  .slideshow-cta {
    font-size: 0.65rem !important;
  }

  /* Hero center link */
  .hero-center-link {
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  .hero-center-link a {
    font-size: 0.65rem !important;
    display: block !important;
    text-align: center !important;
  }

  /* Announcement banner mobile styling */
  .announcement-banner {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    display: block !important;
    width: 100% !important;
    background: #2A2622 !important;
    color: #FFFFFF !important;
    text-align: center !important;
    padding: 6px 10px !important;
    font-family: var(--primary) !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.05em !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    margin: 0 !important;
    border: none !important;
    line-height: 1.4 !important;
    z-index: 101 !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  .announcement-banner a {
    color: #FFFFFF !important;
    text-decoration: none !important;
    display: inline !important;
  }

  .announcement-banner:hover {
    background: #ECE5D4 !important;
    color: #2A2622 !important;
  }

  .announcement-banner:hover a {
    color: #2A2622 !important;
  }

  /* Generic text elements */
  p {
    font-size: 0.6rem !important;
  }

  a {
    font-size: 0.6rem !important;
  }

  span {
    font-size: 0.6rem !important;
  }

  /* Button text */
  .btn {
    font-size: 0.65rem;
  }

  /* Meta text */
  .meta {
    font-size: 0.65rem;
  }

  .eyebrow {
    font-size: 0.65rem;
  }

  /* Section headers */
  .section-header h2 {
    font-size: 0.65rem;
  }

  .see-more {
    font-size: 0.65rem;
  }

  /* Newsletter form */
  .newsletter-form input {
    font-size: 0.65rem;
  }

  .newsletter-form button {
    font-size: 0.65rem;
  }

  /* Mobile navigation */
  .mobile-nav a, .mobile-nav .nav-item {
    font-size: 0.65rem !important;
    padding: 10px 0 !important;
  }

  .mobile-nav .dropdown a {
    font-size: 0.65rem !important;
    padding: 8px 0 8px 15px !important;
  }

  /* Hamburger menu */
  .hamburger-menu {
    width: auto !important;
    height: auto !important;
  }

  .hamburger-menu span {
    width: 18px !important;
    height: 1.2px !important;
  }

  /* Header icons size */
  .header-icons a {
    font-size: 0.65rem !important;
  }

  .header-icons svg {
    width: 12px !important;
    height: 12px !important;
  }

  /* Ethos section */
  section[style*="background: #1A3A52"] p {
    font-size: 0.6rem !important;
  }

  /* Judi's bio section */
  .judi-bio p {
    font-size: 0.6rem !important;
  }

  /* Collaborative process */
  .process-item p {
    font-size: 0.6rem !important;
  }

  /* CTA section */
  .cta-section p {
    font-size: 0.6rem !important;
  }

  .cta-section .btn {
    font-size: 0.6rem !important;
  }
}

/* =========================================================
   ICONICA MOBILE PRODUCTION OVERRIDES
   375px-first responsive baseline
   ========================================================= */
@media (max-width: 768px) {
  :root {
    --mobile-text: 11px;
    --mobile-small: 10px;
    --mobile-body: 12px;
    --mobile-heading: 13px;
    --mobile-wide-heading: 14px;
  }

  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    font-size: var(--mobile-body) !important;
    line-height: 1.55 !important;
    letter-spacing: 0.03em;
  }

  /* --- Announcement: fixed, single-line, predictable height --- */
  .announcement-banner {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    padding: 0 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    line-height: 24px !important;
    font-size: 9px !important;
    letter-spacing: 0.025em !important;
    z-index: 1001 !important;
  }

  .announcement-banner a {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    line-height: 24px !important;
    font-size: 9px !important;
  }

  /* --- Header: always below the 24px banner --- */
  header,
  header:not(.scrolled) {
    position: fixed !important;
    top: 24px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    padding: 4px 20px !important;
    box-sizing: border-box !important;
    z-index: 1000 !important;
  }

  header .inner {
    width: 100% !important;
    height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
  }

  header .logo {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
  }

  header .logo img,
  .logo img {
    width: auto !important;
    height: 38px !important;
    max-height: 38px !important;
    display: block !important;
  }

  header nav {
    display: none !important;
  }

  .header-icons {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 9px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .header-icons a {
    width: 18px !important;
    height: 18px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
  }

  .header-icons svg {
    width: 14px !important;
    height: 14px !important;
  }

  .hamburger-menu {
    width: 20px !important;
    height: 18px !important;
    padding: 0 !important;
    margin: 0 0 0 1px !important;
    gap: 4px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
  }

  .hamburger-menu span {
    width: 20px !important;
    height: 1px !important;
    min-height: 1px !important;
  }

  /* --- Consistent mobile type scale --- */
  h1 { font-size: var(--mobile-wide-heading) !important; line-height: 1.3 !important; }
  h2 { font-size: var(--mobile-heading) !important; line-height: 1.35 !important; }
  h3 { font-size: var(--mobile-heading) !important; line-height: 1.4 !important; }
  h4, h5, h6 { font-size: var(--mobile-text) !important; line-height: 1.45 !important; }

  p {
    font-size: var(--mobile-body) !important;
    line-height: 1.6 !important;
  }

  a {
    font-size: var(--mobile-text) !important;
    line-height: 1.45 !important;
  }

  span {
    font-size: inherit;
  }

  .eyebrow,
  .meta,
  .section-header h2,
  .see-more,
  .slideshow-title,
  .slideshow-cta,
  .hero-center-link a {
    font-size: var(--mobile-small) !important;
    line-height: 1.45 !important;
  }

  .hero-tagline,
  .project-location,
  .service-list li,
  .process-item p,
  .process-item h3 {
    font-size: var(--mobile-text) !important;
    line-height: 1.5 !important;
  }

  .btn,
  button,
  input,
  textarea,
  select {
    font-size: var(--mobile-text) !important;
  }

  /* Preserve readable form controls and labels. */
  label {
    font-size: var(--mobile-text) !important;
    line-height: 1.45 !important;
  }

  /* --- Footer: centered brand/location on mobile --- */
  footer {
    padding: 26px 20px 12px !important;
  }

  footer .container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    text-align: left !important;
  }

  footer .container > .reveal {
    margin-bottom: 24px !important;
  }

  footer .container > .reveal:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    margin-bottom: 28px !important;
  }

  footer .reveal:first-child .footer-logo,
  footer .footer-logo {
    display: block !important;
    width: auto !important;
    margin: 0 auto 10px !important;
    padding: 0 !important;
    text-align: center !important;
    border: 0 !important;
  }

  footer .reveal:first-child .footer-logo img,
  footer .footer-logo img {
    width: 150px !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
  }

  footer .reveal:first-child p {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: var(--mobile-text) !important;
    line-height: 1.45 !important;
  }

  footer h3 {
    font-size: var(--mobile-text) !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
  }

  footer p,
  footer a,
  footer ul li a,
  footer .reveal a,
  .newsletter-content p {
    font-size: var(--mobile-text) !important;
    line-height: 1.5 !important;
  }

  footer ul {
    margin: 0 !important;
  }

  footer .social-icons {
    gap: 14px !important;
    margin-top: 10px !important;
  }

  footer .social-icons a {
    font-size: 0 !important;
  }

  footer .social-icons svg {
    width: 18px !important;
    height: 18px !important;
  }

  footer > .container:last-child {
    margin-top: 10px !important;
    padding-top: 8px !important;
  }

  footer > .container:last-child p {
    text-align: center !important;
    font-size: 9px !important;
  }

  /* Keep mobile page content below the fixed navigation where needed. */
  .mobile-nav {
    z-index: 1100 !important;
  }
}


/* Homepage hero link centering fix — keep the reveal animation without losing the true center position. */
@media (max-width: 768px) {
  .hero-center-link.reveal {
    left: 50% !important;
    transform: translate(-50%, calc(-50% + 20px)) !important;
  }

  .hero-center-link.reveal.in {
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  .hero-center-link a {
    display: inline-block !important;
    text-align: center !important;
  }
}

/* ICONICA HOMEPAGE — MOBILE PROJECT TITLE ALIGNMENT */
@media screen and (max-width: 768px) {
  #welcome .hero-content,
  #about .hero-content,
  #section5 .hero-content {
    position: absolute !important;
    left: 24px !important;
    right: auto !important;
    bottom: 24px !important;
    width: calc(100% - 48px) !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
    transform: none !important;
  }

  #welcome .hero-content *,
  #about .hero-content *,
  #section5 .hero-content * {
    text-align: left !important;
  }
}