/* ─── MOBILE ─── */

  @media (max-width: 768px) {
    html { scroll-behavior: auto; }
    body::before { position: absolute; }
    nav {
      position: fixed;
      padding: 1.25rem 5vw;
    }
    nav.scrolled {
      border-color: var(--border);
      background: rgba(244,237,224,0.94);
      backdrop-filter: blur(16px);
    }
    .hero,
    .hero.hero-no-sub {
      /* svh tracks the dynamic toolbar; lvh stays stable so headline/CTA don't reflow on scroll */
      min-height: 100svh;
      justify-content: flex-start;
      padding: 6.5rem 5vw 3rem;
      overflow: hidden; /* clip plates at viewport edge */
    }
    @supports (height: 100lvh) {
      .hero,
      .hero.hero-no-sub {
        min-height: 100lvh;
      }
    }
    .hero-inner {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      flex: 1;       /* stretch to fill the hero min-height */
      min-height: 0;
      gap: 0;
    }
    /* Absorb extra column height here so .hero-visual (plate) doesn't grow/shrink with the URL bar */
    .hero-inner::after {
      content: '';
      display: block;
      flex: 1 1 auto;
      min-height: 0;
      order: 99;
      width: 100%;
    }
    .hero-col {
      display: contents;
    }

    /* Visual on TOP — fixed height from content; spare space goes to ::after spacer */
    .hero-visual {
      order: 1;
      width: 100%;
      flex: 0 0 auto;
      min-height: min(200px, 52vw); /* never collapses on short screens */
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0;
    }
    .hero-text {
      order: 2;
      width: 100%;
      padding-top: 1.5rem;
    }
    .hero-actions {
      order: 3;
      margin-top: 1.4rem;
    }

    /* ── 3-plate stack, rescaled for mobile ── */
    .hero-plate-stage {
      perspective: 900px;
      perspective-origin: 48% 36%;
    }
    .hero-plate-scene {
      width: min(320px, 88vw);
      min-height: min(260px, 70vw);
      height: auto;
    }
    /*
     * Translate offsets tuned so secondary/deep peek visibly behind the primary
     * without overflowing the viewport (overflow:hidden clips anything past edge).
     * At 375px viewport: scene=320px, left-offset=27.5px, scene-center=160px.
     *   primary  right edge ≈ 297px in viewport  ✓
     *   secondary right edge ≈ 362px in viewport  ✓
     *   deep right edge ≈ 381px → ~6px soft clip (blurred/transparent, unnoticeable)
     */
    .hero-plate-pose--primary   { transform: translate(-10%, -1%); }
    .hero-plate-pose--secondary { transform: translate(28%, 4%) translateY(6px); }
    .hero-plate-pose--deep      { transform: translate(46%, 8%) translateY(12px); }

    .hero-plate-img--primary {
      width: min(272px, 74vw);
      max-width: 100%;
      filter: drop-shadow(0px 8px 20px rgba(20, 15, 10, 0.12));
    }
    /* Scale secondary/deep larger than desktop so they're legible at mobile size */
    .hero-plate-img--secondary {
      width: min(272px, 74vw);
      filter: blur(1px) drop-shadow(0px 5px 12px rgba(20, 15, 10, 0.08));
      transform: scale(0.72);
      transform-origin: 50% 60%;
    }
    .hero-plate-img--deep {
      width: min(272px, 74vw);
      opacity: 0.5;
      filter: blur(2px);
      transform: scale(0.5);
      transform-origin: 50% 65%;
    }

    /* Typography — 9.5vw ensures "restaurants," (~12 chars) fits in the 90vw container */
    .hero-headline,
    .hero.hero-no-sub .hero-headline {
      font-size: clamp(1.7rem, 9.5vw, 3.5rem);
      line-height: 1.06;
      max-width: 100%;
      letter-spacing: -0.03em;
      overflow-wrap: normal;
      word-break: normal;
    }
    /* Allow lines to extend past clip so long words aren't cut by the reveal animation */
    .hero-line {
      overflow: visible;
      padding-bottom: 0;
    }
    .hero-line-inner {
      width: auto;
      overflow-wrap: normal;
    }
    .hero-grid {
      opacity: 0.22;
      mask-image: none;
    }

    /* Nav */
    .nav-links { display: none; }
    .nav-mobile-right { display: flex; }
    .nav-mobile-cta {
      display: inline-block;
      background: var(--accent);
      color: #fff;
      padding: 0.5rem 1.1rem;
      font-family: 'DM Mono', 'JetBrains Mono', monospace;
      font-size: 0.75rem;
      letter-spacing: 0.04em;
      text-decoration: none;
      border-radius: 2px;
    }

    /* Sections */
    section { padding: 5rem 5vw; }
    .cta-section { padding: 6rem 5vw; }

    /* Services */
    .services-grid { grid-template-columns: 1fr; }
    .service-card-body { padding: 1.75rem 1.75rem 2rem; }
    .service-preview { height: 164px; }

    /* Quote / Contact */
    .quote-head { padding: 1.15rem 1.1rem; }
    .quote-title-wrap h3 { font-size: 1.02rem; }
    .quote-title-wrap p { font-size: 0.82rem; }
    .quote-form {
      padding: 1rem 1.1rem 1.4rem;
      grid-template-columns: 1fr;
      gap: 0.8rem;
    }
    .quote-check-grid { grid-template-columns: 1fr; }

    /* Process */
    .step-row {
      display: block;
      min-height: 0;
    }
    .step-index { display: none; }
    .step-name-col {
      border-right: none;
      border-bottom: 1px solid var(--border);
      min-height: 0;
      padding: 2rem 5vw;
      gap: 2.5rem;
    }
    .step-content { display: block; }
    .step-desc,
    .step-deliverables {
      padding: 2rem 5vw;
      transform: translateY(14px);
    }
    .step-row.in-view .step-desc,
    .step-row.in-view .step-deliverables {
      transform: translateY(0);
    }
    .ghost-num {
      font-size: clamp(4.5rem, 26vw, 7rem);
      right: 0.1rem;
      bottom: -0.1em;
      color: rgba(200,187,160,0.28);
    }
    .step-name-col.bg-toggled { background: var(--surface) !important; }
    .step-name-col.bg-toggled .ghost-num { color: rgba(200,187,160,0.5); }
    .step-name-col { cursor: pointer; }
    .step-name { font-size: clamp(2rem, 12vw, 3rem); }
    .outputs-list { grid-template-columns: 1fr; }
    .outputs-list li:nth-child(even) { border-right: none; }
    .outputs-list li:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
    .outputs-list li:last-child { border-bottom: none; }
    .process-head {
      grid-template-columns: 1fr;
      padding: 4rem 5vw 3rem;
    }
    .head-right { max-width: 100%; }
    .head-stats { max-width: 480px; margin: 0 auto; }

    /* Footer */
    .footer-cells { grid-template-columns: 1fr; }
    .footer-cell {
      border-right: none;
      border-bottom: 1px solid var(--border);
    }
    footer { flex-direction: column; gap: 1.5rem; text-align: center; }

    /* Overlays */
    .overlay-features { grid-template-columns: 1fr; }
    .overlay-content { padding: 2.5rem 1.5rem; }
    .overlay-header { padding: 1.25rem 1.5rem; }
    .overlay-panel { width: 100%; }

    /* Portal — show 3 cursor hints (override portal.css display:none) */
    .portal-cursor-hints { display: block; }
    .portal-dither-pointer:nth-child(n+4) { display: none; }
    .portal-dither-img {
      width: clamp(1.5rem, 4vw, 2rem);
    }
    /* Extra vertical padding gives hands room to wander above/below the text */
    .portal-section {
      padding-top: 4.5rem;
      padding-bottom: 4.5rem;
    }
  }

  /* ─── Tablet portrait (601–768px): bigger plate, balanced spacing ─── */
  @media (min-width: 601px) and (max-width: 768px) {
    .hero,
    .hero.hero-no-sub {
      padding: 7rem 5vw 4rem;
    }
    .hero-visual {
      margin: 0;
    }
    .hero-plate-scene {
      width: min(460px, 60vw);
      min-height: min(340px, 50vw);
    }
    .hero-plate-img--primary {
      width: min(440px, 58vw);
      filter: drop-shadow(0px 22px 50px rgba(20, 15, 10, 0.28));
    }
    .hero-plate-img--secondary {
      width: min(440px, 58vw);
    }
    .hero-plate-img--deep {
      width: min(440px, 58vw);
    }
    .hero-headline,
    .hero.hero-no-sub .hero-headline {
      font-size: clamp(2.5rem, 6.5vw, 3.5rem);
      line-height: 1.04;
    }
  }

  /* ─── Landscape phones: two-column micro-layout, single plate ─── */
  @media (max-width: 900px) and (orientation: landscape) and (max-height: 550px) {
    .hero-inner::after {
      display: none; /* row layout: spacer would become a third flex item */
    }
    .hero,
    .hero.hero-no-sub {
      min-height: 100svh;
      padding: 4.5rem 6vw 1.5rem;
      justify-content: center;
    }
    @supports (height: 100lvh) {
      .hero,
      .hero.hero-no-sub {
        min-height: 100lvh;
      }
    }
    .hero-inner {
      flex-direction: row;
      align-items: center;
      gap: 5vw;
    }
    .hero-col {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      flex: 1 1 0;
      min-width: 0;
    }
    .hero-text  { order: unset; width: 100%; }
    .hero-actions { order: unset; margin-top: 1rem; }
    .hero-visual {
      order: unset;
      flex: 0 0 auto;
      width: min(200px, 34vw);
      display: flex;
      justify-content: center;
      margin: 0;
    }
    /* Single plate in landscape — secondary/deep too crowded */
    .hero-plate-pose--secondary,
    .hero-plate-pose--deep { display: none; }
    .hero-plate-pose--primary { transform: translate(0, 0); }
    .hero-plate-stage { perspective: 700px; }
    .hero-plate-scene { width: min(200px, 34vw); min-height: auto; }
    .hero-plate-img--primary { width: min(200px, 34vw); }
    .hero-headline,
    .hero.hero-no-sub .hero-headline {
      font-size: clamp(1.55rem, 4.2vh, 2.3rem);
      line-height: 1.06;
    }
    .hero-actions { flex-direction: row; }
    .btn-primary, .btn-ghost {
      padding: 0.6rem 1.4rem;
      font-size: 0.78rem;
      width: auto;
    }
  }

  /* ─── Small phones (≤480px) ─── */
  @media (max-width: 480px) {
    nav { padding: 1.25rem 5vw; }
    .hero,
    .hero.hero-no-sub {
      padding: 6rem 5vw 2.5rem;
      justify-content: flex-start;
    }
    .hero-visual { margin: 0; }
    .hero-plate-scene {
      width: min(300px, 86vw);
      min-height: min(220px, 64vw);
    }
    .hero-plate-img--primary { width: min(258px, 72vw); }
    .hero-plate-img--secondary { width: min(258px, 72vw); }
    .hero-plate-img--deep { width: min(258px, 72vw); }
    .hero-headline,
    .hero.hero-no-sub .hero-headline {
      font-size: clamp(1.7rem, 9.5vw, 2.9rem);
      line-height: 1.06;
    }
    .hero-actions,
    .hero.hero-no-sub .hero-actions { margin-top: 1.25rem; }
    .hero-actions { flex-direction: column; }
    .btn-primary, .btn-ghost {
      text-align: center;
      width: 100%;
      box-sizing: border-box;
    }
    .cta-actions { flex-direction: column; align-items: center; }
    .section-label { margin-bottom: 2.5rem; }
    .service-desc { font-size: 1rem; line-height: 1.75; }
    .service-benefit { font-size: 0.9rem; }
    .process-sub { font-size: 1rem; }
    .stat-label { font-size: 0.68rem; }
    .stat-val { font-size: 1rem; }
  }

  /* ─── Very small phones (iPhone SE, 320px devices) ─── */
  @media (max-width: 380px) {
    .hero,
    .hero.hero-no-sub { padding: 5.75rem 4.5vw 2rem; }
    .hero-visual { margin: 0; }
    .hero-plate-scene {
      width: min(280px, 88vw);
      min-height: min(210px, 66vw);
    }
    .hero-plate-img--primary { width: min(236px, 74vw); }
    .hero-plate-img--secondary { width: min(236px, 74vw); }
    .hero-plate-img--deep { width: min(236px, 74vw); }
    .hero-headline,
    .hero.hero-no-sub .hero-headline {
      font-size: clamp(1.55rem, 9.5vw, 2.4rem);
      line-height: 1.06;
      letter-spacing: -0.03em;
    }
    .hero-actions { margin-top: 1rem; }
    .btn-primary, .btn-ghost {
      padding: 0.75rem 1.5rem;
      font-size: 0.8rem;
    }
  }

  /* ─── Portrait tablet / iPad Air·Pro (769–1180px portrait) ─── */
  /* Visual stacks on top (mobile style); plate, portal & footer all fixed here.
     Two conditions joined by comma (OR) so the block fires even when DevTools
     doesn't honour the orientation media feature — min-height:900px is a reliable
     portrait proxy since landscape at these widths is always shorter than 900px. */
  @media (min-width: 769px) and (max-width: 1180px) and (orientation: portrait),
         (min-width: 769px) and (max-width: 1180px) and (min-height: 900px) {

    /* ── Hero: switch to stacked flex (visual on top) ── */
    .hero,
    .hero.hero-no-sub {
      min-height: 100svh;
      justify-content: flex-start;
      padding: 6.5rem 5vw 3.5rem; /* tighter than mobile so CTA stays comfortably visible */
      overflow: hidden;
    }
    @supports (height: 100lvh) {
      .hero,
      .hero.hero-no-sub {
        min-height: 100lvh;
      }
    }
    .hero-inner {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      flex: 1;
      min-height: 0;
      gap: 0;
      column-gap: 0; /* reset narrow-desktop gap */
    }
    .hero-col { display: contents; }

    /* Visual on TOP — fixed lvh height (stable) so dynamic toolbar doesn't resize the plate track */
    .hero-visual {
      order: 1;
      grid-column: unset; grid-row: unset;
      justify-self: unset; align-self: unset; z-index: unset;
      width: 100%;
      flex: 0 0 min(55svh, 720px);
      min-height: min(280px, 40vw);
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0;
    }
    @supports (height: 100lvh) {
      .hero-visual {
        flex: 0 0 min(55lvh, 720px);
      }
    }
    .hero-text   { order: 2; width: 100%; padding-top: 1.25rem; }
    .hero-actions { order: 3; margin-top: 1.25rem; }

    /* ── Plate stage: wide enough for stacked layout ── */
    .hero-plate-stage {
      width: min(600px, 68vw);
      perspective: 1000px;
      perspective-origin: 48% 36%;
    }
    .hero-plate-scene {
      width: 100%;
      max-width: min(600px, 68vw);
      min-height: min(50svh, 600px);
      height: min(50svh, 600px);
      align-items: center;
    }
    @supports (height: 100lvh) {
      .hero-plate-scene {
        min-height: min(50lvh, 600px);
        height: min(50lvh, 600px);
      }
    }

    /* Plate poses — same offsets as mobile; secondary/deep peek right,
       clipped at viewport edge by overflow:hidden on the hero */
    .hero-plate-pose--primary   { transform: translate(-10%, -1%); }
    .hero-plate-pose--secondary { transform: translate(28%, 4%) translateY(6px); }
    .hero-plate-pose--deep      { transform: translate(46%, 8%) translateY(12px); }

    .hero-plate-img--primary {
      width: clamp(380px, 58vw, min(560px, 60svh));
      max-width: 100%;
      filter: drop-shadow(0px 18px 36px rgba(20, 15, 10, 0.20));
      transform: translateZ(0);
    }
    .hero-plate-img--secondary {
      width: clamp(360px, 56vw, min(540px, 58svh));
      max-width: 100%;
      filter: blur(1px) drop-shadow(0px 10px 20px rgba(20, 15, 10, 0.12));
      transform: scale(0.70);           /* override desktop scale(0.6) */
      transform-origin: 50% 60%;
    }
    .hero-plate-img--deep {
      width: clamp(360px, 56vw, min(540px, 58svh));
      max-width: 100%;
      opacity: 0.45;
      filter: blur(2px);
      transform: scale(0.48);           /* override desktop scale(0.4) */
      transform-origin: 50% 65%;
    }
    @supports (height: 100lvh) {
      .hero-plate-img--primary {
        width: clamp(380px, 58vw, min(560px, 60lvh));
      }
      .hero-plate-img--secondary {
        width: clamp(360px, 56vw, min(540px, 58lvh));
      }
      .hero-plate-img--deep {
        width: clamp(360px, 56vw, min(540px, 58lvh));
      }
    }

    /* Headline — balanced for wider tablet screens */
    .hero-headline,
    .hero.hero-no-sub .hero-headline {
      font-size: clamp(2.8rem, 6.5vw, 4.5rem);
      line-height: 1.05;
      letter-spacing: -0.03em;
      max-width: 100%;
    }
    .hero-line { overflow: visible; padding-bottom: 0; }
    .hero-line-inner { width: auto; overflow-wrap: normal; }

    /* ── Portal: 3 cursor hints + generous vertical padding so zone-
       exclusion strips exist above & below the text (JS uses isMob()
       constants for this breakpoint, giving TEXT_PAD_MOB=4 / MARGIN_MOB=14
       which keeps zones tight and strips wide). ── */
    .portal-cursor-hints { display: block; }
    .portal-dither-pointer:nth-child(n+4) { display: none; }
    .portal-section {
      padding-top: 7rem;
      padding-bottom: 7rem;
    }

    /* ── Footer: lift above the portal section's z-index:2 stacking context ── */
    footer { position: relative; z-index: 3; }
  }