/* Shared utility: image placeholder used across all variations. */
.imgslot{
  position: relative;
  background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.04) 0 1px, transparent 1px 10px), linear-gradient(0deg, rgba(0,0,0,0.025), rgba(0,0,0,0.025));
  background-color: var(--slot-bg, #efece5);
  color: var(--slot-fg, #6b6256);
  display:flex; align-items:center; justify-content:center;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  overflow:hidden;
}
.imgslot::before{
  content:""; position:absolute; inset:8px;
  border:1px dashed rgba(0,0,0,0.18);
  pointer-events:none;
}
.imgslot.dark{
  --slot-bg:#1a1d22; --slot-fg:#7c8290;
}
.imgslot.cream{
  --slot-bg:#e8e1d2; --slot-fg:#7a6c50;
}

/* Reset inside artboards */
.ent-root *{ box-sizing:border-box; }
.ent-root{ font-feature-settings:"palt"; }

/* ──────────────────────────────────────────────────────────
   Responsive overrides — tablet & mobile
   Inline styles drive desktop layout; these media queries
   collapse multi-column grids and shrink type for smaller
   viewports. !important is used because inline styles win.
   ────────────────────────────────────────────────────────── */

/* Mobile nav (hamburger) is hidden on desktop */
.ent-nav-mobile { display: none; }

/* Hide the desktop utility bar text on very small screens */
@media (max-width: 900px) {
  .ent-utility { font-size: 9px !important; padding: 6px 14px !important; }
  .ent-utility-tagline { display: none !important; }
}

/* ── TABLET (≤ 1100px) ── */
@media (max-width: 1100px) {
  /* Hide desktop nav, show hamburger */
  .ent-nav-desktop { display: none !important; }
  .ent-nav-mobile  { display: flex !important; }

  /* Generic horizontal padding for sections */
  .ent-section { padding-left: 24px !important; padding-right: 24px !important; }

  /* Hero stacks vertically; copy is narrower */
  .ent-hero-section { min-height: 580px !important; }
  .ent-hero-grid    { grid-template-columns: 1fr !important; padding: 80px 24px !important; }
  .ent-hero-h1      { font-size: 56px !important; line-height: 1.25 !important; }

  /* Service grid: 3 cols → 2 cols */
  .ent-services-grid { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }

  /* Flow: 6 cols → 3 cols, hide between-card arrows */
  .ent-flow-grid     { grid-template-columns: repeat(3, 1fr) !important; gap: 24px 16px !important; }
  .ent-flow-arrow    { display: none !important; }

  /* Contact: sidebar + form → stack */
  .ent-contact-layout { grid-template-columns: 1fr !important; gap: 24px !important; }
  .ent-contact-form-pad { padding: 32px 28px !important; }

  /* Footer */
  .ent-footer-grid   { grid-template-columns: 1fr 1fr 1fr !important; }
  .ent-footer-brand  { grid-column: 1 / -1 !important; }

  /* About / Message */
  .ent-about-grid    { grid-template-columns: 1fr !important; gap: 24px !important; }
  .ent-message-section { padding: 64px 24px !important; }
  .ent-message-h2    { font-size: 26px !important; line-height: 1.7 !important; }

  /* Sub-page hero title shrinks */
  .ent-subhero-h1    { font-size: 44px !important; }

  /* Section h2 shrinks */
  .ent-section-h2    { font-size: 36px !important; }

  /* Service card body padding */
  .ent-service-card  { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ── MOBILE (≤ 680px) ── */
@media (max-width: 680px) {
  /* Tighter horizontal padding */
  .ent-section { padding-left: 16px !important; padding-right: 16px !important; padding-top: 56px !important; padding-bottom: 56px !important; }

  /* Header */
  .ent-header  { padding: 12px 16px !important; }

  /* Hero */
  .ent-hero-section { min-height: 460px !important; }
  .ent-hero-grid    { padding: 56px 20px 72px !important; }
  .ent-hero-h1      { font-size: 36px !important; line-height: 1.35 !important; }
  .ent-hero-copy    { font-size: 14px !important; line-height: 1.85 !important; }
  .ent-hero-buttons { flex-direction: column !important; gap: 10px !important; align-items: stretch !important; }
  .ent-hero-buttons a { text-align: center !important; padding: 14px 20px !important; font-size: 13px !important; }

  /* Section h2 */
  .ent-section-h2 { font-size: 28px !important; }
  .ent-subhero-h1 { font-size: 32px !important; }

  /* Services 1 col */
  .ent-services-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Flow 2 col */
  .ent-flow-grid { grid-template-columns: 1fr 1fr !important; }
  .ent-flow-card { padding: 32px 16px 24px !important; }

  /* Footer 1 col */
  .ent-footer-grid  { grid-template-columns: 1fr !important; gap: 28px !important; }
  .ent-footer-brand { grid-column: auto !important; }
  .ent-footer-bottom { flex-direction: column !important; gap: 8px !important; align-items: flex-start !important; }

  /* About table → stacked rows */
  .ent-about-table th, .ent-about-table td {
    display: block !important;
    width: 100% !important;
    padding: 6px 0 !important;
  }
  .ent-about-table tr { display: block !important; padding: 18px 0 !important; }

  /* Message page */
  .ent-message-h2 { font-size: 22px !important; }

  /* Contact form */
  .ent-contact-form-pad { padding: 28px 20px !important; }
  .ent-field-grid { grid-template-columns: 1fr !important; gap: 12px !important; padding: 20px 0 !important; }
  .ent-confirm-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
  .ent-name-pair { flex-direction: column !important; gap: 10px !important; }
  .ent-form-buttons { flex-direction: column !important; gap: 10px !important; }
  .ent-form-buttons button { width: 100% !important; }

  /* Sub-page hero crumbs */
  .ent-subhero-h1-row { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
}

/* ──────────────────────────────────────────────────────────
   Polish & micro-interactions (richer feel)
   ────────────────────────────────────────────────────────── */

/* Scroll-triggered reveal — JS adds .is-visible when in viewport */
.ent-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.ent-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.ent-reveal.delay-1 { transition-delay: 0.08s; }
.ent-reveal.delay-2 { transition-delay: 0.16s; }
.ent-reveal.delay-3 { transition-delay: 0.24s; }
.ent-reveal.delay-4 { transition-delay: 0.32s; }
.ent-reveal.delay-5 { transition-delay: 0.4s; }
.ent-reveal.delay-6 { transition-delay: 0.48s; }

/* Service cards: lift + accent border on hover */
.ent-service-card-rich {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.35s ease;
  border-top: 3px solid transparent;
}
.ent-service-card-rich:hover {
  transform: translateY(-6px);
  box-shadow: 0 4px 8px rgba(14,17,23,0.04), 0 24px 50px rgba(14,17,23,0.12) !important;
  border-top-color: #1750C4;
}
.ent-service-card-rich:hover .ent-service-img {
  transform: scale(1.03);
}
.ent-service-img {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Flow cards: gentle lift */
.ent-flow-card {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.ent-flow-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(14,17,23,0.06), 0 18px 40px rgba(14,17,23,0.1) !important;
}

/* Works tiles: zoom image + lift, pause marquee on hover */
.ent-work-tile {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
  overflow: hidden;
}
.ent-work-tile img {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.ent-work-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(14,17,23,0.2);
}
.ent-work-tile:hover img {
  transform: scale(1.06);
}
.ent-marquee-track { will-change: transform; }
.ent-marquee-wrap:hover .ent-marquee-track {
  animation-play-state: paused;
}

/* Section header accent bar — vertical line + number */
.ent-section-eyebrow {
  position: relative;
  padding-left: 18px;
}
.ent-section-eyebrow::before {
  content: "";
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 14px;
  background: #1750C4;
  border-radius: 2px;
}

/* CTA buttons: subtle gradient + arrow slide on hover */
.ent-cta-primary {
  position: relative; overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  background: linear-gradient(135deg, #1750C4 0%, #0d3a96 100%) !important;
  box-shadow: 0 6px 20px rgba(23,80,196,0.25);
}
.ent-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(23,80,196,0.4);
}
.ent-cta-outline {
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.ent-cta-outline:hover {
  background: #0E1117 !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* Stats band */
.ent-stats {
  background: linear-gradient(180deg, #FFFFFF 0%, #F6F6F4 100%);
  border-top: 1px solid #E5E5E1;
  border-bottom: 1px solid #E5E5E1;
}
.ent-stat-item {
  position: relative;
  padding: 36px 24px;
  text-align: center;
}
.ent-stat-item + .ent-stat-item::before {
  content: ""; position: absolute; left: 0; top: 25%; bottom: 25%; width: 1px; background: #E5E5E1;
}
.ent-stat-num {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 800;
  font-size: 52px;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #1750C4 0%, #2a7fe0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.ent-stat-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #6C7382;
  margin-top: 12px;
  text-transform: uppercase;
}
.ent-stat-jp {
  font-size: 13px;
  color: #3B414B;
  margin-top: 6px;
}
@media (max-width: 1100px) {
  .ent-stat-num { font-size: 40px; }
}
@media (max-width: 680px) {
  .ent-stats-grid { grid-template-columns: 1fr 1fr !important; }
  .ent-stat-item + .ent-stat-item::before { display: none; }
  .ent-stat-item:nth-child(2n)::before { display: block; left: 0; top: 25%; bottom: 25%; width: 1px; height: auto; }
  .ent-stat-item:nth-child(n+3)::after { content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px; background: #E5E5E1; }
  .ent-stat-num { font-size: 36px; }
}

/* Body smooth scroll */
html { scroll-behavior: smooth; }

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  .ent-reveal { opacity: 1 !important; transform: none !important; }
  .ent-marquee-track { animation: none !important; }
}