/* ==========================================================================
   YOLO Group – Custom Block Styles
   Uses CSS custom properties from theme.json where possible.
   --wp--preset--color--paper:   #fdfcfb
   --wp--preset--color--ink:     #1a1a1a
   --wp--preset--color--accent:  #4A90D9
   --wp--preset--color--muted:   #8e8e8e
   --wp--preset--color--dark:    #0e0e0e
   --wp--preset--color--cool-bg: #EEF2F7
   ========================================================================== */

/* ==========================================================================
   General Utilities
   ========================================================================== */
.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.font-display {
  font-family: var(--wp--preset--font-family--display);
}

.font-serif {
  font-family: var(--wp--preset--font-family--serif);
}

/* ==========================================================================
   WordPress Block Theme Overrides
   ========================================================================== */
/* Remove ALL default WP block spacing */
body {
  margin: 0;
  padding: 0;
}

.wp-site-blocks {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Kill the WP-generated 24px margin between all blocks */
.wp-site-blocks > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

:where(.wp-site-blocks) > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* Use class selectors (specificity 0-1-1) to beat WP's :where() (specificity 0-0-1)
   but WITHOUT !important so inline styles on elements can still apply */
.is-layout-flow > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

.is-layout-constrained > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Only reset top-level flex gap, not nested flex containers */
.wp-site-blocks > .is-layout-flex {
  gap: 0;
}

/* Header template part wrapper IS the fixed layer.
   Previously the wrapper was position:absolute and the inner .site-header
   was position:fixed. iOS Safari mis-anchors a fixed element nested inside
   an absolutely-positioned ancestor once backdrop-filter / overflow clipping
   are involved — the header then renders mid-page on iPhone. Fixing the
   OUTERMOST wrapper (a direct child of .wp-site-blocks) and making the inner
   header a normal block avoids the nested-fixed pathology entirely. */
.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > header:first-child {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

/* WP admin bar offset for the fixed wrapper */
.admin-bar .wp-site-blocks > header.wp-block-template-part,
.admin-bar .wp-site-blocks > header:first-child {
  top: 32px;
}

@media screen and (max-width: 782px) {
  /* On mobile WP renders #wpadminbar position:absolute — it scrolls AWAY
     with the page. If we keep the fixed header at top:46px it leaves a
     permanent 46px gap ("ヘッダーが帯の下にズレる") once the bar scrolls out.
     So on mobile the header stays at top:0; the admin bar (z-index 99999)
     simply overlaps it until scrolled. */
  .admin-bar .wp-site-blocks > header.wp-block-template-part,
  .admin-bar .wp-site-blocks > header:first-child {
    top: 0;
  }
}

/* ==========================================================================
   Site Header (inner bar — flows inside the fixed wrapper)
   ========================================================================== */
.site-header {
  position: relative;
  width: 100%;
  z-index: 50;
  background-color: transparent;
  padding-top: 2rem;
  padding-bottom: 2rem;
  transition: background-color 0.4s ease,
              padding 0.4s ease,
              border-color 0.4s ease;
}

.site-header.scrolled {
  background-color: rgba(253, 252, 251, 0.8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(26, 26, 26, 0.06);
}

.site-header .nav-link {
  font-family: var(--wp--preset--font-family--display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* Dark style – used on hero / front-page */
.site-header.dark-style .nav-link {
  color: rgba(255, 255, 255, 0.5);
}

.site-header.dark-style .nav-link:hover {
  color: #ffffff;
}

.site-header.dark-style .nav-contact-link {
  color: #ffffff !important;
  border-color: #ffffff;
}

/* Light / default style */
.site-header:not(.dark-style) .nav-link {
  color: var(--wp--preset--color--muted);
}

.site-header:not(.dark-style) .nav-link:hover {
  color: var(--wp--preset--color--ink);
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--wp--preset--color--dark);
}

/* Ambient glow */
.hero-ambient {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    60vw circle at 70% 30%,
    rgba(74, 144, 217, 0.07) 0%,
    transparent 70%
  );
  pointer-events: none;
}

/* Noise overlay */
.hero-noise {
  position: absolute;
  inset: 0;
  opacity: 0.03;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* Watermark */
.hero-watermark {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 50vw;
  max-width: 600px;
  opacity: 0.06;
  pointer-events: none;
}

/* Marquee strip */
.hero-marquee-strip {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.hero-marquee {
  display: flex;
  align-items: center;
  gap: 2rem;
  white-space: nowrap;
}

.hero-marquee-item {
  font-family: var(--wp--preset--font-family--display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
}

.hero-marquee-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgba(74, 144, 217, 0.3);
  flex-shrink: 0;
}

/* Heading */
.hero-heading {
  font-family: var(--wp--preset--font-family--serif);
  font-size: 4.5rem;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

@media (min-width: 1024px) {
  .hero-heading {
    font-size: var(--wp--preset--font-size--7-xl);
  }
}

.hero-heading .accent-text {
  font-style: italic;
  color: var(--wp--preset--color--accent);
}

.hero-heading .muted-text {
  color: rgba(255, 255, 255, 0.3);
}

/* Tagline */
.hero-tagline {
  font-family: var(--wp--preset--font-family--display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
}

/* Subtitle */
.hero-subtitle {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--wp--preset--font-size--sm);
  max-width: 28rem;
}

/* CTA buttons */
.hero-cta-primary {
  display: inline-block;
  background-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--dark);
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  padding: 1rem 2.5rem;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.hero-cta-primary:hover {
  background-color: #ffffff;
}

.hero-cta-secondary {
  display: inline-block;
  font-family: var(--wp--preset--font-family--display);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 0.25rem;
  transition: color 0.3s ease;
}

.hero-cta-secondary:hover {
  color: #ffffff;
}

/* ==========================================================================
   Concept Section
   ========================================================================== */
.concept-image {
  filter: grayscale(1);
  transition: filter 1s ease;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  object-fit: cover;
}

.concept-image:hover {
  filter: grayscale(0);
}

/* ==========================================================================
   Services Section
   ========================================================================== */
.services-section {
  background-color: var(--wp--preset--color--dark);
  color: #ffffff;
}

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 768px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.service-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 3rem;
  transition: background-color 0.3s ease;
}

.service-card:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.service-number {
  color: var(--wp--preset--color--accent);
  font-family: var(--wp--preset--font-family--display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4em;
}

/* ==========================================================================
   Stats Section
   ========================================================================== */
.stats-section {
  background-color: var(--wp--preset--color--cool-bg);
}

.stat-value {
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--5-xl);
}

.stat-unit {
  color: var(--wp--preset--color--accent);
  font-size: var(--wp--preset--font-size--xs);
}

/* ==========================================================================
   Flow Section
   ========================================================================== */
.flow-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .flow-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .flow-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.flow-card {
  border: 1px solid rgba(26, 26, 26, 0.1);
  padding: 2rem;
  transition: box-shadow 0.3s ease;
}

.flow-card:hover {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

/* ==========================================================================
   CEO Section
   ========================================================================== */
.ceo-portrait {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  filter: grayscale(1);
  transition: filter 1s ease;
}

.ceo-portrait:hover {
  filter: grayscale(0);
}

.ceo-portrait img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   FAQ Section
   ========================================================================== */
details.faq-item {
  border-bottom: 1px solid rgba(26, 26, 26, 0.1);
}

details.faq-item summary {
  list-style: none;
  padding: 2rem 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--wp--preset--font-family--serif);
  font-size: 1.25rem;
}

details.faq-item summary::marker,
details.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-icon {
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

details[open] .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0 0 2rem;
  color: rgba(26, 26, 26, 0.7);
}

/* ==========================================================================
   Contact Section
   ========================================================================== */
.contact-section {
  background-color: var(--wp--preset--color--dark);
  color: #ffffff;
}

.contact-label {
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.5rem;
}

.contact-input {
  display: block;
  width: 100%;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.75rem 0;
  color: #ffffff;
  font-size: var(--wp--preset--font-size--sm);
  transition: border-color 0.3s ease;
}

.contact-input:focus {
  border-bottom-color: var(--wp--preset--color--accent);
  outline: none;
}

.contact-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.contact-select {
  display: block;
  width: 100%;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.75rem 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--wp--preset--font-size--sm);
  transition: border-color 0.3s ease;
}

.contact-select:focus {
  border-bottom-color: var(--wp--preset--color--accent);
  outline: none;
}

.contact-submit {
  display: block;
  width: 100%;
  background-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--dark);
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  padding: 1rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.contact-submit:hover {
  background-color: #ffffff;
}

/* Contact Form 7 overrides for dark background */
.contact-form-cf7 .contact-form-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-form-cf7 .contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 767px) {
  .contact-form-cf7 .contact-form-row {
    grid-template-columns: 1fr;
  }
}

.contact-form-cf7 .contact-form-field {
  margin-bottom: 0;
}

.contact-form-cf7 .wpcf7-form-control-wrap {
  display: block;
}

.contact-form-cf7 input.contact-input,
.contact-form-cf7 textarea.contact-input,
.contact-form-cf7 select.contact-select {
  display: block;
  width: 100%;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.75rem 0;
  color: #ffffff;
  font-size: var(--wp--preset--font-size--sm);
  transition: border-color 0.3s ease;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

.contact-form-cf7 input.contact-input:focus,
.contact-form-cf7 textarea.contact-input:focus,
.contact-form-cf7 select.contact-select:focus {
  border-bottom-color: var(--wp--preset--color--accent);
  outline: none;
}

.contact-form-cf7 input.contact-input::placeholder,
.contact-form-cf7 textarea.contact-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.contact-form-cf7 select.contact-select option {
  background-color: var(--wp--preset--color--dark);
  color: #ffffff;
}

.contact-form-cf7 textarea.contact-input {
  resize: vertical;
  min-height: 100px;
}

.contact-form-cf7 input.contact-submit,
.contact-form-cf7 input[type="submit"] {
  display: block;
  width: 100%;
  background-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--dark);
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  padding: 1rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border-radius: 0;
}

.contact-form-cf7 input.contact-submit:hover,
.contact-form-cf7 input[type="submit"]:hover {
  background-color: #ffffff;
}

/* CF7 validation messages */
.contact-form-cf7 .wpcf7-not-valid-tip {
  color: #e74c3c;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.contact-form-cf7 .wpcf7-response-output {
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  padding: 1rem !important;
  margin: 1.5rem 0 0 !important;
  font-size: var(--wp--preset--font-size--sm);
  color: rgba(255, 255, 255, 0.7);
}

.contact-form-cf7 .wpcf7-mail-sent-ok {
  border-color: var(--wp--preset--color--accent) !important;
  color: var(--wp--preset--color--accent);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background-color: var(--wp--preset--color--dark);
  color: rgba(255, 255, 255, 0.6);
}

.footer-logo {
  height: 2rem;
  width: auto;
}

.footer-link {
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xs);
  transition: color 0.3s ease;
}

.footer-link:hover {
  color: #ffffff;
}

.footer-social-icon {
  color: rgba(255, 255, 255, 0.3);
  font-size: 1.25rem;
  transition: color 0.3s ease;
  text-decoration: none;
}

.footer-social-icon:hover {
  color: var(--wp--preset--color--accent);
}

/* ==========================================================================
   Animations
   ========================================================================== */

/* --- Hero entrance (plays on page load) --- */
.hero-anim {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-anim.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.hero-anim.anim-scale {
  transform: scale(0.95);
}
.hero-anim.anim-scale.is-visible {
  opacity: 0.3;
  transform: scale(1);
}
.hero-anim.anim-scale-x {
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-anim.anim-scale-x.is-visible {
  transform: scaleX(1);
}
.hero-anim.anim-fade {
  transform: none;
}

/* Stagger delays for hero */
.hero-delay-1 { transition-delay: 0.3s; }
.hero-delay-2 { transition-delay: 0.7s; }
.hero-delay-3 { transition-delay: 1.0s; }
.hero-delay-4 { transition-delay: 1.2s; }
.hero-delay-5 { transition-delay: 1.5s; }
.hero-delay-6 { transition-delay: 2.0s; }
.hero-delay-7 { transition-delay: 2.15s; }
.hero-delay-8 { transition-delay: 2.3s; }
.hero-delay-9 { transition-delay: 2.5s; }

/* --- Scroll-triggered animations (whileInView) --- */
[data-anim] {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-anim="fade-up"] {
  transform: translateY(30px);
}
[data-anim="fade-left"] {
  transform: translateX(-30px);
}
[data-anim="fade-right"] {
  transform: translateX(30px);
}
[data-anim="fade"] {
  transform: none;
}
[data-anim].is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* Stagger delays via data attribute */
[data-anim-delay="100"] { transition-delay: 0.1s; }
[data-anim-delay="150"] { transition-delay: 0.15s; }
[data-anim-delay="200"] { transition-delay: 0.2s; }
[data-anim-delay="300"] { transition-delay: 0.3s; }
[data-anim-delay="400"] { transition-delay: 0.4s; }
[data-anim-delay="500"] { transition-delay: 0.5s; }
[data-anim-delay="600"] { transition-delay: 0.6s; }

/* Duration variants */
[data-anim-dur="fast"] {
  transition-duration: 0.5s;
}
[data-anim-dur="slow"] {
  transition-duration: 1s;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-anim,
  [data-anim] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   "Beyond the Screen" Banner
   ========================================================================== */
.beyond-section {
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.beyond-section .bg-image {
  position: absolute;
  inset: 0;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

.beyond-section .overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(14, 14, 14, 0.4);
}

/* Agency section */
.agency-section {
  background-color: var(--wp--preset--color--dark);
  color: #ffffff;
}

.agency-benefits-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .agency-benefits-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.agency-support-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 640px) {
  .agency-support-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .agency-support-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.agency-support-card {
  background-color: var(--wp--preset--color--dark);
  padding: 2rem;
  transition: background-color 0.3s;
}

.agency-support-card:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

.agency-flow-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 768px) {
  .agency-flow-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.agency-flow-card {
  background-color: var(--wp--preset--color--dark);
  padding: 2rem;
}

/* LINE CTA */
.line-cta-box {
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 3rem;
  text-align: center;
}

.line-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background-color: #06C755;
  color: #ffffff;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.15em;
  padding: 1rem 2.5rem;
  text-decoration: none;
  border-radius: 4px;
  transition: opacity 0.3s;
}

.line-cta-button:hover {
  opacity: 0.85;
  color: #ffffff;
}

.line-cta-button img {
  width: 24px;
  height: 24px;
}

/* ==========================================================================
   Blog Content
   ========================================================================== */
.blog-content p {
  line-height: 2;
  margin-bottom: 1.5rem;
  color: rgba(26, 26, 26, 0.8);
}

.blog-content h2 {
  font-family: var(--wp--preset--font-family--serif);
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 3rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(26, 26, 26, 0.1);
}

.blog-content h3 {
  font-family: var(--wp--preset--font-family--serif);
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.blog-content blockquote {
  border-left: 3px solid var(--wp--preset--color--accent);
  padding-left: 1.5rem;
  margin: 2rem 0;
  color: rgba(26, 26, 26, 0.6);
  font-style: italic;
}

.blog-content ul,
.blog-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}

.blog-content li {
  line-height: 1.8;
  margin-bottom: 0.5rem;
}

.blog-content img {
  border-radius: 0;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Query pagination styling */
.wp-block-query-pagination {
  gap: 0.5rem;
}

.wp-block-query-pagination-numbers .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0.875rem;
  text-decoration: none;
  color: var(--wp--preset--color--muted);
  border: 1px solid rgba(26, 26, 26, 0.1);
  transition: all 0.3s ease;
}

.wp-block-query-pagination-numbers .page-numbers.current,
.wp-block-query-pagination-numbers .page-numbers:hover {
  background-color: var(--wp--preset--color--ink);
  color: #ffffff;
  border-color: var(--wp--preset--color--ink);
}

/* ==========================================================================
   Creator Page
   ========================================================================== */
.creator-portrait {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  filter: grayscale(1);
  transition: filter 1s ease;
}

.creator-portrait:hover {
  filter: grayscale(0);
}

.creator-portrait img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.creator-tag {
  font-family: var(--wp--preset--font-family--display);
  font-size: 10px;
  color: var(--wp--preset--color--accent);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 700;
}

/* ==========================================================================
   News Archive – Featured Image & Placeholder
   ========================================================================== */
.news-thumb-wrap {
  width: 160px;
  height: 100px;
  min-width: 160px;
  flex-shrink: 0;
  background-color: #e8e8e8;
  background-image: url('/wp-content/uploads/2026/04/logo2.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
  overflow: hidden;
  position: relative;
}

.news-thumb-wrap .wp-block-post-featured-image {
  position: absolute;
  inset: 0;
  margin: 0;
}

.news-thumb-wrap .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Single news – featured image with logo fallback */
.single-news-thumb-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #e8e8e8;
  background-image: url('/wp-content/uploads/2026/04/logo2.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30%;
  overflow: hidden;
  position: relative;
}

.single-news-thumb-wrap .wp-block-post-featured-image {
  position: absolute;
  inset: 0;
  margin: 0;
}

.single-news-thumb-wrap .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* News archive list item layout */
.wp-block-post-template .wp-block-group {
  align-items: center;
}

/* ==========================================================================
   Mobile Responsive – Comprehensive
   ========================================================================== */

/* ── Mobile Navigation ── */
@media (max-width: 768px) {
  /* Hide desktop nav, show hamburger */
  .site-header .site-nav {
    display: none !important;
    /* absolute, NOT fixed: the header wrapper is already position:fixed at
       the viewport top, so an absolutely-positioned overlay anchored to the
       header lands exactly on the viewport — without nesting another fixed
       element inside it (iOS Safari mis-anchors nested fixed elements, which
       made this menu render shifted down / off-center on iPhone). */
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    box-sizing: border-box; /* include the 2rem padding in 100vw — without
                               this the overlay is 4rem wider than the screen
                               and the menu items sit off-center */
    background: rgba(14, 14, 14, 0.97);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2.5rem !important;
    z-index: 9999;
    padding: 2rem;
  }

  .site-header .site-nav.is-open {
    display: flex !important;
  }

  .site-header .site-nav .nav-link {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 14px !important;
    letter-spacing: 0.3em;
    text-align: center;
  }

  .site-header .site-nav .nav-link:hover {
    color: #ffffff !important;
  }

  .site-header .site-nav .nav-contact-link {
    color: #ffffff !important;
    border-color: #ffffff !important;
  }

  .hamburger-menu {
    display: flex !important;
    z-index: 10000;
    position: relative;
    width: 30px;
    height: 24px;
    align-items: center;
    justify-content: center;
  }

  /* While the menu is open, pin the × to a FIXED spot at the top-right of
     the overlay (independent of the header bar's scrolled/unscrolled padding),
     so it never looks shifted. Larger hit area for the thumb, too. */
  .site-header .hamburger-menu.is-open {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 44px;
    height: 44px;
  }
  .site-header .hamburger-menu.is-open span {
    left: 10px;
  }
  .site-header .hamburger-menu.is-open span:nth-child(1) { top: 21px; }
  .site-header .hamburger-menu.is-open span:nth-child(3) { top: 21px; }

  /* Hamburger spans positioning */
  .hamburger-menu span {
    display: block;
    position: absolute;
    left: 3px;
    height: 2px;
    transition: all 0.3s ease;
    transform-origin: center center;
  }
  .hamburger-menu span:nth-child(1) { top: 4px; width: 24px; }
  .hamburger-menu span:nth-child(2) { top: 11px; width: 24px; }
  .hamburger-menu span:nth-child(3) { top: 18px; width: 16px; }

  /* Hamburger → clean × */
  .hamburger-menu.is-open span:nth-child(1) {
    top: 11px;
    transform: rotate(45deg);
  }
  .hamburger-menu.is-open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  .hamburger-menu.is-open span:nth-child(3) {
    top: 11px;
    /* the 3rd bar carries an inline style width:16px (its short closed-state
       length), which beats any selector — so the open-state 24px never
       applied and the × lines crossed 4px off-center. !important wins. */
    width: 24px !important;
    transform: rotate(-45deg);
  }

  /* Scrolled state: hamburger lines become black */
  .site-header.scrolled .hamburger-menu span {
    background: #1a1a1a !important;
  }

  /* But when menu is open, always white (on dark overlay) */
  .site-header .hamburger-menu.is-open span {
    background: #ffffff !important;
  }

  /* Header padding + proper alignment */
  .site-header {
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .site-header .is-layout-constrained > * {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .site-header.scrolled {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  /* Logo size on mobile */
  .site-header .site-logo {
    height: 30px !important;
  }
}

/* ── Hero Section Mobile ── */
@media (max-width: 768px) {
  .hero-heading {
    font-size: clamp(2rem, 10vw, 3.5rem);
    line-height: 1.2;
  }

  .hero-section {
    min-height: 100svh;
  }

  /* Watermark logo: centered, top, large on mobile */
  .hero-section > [style*="pointer-events:none"] {
    align-items: flex-start !important;
    padding-top: 12vh !important;
  }
  .hero-section > [style*="pointer-events:none"] > div {
    justify-content: center !important;
    padding: 0 !important;
  }
  .hero-section > [style*="pointer-events:none"] img {
    width: 85vw !important;
    max-width: 350px !important;
    opacity: 0.1;
  }

  /* Hero content — push text lower for balance with top logo */
  .hero-section .wp-block-group[style*="padding-top:14rem"] {
    padding-top: 42vh !important;
    padding-bottom: 2rem !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* Vision/Mission grid → 1 column with borders between */
  .hero-section [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
  }
  .hero-section [style*="grid-template-columns:repeat(3"] > div {
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding: 1.5rem 1.25rem !important;
  }
  .hero-section [style*="grid-template-columns:repeat(3"] > div:last-child {
    border-bottom: none;
  }

  /* Marquee text smaller */
  .hero-marquee-item {
    font-size: 8px !important;
    letter-spacing: 0.3em !important;
  }
  .hero-marquee-strip {
    padding: 0.75rem 0 !important;
  }
}

/* ── Concept Section Mobile ── */
@media (max-width: 768px) {
  .concept-section [style*="display:flex"][style*="gap:4rem"],
  [style*="display:flex"][style*="gap:4rem"] {
    gap: 2rem !important;
  }

  [style*="min-width:300px"],
  [style*="min-width:280px"],
  [style*="min-width:240px"] {
    min-width: 100% !important;
  }

  .concept-image {
    aspect-ratio: 16 / 9;
  }
}

/* ── Services Grid Mobile ── */
@media (max-width: 768px) {
  .services-section [style*="grid-template-columns:repeat(2"] {
    grid-template-columns: 1fr !important;
  }

  .service-card,
  .services-section [style*="padding:3rem 4rem"] {
    padding: 2rem 1.5rem !important;
  }

  .services-section [style*="gap:3rem"] {
    gap: 1.5rem !important;
  }
}

/* ── Stats Section Mobile ── */
@media (max-width: 768px) {
  .stats-section .wp-block-columns {
    flex-direction: column !important;
  }

  .stat-value {
    font-size: 2.5rem;
  }

  [style*="font-size:3rem"] {
    font-size: clamp(1.75rem, 6vw, 3rem) !important;
  }
}

/* ── CEO Message Mobile ── */
@media (max-width: 768px) {
  .ceo-message [style*="display:flex"][style*="gap:4rem"],
  [id="message"] [style*="gap:4rem"] {
    gap: 2rem !important;
  }

  .ceo-portrait {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ── Company Info Mobile ── */
@media (max-width: 768px) {
  [id="company"] [style*="gap:4rem"] {
    gap: 2rem !important;
  }

  [id="company"] [style*="gap:1rem 3rem"] {
    gap: 0.5rem 1rem !important;
  }

  [style*="min-width:140px"] {
    min-width: 120px !important;
  }
}

/* ── Contact Section Mobile ── */
@media (max-width: 768px) {
  .contact-section [style*="gap:6rem"],
  [id="contact"] [style*="gap:6rem"] {
    gap: 2rem !important;
  }

  [style*="padding:3rem"] {
    padding: 1.5rem !important;
  }

  /* LINE CTA button — prevent overflow */
  .contact-section a[style*="max-width:320px"],
  .line-cta-button,
  [style*="background-color:#06C755"] {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Contact form area padding */
  .contact-section .is-layout-constrained > * {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ── Agency Section Mobile ── */
@media (max-width: 768px) {
  .agency-section [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
  }

  .agency-section [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: 1fr !important;
  }

  .agency-section [style*="gap:3rem"] {
    gap: 1.5rem !important;
  }
}

/* ── Creator Showcase Mobile ── */
@media (max-width: 768px) {
  .creator-showcase [style*="font-size:5rem"] {
    font-size: clamp(2rem, 10vw, 3.5rem) !important;
  }

  .creator-showcase .wp-block-columns {
    flex-direction: column !important;
  }

  .creator-showcase .wp-block-column[style*="width:50%"] {
    flex-basis: 100% !important;
    width: 100% !important;
  }
}

/* ── Beyond Banner Mobile ── */
@media (max-width: 768px) {
  .beyond-section {
    height: 40vh;
  }

  .beyond-section [style*="font-size:3.75rem"] {
    font-size: clamp(1.5rem, 6vw, 2.5rem) !important;
  }

  /* Fix parallax on mobile (iOS doesn't support fixed bg) */
  /* Use JS-based parallax instead — see parallax-mobile.js */
  .beyond-section .bg-image,
  .parallax-banner-section [style*="background"] {
    background-attachment: scroll !important;
  }

  .parallax-banner-section {
    overflow: hidden;
  }
}

/* ── FAQ Mobile ── */
@media (max-width: 768px) {
  details.faq-item summary {
    font-size: 1rem;
    padding: 1.25rem 0;
  }
}

/* ── News Section Mobile ── */
@media (max-width: 768px) {
  .news-thumb-wrap {
    width: 100px;
    height: 70px;
    min-width: 100px;
  }

  /* News list items stack on mobile */
  .wp-block-post-template [style*="display:flex"][style*="gap:2rem"] {
    gap: 1rem !important;
  }

  /* News single page – add side padding */
  .blog-content {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  /* News hero banner mobile */
  .hero-banner-dark {
    min-height: 200px !important;
  }

  /* Constrained content areas need padding on mobile */
  body:not(.home) .is-layout-constrained > * {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body:not(.home) .wp-block-group[style*="padding-top:3rem"] {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

/* ── Footer Mobile ── */
@media (max-width: 768px) {
  .site-footer {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    padding-top: 3rem !important;
  }

  .site-footer .wp-block-columns {
    flex-direction: column !important;
    gap: 2rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .site-footer .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .site-footer [style*="flex-basis:40%"],
  .site-footer [style*="flex-basis:15%"],
  .site-footer [style*="flex-basis:22%"],
  .site-footer [style*="flex-basis:23%"] {
    flex-basis: 100% !important;
  }

  /* Hide spacer column on mobile */
  .site-footer .wp-block-column:nth-child(2) {
    display: none !important;
  }

  /* Footer bottom bar */
  .site-footer .wp-block-separator {
    margin-top: 2rem !important;
  }

  .site-footer > .wp-block-group:last-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Fix constrained layout pushing content right */
  .site-footer.is-layout-constrained > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }

  .site-footer .is-layout-constrained > *,
  .site-footer .is-layout-flow > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }
}

/* ── General Mobile Overrides ── */
@media (max-width: 768px) {
  /* Reduce all large section paddings */
  [style*="padding-top:6rem"] {
    padding-top: 3rem !important;
  }
  [style*="padding-bottom:6rem"] {
    padding-bottom: 3rem !important;
  }
  [style*="padding-top:5rem"] {
    padding-top: 2.5rem !important;
  }
  [style*="padding-bottom:5rem"] {
    padding-bottom: 2.5rem !important;
  }
  [style*="padding-top:8rem"] {
    padding-top: 3rem !important;
  }
  [style*="padding-bottom:8rem"] {
    padding-bottom: 3rem !important;
  }

  /* Large font sizes */
  [style*="font-size:3.75rem"] {
    font-size: clamp(1.5rem, 7vw, 2.5rem) !important;
  }
  [style*="font-size:5rem"] {
    font-size: clamp(2rem, 8vw, 3rem) !important;
  }
  [style*="font-size:4rem"] {
    font-size: clamp(1.75rem, 7vw, 2.75rem) !important;
  }
  [style*="font-size:3rem"] {
    font-size: clamp(1.5rem, 6vw, 2.25rem) !important;
  }
  [style*="font-size:2.5rem"] {
    font-size: clamp(1.5rem, 5vw, 2rem) !important;
  }

  /* WP block columns → stack on mobile */
  .wp-block-columns:not(.is-not-stacked-on-mobile) {
    flex-direction: column !important;
  }

  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }

  /* Prevent horizontal overflow.
     IMPORTANT: prefer overflow-x: clip over hidden.
     `hidden` turns <body> into a scroll container on iOS Safari, which
     detaches position:fixed elements (the site header) from the viewport —
     the header then appears "stuck" mid-page while scrolling on mobile.
     `clip` clips without creating a scroll container, keeping fixed
     positioning anchored to the viewport. */
  body {
    overflow-x: hidden;
  }

  .wp-site-blocks {
    overflow-x: hidden;
  }

  @supports (overflow: clip) {
    body {
      overflow-x: clip;
    }

    .wp-site-blocks {
      overflow-x: clip;
    }
  }

  /* Inline flex/grid patterns that use repeat(2+) columns */
  [style*="grid-template-columns:repeat(2,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns: repeat(2"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
  }

  /* Reduce large gaps globally */
  [style*="gap:4rem"] {
    gap: 1.5rem !important;
  }
  [style*="gap:6rem"] {
    gap: 2rem !important;
  }
  [style*="gap: 4rem"] {
    gap: 1.5rem !important;
  }
  [style*="gap: 6rem"] {
    gap: 2rem !important;
  }

  /* All constrained layout sections need side padding */
  .is-layout-constrained {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* But nested constrained shouldn't double-pad */
  .is-layout-constrained .is-layout-constrained {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Prevent any element from causing horizontal overflow */
  img, video, iframe, table {
    max-width: 100% !important;
  }

  /* All inline flex containers that use gap:3rem */
  [style*="gap:3rem"] {
    gap: 1.25rem !important;
  }
  [style*="gap: 3rem"] {
    gap: 1.25rem !important;
  }

  /* Fix all sections with min-width that causes overflow */
  [style*="min-width:300px"],
  [style*="min-width:280px"],
  [style*="min-width:240px"] {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* All padding:Xrem Xrem reductions */
  [style*="padding:3rem 4rem"] {
    padding: 1.5rem 1rem !important;
  }
  [style*="padding:2.5rem 2rem"] {
    padding: 1.5rem 1rem !important;
  }
}