/*
 * RESPONSIVE SOURCE OF TRUTH — 2026-08-30
 * Final layout layer for kateikyoshi-sogo.com
 * Goals:
 * - no horizontal overflow or clipped text
 * - natural Japanese wrapping without orphaned single characters caused by flex/grid sizing
 * - fluid typography across phone / tablet / desktop
 * - stable hero, comparison banner, cards, forms and footer
 */

:root {
  --ks-page-max: 1200px;
  --ks-gutter-desktop: 28px;
  --ks-gutter-tablet: 24px;
  --ks-gutter-phone: 16px;
  --ks-header-phone: 64px;
  --ks-navy: #0b1f3a;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
#root,
main,
header,
nav,
footer,
section,
article,
aside {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body,
#root,
main { overflow-x: clip !important; }

img,
picture,
video,
canvas,
svg,
iframe {
  display: block;
  max-width: 100% !important;
  height: auto;
}

/* Flex/grid children must be allowed to shrink. */
.flex > *,
.grid > *,
[class*="grid-cols-"] > *,
[class*="flex-"] > *,
.ks-comparison-intro > *,
.ks-direct-contract-layout > *,
.p100-contract__grid > *,
.p100-consult__steps > *,
.p100-choice-grid > *,
.pc-decision__grid > *,
.pc-steps__grid > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Natural Japanese composition. Earlier emergency layers used keep-all;
   this last-loaded layer deliberately cancels that behavior. */
main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
main p,
main li,
main a,
main button,
main label,
main summary,
main span,
main strong,
main small,
main td,
main th,
nav a,
nav span,
footer a,
footer p,
footer li {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  line-break: strict !important;
  hyphens: none !important;
  text-wrap: pretty;
}

main h1,
main h2,
main h3,
main h4 { text-wrap: balance; }

/* Keep genuine controls usable. */
button,
input,
select,
textarea { max-width: 100%; }
input,
select,
textarea { min-width: 0; }

/* Common page containers. */
.container,
.max-w-7xl,
.max-w-6xl,
.max-w-5xl,
.max-w-4xl {
  min-width: 0 !important;
}

/* ---------------- Header ---------------- */
nav.fixed.top-0 {
  width: 100% !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  overflow: visible !important;
  background: rgba(11,31,58,.98) !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 8px 24px rgba(4,16,35,.16) !important;
  backdrop-filter: blur(12px);
}

nav.fixed.top-0 > .container {
  width: 100% !important;
  max-width: var(--ks-page-max) !important;
  margin-inline: auto !important;
  padding-inline: var(--ks-gutter-desktop) !important;
}

nav.fixed.top-0 > .container > div {
  width: 100% !important;
  min-width: 0 !important;
}

nav.fixed.top-0 > .container > div > a {
  min-width: 0 !important;
  overflow: hidden !important;
}

/* ---------------- Hero ---------------- */
main > section:first-child,
.ks-photo-hero {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: clip !important;
}

main > section:first-child > div,
.ks-photo-hero > .container {
  width: 100% !important;
  max-width: var(--ks-page-max) !important;
  min-width: 0 !important;
  margin-inline: auto !important;
}

main > section:first-child h1,
.ks-photo-hero .ks-hero-copy h1 {
  width: 100% !important;
  max-width: 24ch !important;
  font-size: clamp(2rem, 4.1vw, 3.55rem) !important;
  line-height: 1.42 !important;
  letter-spacing: 0 !important;
}

main > section:first-child p,
.ks-photo-hero .ks-hero-copy p,
.ks-photo-hero .ks-hero-secondary {
  max-width: 44rem !important;
  font-size: clamp(.98rem, 1.35vw, 1.14rem) !important;
  line-height: 1.9 !important;
}

main > section:first-child a[href="#contact"] {
  min-width: 0 !important;
  max-width: 100% !important;
  text-align: center !important;
}

/* ---------------- Proof / comparison ---------------- */
.ks-comparison-intro,
.ks-comparison-intro *,
.ks-direct-contract,
.ks-direct-contract *,
#direct-contract,
#direct-contract *,
#ks-direct-contract-proof-v7,
#ks-direct-contract-proof-v7 *,
.p100-contract,
.p100-contract *,
.p100-choice,
.p100-choice *,
.p100-consult,
.p100-consult * {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.ks-comparison-intro {
  width: min(100%, 1000px) !important;
  margin-inline: auto !important;
  display: grid !important;
  grid-template-columns: minmax(190px, .34fr) minmax(0, 1fr) !important;
  gap: clamp(1rem, 2.2vw, 1.5rem) !important;
  align-items: center !important;
  overflow: clip !important;
}

.ks-comparison-intro-badge {
  width: 100% !important;
  padding: .78rem .9rem !important;
  font-size: clamp(.78rem, 1.15vw, .96rem) !important;
  line-height: 1.35 !important;
  letter-spacing: .06em !important;
  text-align: center !important;
}

.ks-comparison-intro p {
  margin: 0 !important;
  font-size: clamp(.9rem, 1.2vw, 1rem) !important;
  line-height: 1.8 !important;
}

.ks-direct-contract-layout {
  display: grid !important;
  grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr) !important;
  gap: clamp(1.5rem, 3vw, 3rem) !important;
}

#ks-direct-contract-proof-v7 .ks-proof-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 12px !important;
}

#ks-direct-contract-proof-v7 .ks-route-grid,
.p100-choice-grid,
.p100-contract__grid,
.p100-consult__steps,
.pc-decision__grid,
.pc-steps__grid {
  display: grid !important;
  gap: clamp(12px, 2vw, 18px) !important;
}

/* ---------------- Forms/tables/footer ---------------- */
form,
form > *,
input,
textarea,
select {
  width: 100%;
  min-width: 0 !important;
  max-width: 100% !important;
}

textarea { resize: vertical; }

table {
  max-width: 100% !important;
  border-collapse: collapse;
}

footer,
footer .container,
footer .grid,
footer .flex {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* ---------------- Tablet / iPad ---------------- */
@media (min-width: 601px) and (max-width: 1024px) {
  nav.fixed.top-0 > .container,
  main > section:first-child > div,
  .ks-photo-hero > .container,
  .container,
  .max-w-7xl {
    padding-left: var(--ks-gutter-tablet) !important;
    padding-right: var(--ks-gutter-tablet) !important;
  }

  main h1 { font-size: clamp(2rem, 5.2vw, 3rem) !important; }
  main h2 { font-size: clamp(1.65rem, 4vw, 2.35rem) !important; line-height: 1.5 !important; }
  main h3 { font-size: clamp(1.12rem, 2.7vw, 1.5rem) !important; line-height: 1.55 !important; }
  main p, main li { font-size: clamp(.94rem, 1.9vw, 1.04rem) !important; line-height: 1.85 !important; }

  .ks-comparison-intro {
    grid-template-columns: minmax(160px, .32fr) minmax(0,1fr) !important;
    gap: 1rem !important;
    padding: 1rem !important;
  }

  .ks-comparison-intro-badge {
    font-size: clamp(.74rem, 1.55vw, .9rem) !important;
    letter-spacing: .045em !important;
  }

  .ks-direct-contract-layout { grid-template-columns: minmax(0,1fr) !important; }

  #ks-direct-contract-proof-v7 .ks-proof-grid,
  #ks-direct-contract-proof-v7 .ks-route-grid,
  .p100-choice-grid,
  .p100-contract__grid,
  .p100-consult__steps,
  .pc-decision__grid,
  .pc-steps__grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  /* Large desktop navigation is allowed, but never at the cost of clipping on iPad. */
  nav.fixed.top-0 > div:nth-child(2) {
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  nav.fixed.top-0 > div:nth-child(2)::-webkit-scrollbar { display:none; }
}

/* ---------------- Phone ---------------- */
@media (max-width: 600px) {
  :root { --ks-header-phone: 60px; }

  body { overflow-x: hidden !important; }
  main {
    padding-top: var(--ks-header-phone) !important;
    padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
  }

  main > section { scroll-margin-top: calc(var(--ks-header-phone) + 8px); }

  .container,
  .max-w-7xl,
  .max-w-6xl,
  .max-w-5xl,
  .max-w-4xl,
  main > section:first-child > div,
  .ks-photo-hero > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: var(--ks-gutter-phone) !important;
    padding-right: var(--ks-gutter-phone) !important;
  }

  main h1,
  main > section:first-child h1,
  .ks-photo-hero .ks-hero-copy h1 {
    max-width: 100% !important;
    font-size: clamp(1.72rem, 7.4vw, 2.08rem) !important;
    line-height: 1.48 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
  }

  main h2 {
    font-size: clamp(1.42rem, 6vw, 1.78rem) !important;
    line-height: 1.52 !important;
    letter-spacing: 0 !important;
  }

  main h3 {
    font-size: clamp(1.04rem, 4.7vw, 1.25rem) !important;
    line-height: 1.58 !important;
  }

  main p,
  main li {
    font-size: clamp(.92rem, 3.9vw, 1rem) !important;
    line-height: 1.82 !important;
  }

  /* Header: one clean row. Secondary desktop nav is hidden. */
  nav.fixed.top-0 > div:nth-child(2) { display: none !important; }

  nav.fixed.top-0 > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 12px !important;
  }

  nav.fixed.top-0 > .container > div {
    min-height: var(--ks-header-phone) !important;
    padding: 6px 0 !important;
    gap: 7px !important;
    display: flex !important;
    align-items: center !important;
  }

  nav.fixed.top-0 > .container > div > a {
    flex: 1 1 auto !important;
    max-width: calc(100% - 48px) !important;
    gap: 6px !important;
  }

  nav.fixed.top-0 > .container > div > a > div:first-child { display: none !important; }
  nav.fixed.top-0 > .container > div > a > div:nth-child(2) { min-width: 0 !important; overflow: hidden !important; }

  nav.fixed.top-0 > .container > div > a > div:nth-child(2) span:first-child {
    display: block !important;
    font-size: clamp(12px, 3.55vw, 15px) !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  nav.fixed.top-0 > .container > div > a > div:nth-child(2) span:last-child {
    display: block !important;
    margin-top: 2px !important;
    font-size: clamp(8px, 2.3vw, 10px) !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  nav.fixed.top-0 .btn-cta {
    flex: 0 0 auto !important;
    min-height: 40px !important;
    max-width: 108px !important;
    padding: 7px 9px !important;
    font-size: clamp(10px, 2.75vw, 12px) !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
  }

  nav.fixed.top-0 button {
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 8px !important;
  }

  /* Hero: vertical flow. Copy first so parent immediately understands the offer. */
  main > section:first-child > div { padding-top: 28px !important; padding-bottom: 38px !important; }
  main > section:first-child > div > div {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 22px !important;
  }

  main > section:first-child > div > div > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  main > section:first-child img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    border-radius: 16px !important;
  }

  main > section:first-child p,
  .ks-photo-hero .ks-hero-copy p,
  .ks-photo-hero .ks-hero-secondary {
    max-width: 100% !important;
    font-size: clamp(.93rem, 4vw, 1rem) !important;
    line-height: 1.82 !important;
  }

  /* Hero stats use a stable 2x2 grid on normal phones. */
  main > section:first-child .grid.grid-cols-1.sm\:grid-cols-2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
  }

  main > section:first-child .grid.grid-cols-1.sm\:grid-cols-2 > div {
    min-height: 104px !important;
    padding: 13px 8px !important;
    overflow: hidden !important;
  }

  main > section:first-child .grid.grid-cols-1.sm\:grid-cols-2 > div .text-3xl,
  main > section:first-child .grid.grid-cols-1.sm\:grid-cols-2 > div .text-4xl {
    font-size: clamp(1.28rem, 6vw, 1.7rem) !important;
    line-height: 1.15 !important;
  }

  main > section:first-child a[href="#contact"] {
    display: flex !important;
    width: 100% !important;
    min-height: 50px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 14px !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  main > section:first-child > div > div:last-child > div:last-child {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 10px !important;
  }

  /* Comparison intro is always stacked on phones; this removes the
     CONTRACT COMPARISON squeeze and arrow/text collisions. */
  .ks-comparison-intro {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: .72rem !important;
    margin-inline: 0 !important;
    padding: .95rem !important;
    overflow: visible !important;
  }

  .ks-comparison-intro-badge {
    width: 100% !important;
    padding: .7rem .65rem !important;
    font-size: .78rem !important;
    line-height: 1.4 !important;
    letter-spacing: .04em !important;
  }

  .ks-comparison-intro p {
    width: 100% !important;
    font-size: .91rem !important;
    line-height: 1.78 !important;
    text-align: left !important;
    overflow: visible !important;
  }

  .ks-direct-contract-layout,
  #ks-direct-contract-proof-v7 .ks-proof-grid,
  #ks-direct-contract-proof-v7 .ks-route-grid,
  .p100-choice-grid,
  .p100-contract__grid,
  .p100-consult__steps,
  .pc-decision__grid,
  .pc-steps__grid {
    grid-template-columns: minmax(0,1fr) !important;
  }

  /* Preserve two-column proof numbers only when there is enough room. */
  .pc-proofbar {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    padding-left: var(--ks-gutter-phone) !important;
    padding-right: var(--ks-gutter-phone) !important;
  }

  .pc-proofbar__item,
  .p100-choice,
  .p100-contract__grid > div,
  .p100-consult__steps > div,
  #ks-direct-contract-proof-v7 .ks-route-card,
  #ks-direct-contract-proof-v7 .ks-proof-item {
    overflow: visible !important;
  }

  /* Fixed mobile CTA: one predictable safe-area aware bar. */
  .p100-sticky,
  .pc-mobile-cta {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    max-width: calc(100vw - 20px) !important;
  }

  .p100-sticky a,
  .pc-mobile-cta a {
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  /* Tables must scroll rather than stretch the whole page. */
  main table {
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
  }
  main table:where(:not([class])) { font-size: .84rem; }
  main :has(> table) {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  footer { padding-bottom: calc(94px + env(safe-area-inset-bottom)) !important; }
}

/* Very narrow phones (iPhone mini class / 320–359px). */
@media (max-width: 359px) {
  :root { --ks-gutter-phone: 13px; }

  main h1,
  main > section:first-child h1,
  .ks-photo-hero .ks-hero-copy h1 {
    font-size: clamp(1.58rem, 7.8vw, 1.82rem) !important;
  }

  nav.fixed.top-0 > .container { padding-inline: 9px !important; }
  nav.fixed.top-0 > .container > div { gap: 5px !important; }
  nav.fixed.top-0 > .container > div > a > div:nth-child(2) span:first-child { font-size: 11.5px !important; }
  nav.fixed.top-0 .btn-cta { max-width: 96px !important; padding-inline: 7px !important; font-size: 9.5px !important; }
  nav.fixed.top-0 button { flex-basis: 38px !important; width: 38px !important; min-width: 38px !important; height: 38px !important; }

  main > section:first-child .grid.grid-cols-1.sm\:grid-cols-2 { grid-template-columns: minmax(0,1fr) !important; }
  .pc-proofbar { grid-template-columns: minmax(0,1fr) !important; }
}

/* Desktop rhythm and readable line length. */
@media (min-width: 1025px) {
  main p, main li { line-height: 1.9; }
  .p100-choice-grid { grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
  .p100-contract__grid, .p100-consult__steps, .pc-decision__grid, .pc-steps__grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}