/* ============================================================
   Section-Specific & Responsive Styles
   ============================================================ */

/* ---------- Tablet (769px-1024px) ---------- */
@media (max-width: 1024px) {
  h1 {
    font-size: clamp(30px, min(8vw, 11vh), 52px);
    font-size: clamp(30px, min(8vw, 11svh), 52px);
  }

  h2 {
    font-size: clamp(28px, 6vw, 44px);
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  .timeline {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  .why-media {
    grid-template-columns: 1fr;
  }

  .media-image-accent {
    transform: translateY(0);
  }
}

/* ---------- Mobile (390px-768px) ---------- */
@media (max-width: 768px) {
  h1 {
    font-size: clamp(30px, 9vw, 48px);
    line-height: 1.08;
  }

  h2 {
    font-size: clamp(26px, 7.2vw, 36px);
  }

  h3 {
    font-size: clamp(16px, 4vw, 21px);
  }

  p {
    font-size: 16px;
  }

  .container {
    padding: 0 22px;
  }

  .eyebrow {
    font-size: 12px;
    margin-bottom: 10px;
  }

  .section-lead {
    font-size: 16px;
    line-height: 1.5;
  }

  .hero {
    padding-top: calc(var(--nav-h) + clamp(24px, 5vh, 40px));
    padding-top: calc(var(--nav-h) + clamp(24px, 5svh, 40px));
  }

  .hero-eyebrow {
    font-size: 12px;
    margin-bottom: 12px;
  }

  .hero-ctas {
    flex-direction: column;
    gap: 12px;
  }

  .hero-ctas .btn {
    width: 100%;
  }

  .hero-badges {
    gap: 6px;
  }

  .badge {
    font-size: 11px;
    padding: 6px 12px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 32px 0;
  }

  .stat-num,
  .stat-plus,
  .stat-text {
    font-size: 20px;
  }

  .stat-label {
    font-size: 12px;
    margin-top: 6px;
  }

  .pillar {
    padding: 28px 20px;
  }

  .pillar-head h3 {
    font-size: 16px;
  }

  .check-list {
    font-size: 14px;
    gap: 10px;
  }

  .tile {
    padding: 24px 20px;
  }

  .tile h3 {
    font-size: 16px;
    margin-bottom: 10px;
  }

  .tile p {
    font-size: 14px;
  }

  .card {
    background: transparent;
    padding: 0;
  }

  .card h3 {
    font-size: 16px;
    margin-bottom: 10px;
  }

  .card p {
    font-size: 14px;
  }

  .showcase-card {
    margin-bottom: 16px;
  }

  .showcase-art {
    aspect-ratio: 16 / 9;
  }

  .showcase-card figcaption {
    padding: 20px 16px;
  }

  .showcase-card h3 {
    font-size: 16px;
    margin-bottom: 6px;
  }

  .showcase-card p {
    font-size: 14px;
  }

  .deliv-card {
    padding: 24px 20px;
  }

  .deliv-card h3 {
    font-size: 16px;
    margin-bottom: 16px;
  }

  .tool-group h3 {
    font-size: 14px;
    margin-bottom: 12px;
  }

  .chips {
    gap: 6px;
  }

  .chip-tag {
    font-size: 13px;
    padding: 6px 10px;
  }

  .timeline {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 32px;
  }

  .step-num {
    font-size: 24px;
    margin-bottom: 10px;
  }

  .timeline h3 {
    font-size: 16px;
    margin-bottom: 10px;
  }

  .timeline p {
    font-size: 14px;
  }

  .contact-info h2 {
    margin-bottom: 16px;
  }

  .contact-list {
    margin-top: 24px;
  }

  .contact-list li {
    font-size: 14px;
    margin-bottom: 12px;
  }

  .contact-form {
    padding: 24px;
  }

  .field {
    margin-bottom: 16px;
  }

  label {
    font-size: 14px;
    margin-bottom: 6px;
  }

  input,
  textarea,
  select {
    font-size: 16px;
    padding: 10px 12px;
  }

  .btn {
    font-size: 14px;
    padding: 10px 18px;
  }

  .footer {
    padding: 40px 0 0;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-bottom: 24px;
  }

  .footer-blurb {
    font-size: 13px;
  }

  .footer-links h3 {
    font-size: 13px;
  }

  .footer-links a {
    font-size: 13px;
  }

  .footer-bar {
    padding: 16px 0;
    font-size: 12px;
  }
}

/* ---------- Phones: one column for tiles, cards and chip groups ----------
   (the tablet rule above keeps two columns down to 601px; below that they get too narrow) */
@media (max-width: 600px) {
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* ---------- Small Mobile (< 390px) ---------- */
@media (max-width: 390px) {
  .container {
    width: 100%;
    padding: 0 16px;
  }

  .nav-links {
    padding-inline: 16px;
  }

  .badge {
    font-size: 10px;
    padding: 5px 10px;
  }

  .btn-small {
    padding: 6px 12px;
    font-size: 12px;
  }
}

/* ---------- Specific Section Styling ---------- */

/* Why Section - Two column layout on desktop */
@media (min-width: 1025px) {
  .why-text {
    padding-top: 0;
  }
}

/* Services - three pillars */
@media (min-width: 1025px) {
  .pillars {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1024px) {
  .pillars {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .pillars {
    grid-template-columns: 1fr;
  }
}

/* Industries */
@media (min-width: 1025px) {
  .industries-text {
    padding-top: 0;
  }
}

/* Showcase - Dark background, photo cards */
.section-dark {
  background: var(--bg-dark);
}


/* Deliverables - Two column grid */
@media (min-width: 1025px) {
  .deliverables-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {
  .deliverables-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .deliverables-grid {
    grid-template-columns: 1fr;
  }
}

/* Process - Timeline grid */
@media (min-width: 1025px) {
  .timeline {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1024px) {
  .timeline {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .timeline {
    grid-template-columns: 1fr;
  }
}

/* Contact - Form styling */
@media (min-width: 1025px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }

  .form-row {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

/* ---------- Print Styles ---------- */
@media print {
  .nav,
  .pcb-stage,
  .pcb-slot-wrapper {
    display: none !important;
  }

  body {
    background: white;
  }

  .section {
    page-break-inside: avoid;
  }
}

/* ---------- High DPI Displays ---------- */
@media (min-width: 2560px) {
  .container {
    width: min(1400px, 100% - 44px);
  }

  h1 {
    font-size: 96px;
  }

  h2 {
    font-size: 72px;
  }

  .stats-grid {
    gap: 48px;
  }
}

/* ---------- Touch-friendly Spacing ---------- */
@media (hover: none) and (pointer: coarse) {
  /* Increase touch targets on mobile devices */
  .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  a,
  button {
    min-height: 44px;
  }

  input,
  textarea,
  select {
    min-height: 44px;
  }

  .nav-toggle {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ---------- Light/Dark Mode Support ---------- */
@media (prefers-color-scheme: dark) {
  /* Fallback for systems that support dark mode preference */
  /* But we use data-theme attributes instead */
}

/* ---------- Contrast Mode ---------- */
@media (prefers-contrast: more) {
  .badge {
    border-width: 2px;
  }

  input,
  textarea,
  select {
    border-width: 2px;
  }

  .tile,
  .pillar,
  .deliv-card {
    border-width: 2px;
  }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hero-badges,
  .hero-ctas {
    animation: none;
  }

  .pcb-stage {
    display: none !important;
  }
}

/* ============================================================
   Floating PCB — slot layout & choreography stages
   (the board itself is drawn by js/pcb3d.js on the fixed .pcb-stage;
    these boxes only tell it where to fly)
   ============================================================ */
.pcb-slot {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pcb-slot-wrapper,
.hero-pcb-slot {
  position: relative;
  min-width: 0;
}

/* Section heads: text beside a slot; --flip puts the slot on the left. */
.pcb-head {
  margin-bottom: clamp(40px, 7vh, 72px);
  margin-bottom: clamp(40px, 7svh, 72px);
}
.pcb-head > div > :last-child {
  margin-bottom: 0;
}
.container > .pcb-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 56px;
  align-items: center;
}
.container > .pcb-head--flip {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}
.container > .pcb-head--flip > .pcb-slot-wrapper {
  order: -1;
}
/* The stage is as tall as the heading beside it (no hole under a short heading), with a floor
   so the board stays a good size. The board may spill a little into the space around the row. */
.pcb-head > .pcb-slot-wrapper {
  align-self: stretch;
  min-height: clamp(200px, min(20vw, 34vh), 260px);
  min-height: clamp(200px, min(20vw, 34svh), 260px);
}
.pcb-head > .pcb-slot-wrapper > .pcb-slot {
  inset: -10% 0;
}

/* Hero: headline left, the board large on the right. */
@media (min-width: 1025px) {
  .hero-inner {
    width: min(1200px, 100% - 44px);
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    column-gap: 40px;
    align-items: center;
  }
  .hero-inner > :not(.hero-pcb-slot) {
    grid-column: 1;
  }
  .hero-pcb-slot {
    grid-column: 2;
    grid-row: 1 / span 5;
    align-self: center;
    height: clamp(360px, min(42vw, 100vh - 150px), 620px);
    height: clamp(360px, min(42vw, 100svh - 150px), 620px);
    margin: 0;
  }
  .pcb-slot-wrapper--contact {
    height: clamp(220px, 34vh, 320px);
    height: clamp(220px, 34svh, 320px);
    margin-top: 40px;
  }
}

/* Tablet & phone: single column. Only a few sections keep a stage for the board. */
@media (max-width: 1024px) {
  .container > .pcb-head,
  .container > .pcb-head--flip {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 40px;
  }
  .container > .pcb-head--flip > .pcb-slot-wrapper {
    order: 0;
  }
  .pcb-slot-wrapper {
    display: none;
  }
  .pcb-slot-wrapper--stage,
  .hero-pcb-slot {
    display: block;
    height: clamp(200px, min(62vw, 50vh), 420px);
    height: clamp(200px, min(62vw, 50svh), 420px);
    margin: 16px 0 8px;
  }
  .pcb-head > .pcb-slot-wrapper > .pcb-slot {
    inset: 0;
  }
}

/* Hero still: a render of the hero pose, padded 20% so perspective never clips it.
   Contained in the slot grown by the same 20%, it lands exactly where the live board
   is fitted. It covers the canvas while that fades in, then steps aside; without a
   live board (no JS, reduced motion, no WebGL, failure) it stays as the hero image. */
.pcb-poster {
  position: absolute;
  left: -10%;
  top: -10%;
  width: 120%;
  height: 120%;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.pcb-live .pcb-poster {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease 0.8s, visibility 0s linear 1.2s;
}

/* No live board (reduced motion, no WebGL, failure): collapse the empty stages. */
.pcb-off .pcb-slot-wrapper,
.pcb-failed .pcb-slot-wrapper {
  display: none;
}
.pcb-off .container > .pcb-head,
.pcb-failed .container > .pcb-head {
  grid-template-columns: 1fr;
}

@media (min-width: 1025px) {
  .hero h1 {
    font-size: clamp(40px, min(4.7vw, 8.6vh), 68px);
    font-size: clamp(40px, min(4.7vw, 8.6svh), 68px);
    line-height: 1.04;
  }
}