/* Fukushiki — phone layout + nav + motion */

@media (max-width: 1100px) {
  .fk-areas--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  html, body.fk-body { overflow-x: hidden; max-width: 100%; }
  body.fk-body { font-size: 16px; }

  .fk-nav {
    z-index: 120;
    animation: fkNavIn 0.55s var(--fk-ease) both;
  }
  body.fk-body.is-nav-open .fk-nav {
    background: var(--fk-foam);
    color: var(--fk-pine);
    box-shadow: 0 10px 40px rgba(18, 60, 52, 0.08);
  }
  .fk-nav__links,
  .fk-nav .fk-btn--nav { display: none !important; }

  .fk-nav__inner { gap: 0.5rem; padding-left: 0.9rem; padding-right: 0.9rem; }
  .fk-nav__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 52vw;
  }
  .fk-burger {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-left: auto;
    position: relative;
    z-index: 122;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(255, 253, 248, 0.14);
    -webkit-tap-highlight-color: transparent;
    transition: background 0.25s, transform 0.2s var(--fk-ease);
  }
  .fk-nav.is-solid .fk-burger,
  body.fk-body.is-nav-open .fk-burger { background: rgba(18, 60, 52, 0.08); }
  .fk-burger:active { transform: scale(0.92); }
  .fk-burger i { margin: 0; width: 18px; }

  .fk-drawer-backdrop {
    z-index: 110;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .fk-drawer-backdrop[hidden] {
    display: block !important;
    pointer-events: none;
  }
  .fk-drawer {
    z-index: 115;
    width: min(86vw, 380px);
    max-width: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-left: max(1.2rem, env(safe-area-inset-left));
    padding-right: max(1.2rem, env(safe-area-inset-right));
    padding-bottom: max(1.6rem, env(safe-area-inset-bottom));
  }
  .fk-drawer[hidden] {
    display: flex !important;
    pointer-events: none;
  }
  .fk-drawer.is-open { pointer-events: auto; }
  .fk-drawer__brand,
  .fk-drawer__tag {
    opacity: 0;
    transform: translateY(10px);
  }
  .fk-drawer.is-open .fk-drawer__brand,
  .fk-drawer.is-open .fk-drawer__tag {
    animation: fk-stagger 0.5s var(--fk-ease) forwards;
  }
  .fk-drawer.is-open .fk-drawer__tag { animation-delay: 0.06s; }
  .fk-drawer a {
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  .fk-drawer__cta {
    margin-top: 0.6rem;
    justify-content: center;
    background: var(--fk-citrus);
    border: 0;
    border-radius: 999px;
    padding: 0.85rem 1rem;
    animation: none;
  }
  .fk-drawer.is-open .fk-drawer__cta {
    animation: fk-stagger 0.5s var(--fk-ease) forwards;
    animation-delay: 0.28s;
  }

  .fk-hero {
    min-height: 100svh;
    min-height: 100dvh;
  }
  .fk-hero__copy {
    width: 100%;
    max-width: none;
    padding: calc(var(--fk-nav-h) + 1.2rem) 1.15rem max(5.2rem, env(safe-area-inset-bottom));
  }
  .fk-hero__brand { font-size: clamp(2.2rem, 12vw, 3.4rem); line-height: 1.05; word-break: break-word; }
  .fk-hero__brand .fk-char { animation-duration: 0.7s; }
  .fk-hero__lead { font-size: 0.98rem; max-width: none; }
  .js .fk-hero [data-fk] { opacity: 1; transform: none; }
  .fk-hero__kicker { animation: fkMobRise 0.7s var(--fk-ease) both; }
  .fk-hero__copy h1 { animation: fkMobRise 0.7s var(--fk-ease) 0.12s both; }
  .fk-hero__lead { animation: fkMobRise 0.7s var(--fk-ease) 0.2s both; }
  .fk-hero .fk-actions { animation: fkMobRise 0.7s var(--fk-ease) 0.28s both; }
  .fk-hero__scroll { right: 1rem; bottom: max(1rem, env(safe-area-inset-bottom)); }
  .fk-pagehero { min-height: 62svh; }
  .fk-pagehero__copy { padding: calc(var(--fk-nav-h) + 1.4rem) 1.15rem 2.2rem; }

  .fk-wrap,
  .fk-wrap--wide { width: calc(100% - 1.6rem); }
  .fk-split,
  .fk-split--invert,
  .fk-featured,
  .fk-compare,
  .fk-ba,
  .fk-voices,
  .fk-team,
  .fk-tiles,
  .fk-steps,
  .fk-stats,
  .fk-cards--3,
  .fk-cards--4,
  .fk-pricegrid--3,
  .fk-areas--4,
  .fk-timeline,
  .fk-mosaic,
  .fk-bento,
  .fk-foot__grid {
    grid-template-columns: 1fr;
    direction: ltr;
  }

  .fk-bento {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: auto;
    gap: 0.75rem;
  }
  .fk-bento__cell:nth-child(n) {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 240px;
    aspect-ratio: 16 / 10;
  }
  .fk-bento__cell:nth-child(1) { min-height: 280px; aspect-ratio: 4 / 3; }
  .fk-bento__cell .fk-media { min-height: 100%; height: 100%; }
  .fk-bento__cell figcaption { padding: 0.9rem 1rem 1rem; }

  .fk-film { grid-auto-columns: minmax(78vw, 1fr); }
  .fk-tile { min-height: 280px; }
  .fk-tile__body { min-height: 280px; }
  .fk-media--wide { aspect-ratio: 16 / 10; min-height: 200px; }
  .fk-media--portrait { min-height: 280px; aspect-ratio: 4 / 5; }
  .fk-map { min-height: 280px; aspect-ratio: 4 / 3; }
  .fk-foot__bar { flex-direction: column; gap: 0.4rem; }
  .fk-wordmark { font-size: 2.6rem; right: 0.6rem; opacity: 0.08; }
  .fk-polaroid--tilt,
  .fk-polaroid--tilt-rev { transform: none; }
  .fk-polaroid { max-width: 100%; }
  .fk-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .fk-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .fk-actions .fk-btn,
  .fk-finale .fk-btn,
  form .fk-btn,
  .fk-btn {
    width: 100%;
    min-height: 48px;
  }
  .fk-btn:active { transform: scale(0.97); }
  .fk-btn--bounce { animation: fk-bounce 2s ease-in-out infinite; }
  .fk-btn--bounce:active { animation: none; transform: scale(0.97); }

  .fk-media,
  .fk-card__media,
  .fk-step__media,
  .fk-tile__media,
  .fk-hero__media,
  .fk-pagehero__media,
  .fk-finale__bg {
    overflow: hidden;
  }
  .fk-media img,
  .fk-hero__media img,
  .fk-pagehero__media img,
  .fk-finale__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .fk-hero__ken img { animation: fk-ken 18s ease-in-out infinite alternate; }

  .js [data-fk-reveal] img,
  .js [data-fk] img {
    transform: scale(1.08);
    transition: transform 1.05s var(--fk-ease);
  }
  .js [data-fk-reveal].in img,
  .js [data-fk].in img { transform: scale(1); }
}

@media (max-width: 480px) {
  :root { --fk-nav-h: 4.15rem; }
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.4rem; }
  .fk-section { padding: 3.2rem 0; }
  .fk-wrap,
  .fk-wrap--wide { width: calc(100% - 1.3rem); }
  .fk-hero__copy,
  .fk-pagehero__copy { padding-left: 1rem; padding-right: 1rem; }
  .fk-card__body,
  .fk-voice,
  .fk-price { padding-left: 0.9rem; padding-right: 0.9rem; }
  .fk-orbs i:nth-child(5),
  .fk-orbs i:nth-child(1) { display: none; }
  .fk-finale { min-height: 64svh; }
  .fk-nav__brand { font-size: 1.05rem; }
}

@media (min-width: 769px) {
  .fk-burger,
  .fk-drawer,
  .fk-drawer-backdrop { display: none !important; }
}

@keyframes fkNavIn {
  from { transform: translateY(-110%); }
  to { transform: none; }
}
@keyframes fkMobRise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-fk],
  .js [data-fk-reveal],
  .fk-hero__brand .fk-char,
  .fk-hero__kicker,
  .fk-hero__copy h1,
  .fk-hero__lead,
  .fk-hero .fk-actions,
  .fk-orbs i,
  .fk-hero__ken img,
  .fk-hero__rays,
  .fk-marquee__track,
  .fk-btn--bounce,
  .fk-hero__scroll span::after,
  .fk-drawer a,
  .fk-drawer__brand,
  .fk-drawer__tag,
  .fk-nav,
  .js [data-fk] img,
  .js [data-fk-reveal] img {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}