/* === HAIZE homepage overrides === */

/* Stealth mode: hide the Thesis section entirely.
   The DOM still contains it (so re-enabling later is a CSS-only change) but it's
   removed from layout so there's no gap between Hero and Team. */
section[data-framer-name="Introduction"] { display: none !important; }

/* ========================================================================
   .haize-cta-pill  —  reusable CTA template
   ========================================================================
   Single source of truth for every secondary CTA on the site.
   Matches the Framer Hero "お問い合わせ" idle state exactly:
     - dark ink pill (#010517)
     - 14px label
     - inline ↗ diagonal arrow (~16px) flush at right
     - no circle disc at idle (Framer animates a disc in only on hover —
       we don't replicate that animation; visitors see the idle visual)

   Required markup (copy-paste, replace href + label):

     <a class="haize-cta-pill" href="/somewhere">
       <span class="label">お問い合わせ</span>
       <span class="arrow" aria-hidden="true">
         <svg viewBox="0 0 16 16" fill="none" stroke="currentColor"
              stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
           <line x1="4" y1="12" x2="12" y2="4"/>
           <polyline points="6 4 12 4 12 10"/>
         </svg>
       </span>
     </a>
   ======================================================================== */
.haize-cta-pill {
  display: inline-flex; align-items: center;
  gap: 16px;
  height: 44px;
  padding: 0 24px;
  background: rgb(1, 5, 23);
  color: #ffffff;
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  font-family: "Geist", "Hiragino Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  transition: transform .18s ease;
}
.haize-cta-pill:hover { transform: translateY(-1px); }
.haize-cta-pill .arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  flex-shrink: 0;
  color: #ffffff;
  transition: transform .18s ease;
}
.haize-cta-pill:hover .arrow { transform: translate(2px, -2px); }
.haize-cta-pill .arrow svg { display: block; width: 100%; height: 100%; }

/* Convenience top spacing when the pill is used in a section flow */
.haize-cta-pill[data-spacing="section"] { margin-top: 24px; }

/* Reset any legacy class name to avoid two stylesheets disagreeing */
.haize-team-cta { all: unset; }

/* ========================================================================
   .haize-about-cta  —  cloned Framer "お問い合わせ" pill in the Team section
   ========================================================================
   The Team section's About CTA is a `cloneNode(true)` of the Framer
   contact pill so every idle pixel matches. Framer's hover is React/motion
   driven and does not replay on a detached clone, so we re-create it here.

   Implementation notes:
   - We collapse the entire animation into one `transform` so there is only
     one interpolation timeline. Framer animates `left: 0→45px` + a separate
     `transform: rotate→scale`; doing the same in CSS animates two layout
     systems in parallel and produces a visibly skewed/jittery path because
     the rotate→scale transition falls back to matrix interpolation.
   - We force matching transform function lists on idle and hover
     (`translateX() rotate() scale()`) so the browser can interpolate each
     function independently — no matrix-decomposition skew.
   - `border-radius` 24px and 66.6667% on a 36px square both resolve to a
     perfect circle, so we skip animating it.
   ======================================================================== */
.haize-about-cta {
  margin-top: 24px;
  text-decoration: none;
}
.haize-about-cta [data-framer-name="Circle 1"] {
  transform: translateX(0px) rotate(-45deg) scale(1) !important;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.haize-about-cta:hover [data-framer-name="Circle 1"] {
  transform: translateX(45px) rotate(0deg) scale(1.2) !important;
}

/* Hero pills: equalize the 2 cards' heights (left has 2 lines, right has 1) so
   the right pill matches the left visually. */
[data-framer-name="Hero Card"] {
  min-height: 112px !important;
  height: 112px !important;
  align-items: center !important;
}

/* ========================================================================
   Mobile (≤809px) — Hero density + low centroid
   ========================================================================
   Goals:
   - Hero feels compact, not spread across the whole viewport.
   - Center of gravity sits in the lower half, with breathing room above.
   - Hero content fits cleanly under the 85px fixed header so headline
     text never gets sliced in half by the header during scroll.

   Compositional choices (vs. Framer defaults / our earlier pass):
     H1            40px → 26px / 32px lh
     H4 (desc)     24px → 15px / 22px lh
     Card height   112px → 80px (padding 32px → 18px)
     Container gap 32px → 18px between H1/H4/Cards/Pill
     Card-to-card  8px → 16px so the two cards still read as distinct
     Hero pad-top  16px → 96px so the H1 starts well below the header
     Hero pad-bot  32px → 24px so the whole content cluster sits low
   ======================================================================== */
@media (max-width: 809px) {
  /* H1 — single drop of the 2nd Framer <br> so the headline reads as
     "プロの判断を、" / "特権から権利に。" (semantic 2-line) instead of
     being split mid-phrase. */
  section[data-framer-name="Section Hero"] h1.framer-text {
    font-size: 26px !important;
    line-height: 32px !important;
    letter-spacing: -0.01em !important;
  }
  section[data-framer-name="Section Hero"] h1.framer-text br:nth-of-type(2) {
    display: none !important;
  }
  /* H4 description — softer rhythm so the paragraph reads as supporting text */
  section[data-framer-name="Section Hero"] h4.framer-text {
    font-size: 15px !important;
    line-height: 22px !important;
    font-weight: 400 !important;
  }
  /* Cards — shorter and tighter so the two together don't dominate the screen */
  [data-framer-name="Hero Card"] {
    min-height: 80px !important;
    height: 80px !important;
    padding: 18px 24px !important;
  }
  [data-framer-name="Hero Card"] + [data-framer-name="Hero Card"] {
    margin-top: 8px !important; /* combined with parent flex gap 8 → ~16 total */
  }
  /* Tighten the gap stack of <H1, H4, cards-wrap, pill> inside the Content */
  section[data-framer-name="Section Hero"] [data-framer-name="Content"] {
    gap: 18px !important;
  }
  /* Section padding — push content down (clear the 85px fixed header at
     the top so the headline never appears glued to it), keep a smaller
     bottom buffer so the content cluster pins low without floating off. */
  section[data-framer-name="Section Hero"] {
    padding-top: 96px !important;
    padding-bottom: 24px !important;
  }
}

/* Removes the jarring white band between Hero and Team, dark-themes the footer
   to match the Hero canvas gradient mood, and replaces the (invisible) Framer
   nav with our consistent custom header. */

/* Override the Framer body-bg token (used as `var(--token-..., rgb(250,250,250))`).
   Setting the variable to "transparent" makes those wrapper divs transparent so the
   html-element gradient below shows through every section that doesn't paint its own bg.
   We apply it via `*` because Framer redeclares the variable on deeper class scopes. */
* {
  --token-0d23a05c-2e57-44e4-b42c-5146c705a3cf: transparent !important;
}

/* Page background: dark gradient that mimics the Hero canvas mood.
   Painted on the body element (not html) so background-size stretches with the full
   document height — `background-attachment: fixed` breaks fullPage screenshots and
   doesn't add value since the gradient is largely uniform.
   Tuned to mostly dark (#0a0a0c base) with subtle pink/blue blooms so white text reads. */
html { background: #0a0a0c !important; }
body {
  background:
    /* Top: warm coral bloom (matches Hero's top-right) */
    radial-gradient(ellipse 80% 25% at 80% 5%,   rgba(255, 130, 140, 0.32) 0%, transparent 65%),
    /* Bottom: rose/mauve bloom (matches Hero's bottom-left mauve tint) */
    radial-gradient(ellipse 70% 25% at 20% 95%,  rgba(220, 130, 150, 0.22) 0%, transparent 65%),
    /* Subtle purple in middle for visual continuity */
    radial-gradient(ellipse 50% 20% at 60% 60%,  rgba(155, 110, 170, 0.15) 0%, transparent 60%),
    linear-gradient(180deg, #16121a 0%, #0a0a0c 100%) !important;
}

/* === Thesis / Introduction section: make it transparent + invert text === */
section[data-framer-name="Introduction"] {
  background: transparent !important;
}
/* Headings & paragraphs inside Introduction → white */
section[data-framer-name="Introduction"] p,
section[data-framer-name="Introduction"] h1,
section[data-framer-name="Introduction"] h2,
section[data-framer-name="Introduction"] h3,
section[data-framer-name="Introduction"] h4,
section[data-framer-name="Introduction"] [class*="framer-text"] {
  --framer-text-color: #ffffff !important;
  color: #ffffff !important;
}
/* === Thesis layout rebuild ===
   The Ondex template's Primary Grid forces 3 cards into a cramped 488px right
   column with the first 2 grid columns being Spacers. We hide the Spacers,
   collapse the wraps to full width, and stack the 3 Text Wraps vertically as
   separate full-width sections so each thesis point gets its own breathing room. */
section[data-framer-name="Introduction"] [data-framer-name="Heading Wrap"] {
  width: 100% !important;
  max-width: 100% !important;
}
section[data-framer-name="Introduction"] [data-framer-name="Spacer"] {
  display: none !important;
}
section[data-framer-name="Introduction"] [data-framer-name="Primary Grid"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  height: auto !important;
}
/* Outer + inner Wraps both stretch to full width and stack their children vertically. */
section[data-framer-name="Introduction"] [data-framer-name="Primary Grid"] > [data-framer-name="Wrap"],
section[data-framer-name="Introduction"] [data-framer-name="Primary Grid"] > [data-framer-name="Wrap"] > [data-framer-name="Wrap"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  height: auto !important;
}
/* Each card becomes its own full-width stacked section.
   Card 01 + 02 are wrapped in [data-framer-name="Text Wrap"]; Card 03 uses a bare
   .framer-q1vl6p div in the template, so we target it by class explicitly. */
section[data-framer-name="Introduction"] [data-framer-name="Text Wrap"],
section[data-framer-name="Introduction"] .framer-q1vl6p {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 16px !important;
  padding: 40px 48px !important;
}
/* Card 03's inner RichTextContainer also needs to expand */
section[data-framer-name="Introduction"] .framer-q1vl6p .framer-g1expy,
section[data-framer-name="Introduction"] .framer-q1vl6p > div {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}
@media (max-width: 810px) {
  section[data-framer-name="Introduction"] [data-framer-name="Text Wrap"] {
    padding: 28px !important;
  }
}

/* === Team section: clear opaque white bg so the page gradient shows through === */
section[data-framer-name="Team"],
section[data-framer-name="Team"] [data-framer-name="Image Wrap"],
section[data-framer-name="Team"] [data-framer-name="Right Column"],
section[data-framer-name="Team"] [data-framer-name="Overlay"] {
  background: transparent !important;
  background-color: transparent !important;
}
/* Team text becomes light on dark */
section[data-framer-name="Team"] p,
section[data-framer-name="Team"] h1,
section[data-framer-name="Team"] h2,
section[data-framer-name="Team"] h3,
section[data-framer-name="Team"] [class*="framer-text"] {
  --framer-text-color: #ffffff !important;
  color: #ffffff !important;
}

/* === Framer footer: hidden — replaced by our unified custom footer below === */
footer[data-framer-name="Desktop"],
footer[data-framer-name="Phone"],
footer[data-framer-name="Tablet"],
footer[data-framer-name="Mobile"] {
  display: none !important;
}

/* === Unified HAIZE footer (matches About page) === */
.haize-footer {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-family: "Geist", "Hiragino Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 32px;
}
.haize-footer .inner {
  max-width: none;
  margin: 0;
  padding: 48px 48px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
}
.haize-footer .col h4 {
  color: #ffffff; font-size: 14px; font-weight: 600;
  margin: 0 0 12px 0; padding: 0;
  letter-spacing: 0.02em;
}
.haize-footer .col p,
.haize-footer .col a {
  display: block;
  margin: 6px 0 0 0; padding: 0;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 14px;
}
.haize-footer .col a:hover { color: #ffffff; }
.haize-footer .footer-logo img { display: block; height: 36px; width: auto; }
.haize-footer .bottom {
  max-width: none;
  margin: 0;
  padding: 16px 48px 48px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  display: flex; justify-content: space-between;
}
@media (max-width: 768px) {
  .haize-footer .inner { grid-template-columns: 1fr; padding: 32px 24px 16px; }
  .haize-footer .bottom { padding: 16px 24px 32px; }
}

/* === Hide the broken Framer nav (we replace with our own header below) === */
nav[data-framer-name="Primary"] { display: none !important; }

/* === Custom HAIZE header — mirrors the About page header exactly === */
.haize-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: rgba(10, 10, 12, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  font-family: "Geist", "Hiragino Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.haize-header .inner {
  max-width: none;
  margin: 0;
  padding: 20px 48px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.haize-header .logo {
  display: flex; align-items: center; flex-shrink: 0; text-decoration: none;
}
.haize-header .logo img { display: block; height: 36px; width: auto; }
.haize-header .desktop-only { display: flex; align-items: center; gap: 28px; }
.haize-header .desktop-only ul { list-style: none; display: flex; gap: 28px; align-items: center; margin: 0; padding: 0; }
.haize-header .desktop-only a {
  font-size: 14px; color: #8a8e98;
  text-decoration: none; transition: color .15s;
}
.haize-header .desktop-only a:hover,
.haize-header .desktop-only a.active { color: #ffffff; }
.haize-header .hamburger {
  display: none;
  width: 44px; height: 44px; padding: 0;
  background: transparent;
  border: 1px solid #2a2a32;
  border-radius: 999px;
  align-items: center; justify-content: center;
  cursor: pointer;
  color: #ffffff;
  transition: border-color .15s, background-color .15s;
}
.haize-header .hamburger:hover {
  border-color: #8a8e98;
  background: rgba(255, 255, 255, 0.04);
}
.haize-header .hamburger:focus-visible { outline: 2px solid #C6E5DF; outline-offset: 2px; }
.haize-header .hamburger svg { display: block; }

/* === Mobile menu — refined stealth/luxury aesthetic === */
.haize-mobile-menu {
  position: fixed; inset: 0; z-index: 300;
  background:
    radial-gradient(ellipse 80% 40% at 80% 0%, rgba(255, 130, 140, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 10% 100%, rgba(155, 110, 170, 0.10) 0%, transparent 60%),
    #0a0a0c;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex; flex-direction: column;
  padding: 20px 32px 40px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s ease-out, visibility .28s ease-out;
  font-family: "Geist", "Hiragino Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: -0.005em;
}
.haize-mobile-menu.open { opacity: 1; visibility: visible; pointer-events: auto; }

/* Top bar: logo + ghost-style close button (matches the open hamburger). */
.haize-mobile-menu .top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.haize-mobile-menu .logo img { display: block; height: 36px; width: auto; }
.haize-mobile-menu .hamburger {
  display: inline-flex !important;
  width: 44px; height: 44px; padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  align-items: center; justify-content: center;
  cursor: pointer; color: #ffffff;
  transition: border-color .15s, background-color .15s;
}
.haize-mobile-menu .hamburger:hover {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.04);
}

/* Menu body: clean typography, no decorative bullets, subtle hover */
.haize-mobile-menu .menu-body {
  flex: 1;
  display: flex; flex-direction: column;
  justify-content: center; align-items: stretch;
  gap: 4px;
  padding: 48px 0;
}
.haize-mobile-menu .menu-body a {
  display: flex; align-items: center;
  font-size: 40px; font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.2;
  padding: 16px 0;
  position: relative;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: color .2s ease, padding-left .2s ease;
}
.haize-mobile-menu .menu-body a:hover,
.haize-mobile-menu .menu-body a.active {
  color: #ffffff;
}
/* Subtle leading indicator that grows on hover/active — replaces the old bullet dot */
.haize-mobile-menu .menu-body a::before {
  content: "";
  display: inline-block;
  width: 0; height: 1px;
  background: #C6E5DF;
  margin-right: 0;
  transition: width .25s ease, margin-right .25s ease;
}
.haize-mobile-menu .menu-body a.active::before,
.haize-mobile-menu .menu-body a:hover::before {
  width: 24px;
  margin-right: 16px;
}
/* Tiny number marker (01 / 02) for quiet visual hierarchy */
.haize-mobile-menu .menu-body a[data-num]::after {
  content: attr(data-num);
  margin-left: auto;
  font-size: 12px; letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.32);
  font-weight: 400;
  font-feature-settings: "tnum";
}

/* Footer area: contact + tagline, refined */
.haize-mobile-menu .menu-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 24px;
  display: flex; flex-direction: column; gap: 6px;
}
.haize-mobile-menu .menu-footer .contact {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  letter-spacing: 0;
}
.haize-mobile-menu .menu-footer .tagline {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.38);
  letter-spacing: 0.04em;
}
body.haize-menu-open { overflow: hidden; }

@media (max-width: 768px) {
  .haize-header .desktop-only { display: none; }
  .haize-header .hamburger { display: inline-flex; }
  .haize-mobile-menu .menu-body a { font-size: 36px; }
  /* Align the closed hamburger to the EXACT spot where the menu's close (×)
     sits, so opening/closing doesn't shift logo/button by 16px on mobile.
     The mobile menu uses 32px horizontal padding; the header was using 48px. */
  .haize-header .inner { padding: 20px 32px; }
}