/* Tenki Hero Section
     Full-bleed (escapes Squarespace's container max-width via 100vw +
     margin-left:-50vw trick) photo with an overlay card on the right.
     CSS scoped via the .tenki-hero class prefix; no globals affected. */
  .tenki-hero {
    --hero-text:  #ffffff;
    --hero-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
    --hero-cta-bg:    #ffffff;
    --hero-cta-text:  #1A1A1A;
    --hero-cta-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);

    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    position: relative;
    width: 100vw;
    /* Full-bleed horizontal + flush against the nav bar above.
       Squarespace section wrappers add their own vertical padding
       (typically 17 px top / 17 px bottom).  We compensate by
       PULLING UP with a negative top margin equal to that padding
       so the hero sits visually right against the nav.  Some SQS
       templates use a larger top pad; if there's still a gap on
       your specific page, either bump this -68px to -90px / -110px
       OR enable the .sqs-block-code:has() override below. */
    margin: -68px -50vw 0 -50vw;
    left: 50%;
    right: 50%;
    /* Aspect ratio matched to the source SQS hero: roughly 16:7 on
       desktop, taller on mobile so the photo doesn't compress.  The
       photo is set as a background-image inside `.tenki-hero-image` so
       background-position can be tuned without changing the markup. */
    aspect-ratio: 16 / 7;
    min-height: 320px;
    max-height: 78vh;
    overflow: hidden;
    isolation: isolate;
    z-index: 1;
    box-sizing: border-box;
  }
  .tenki-hero *,
  .tenki-hero *::before,
  .tenki-hero *::after { box-sizing: border-box; }

  /* The photo layer — fills the entire hero, behind the overlay card */
  .tenki-hero-image {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-position: center 32%;   /* bias slightly UP so faces stay in frame on wide viewports */
    background-size: cover;
    background-repeat: no-repeat;
    /* Fallback colour while the photo is loading — deep Tenki blue so
       an unloaded hero reads as a deliberate dark panel rather than
       blank whitespace under floating headline text.  Replaced by the
       photo as soon as it arrives. */
    background-color: #00243f;
  }

  /* Hide the headline + meaning card until the hero photo has loaded
     (JS adds .is-hero-loaded on the hero root when the Image() preloader
     fires onload).  Until then the deep-blue fallback shows alone — no
     orphan text on a blank panel.  3-second failsafe in the JS guarantees
     the overlay reveals even if the photo can't load (offline / CDN
     hiccup) so we never trap the visitor on a faceless hero. */
  .tenki-hero .tenki-hero-overlay {
    opacity: 0;
    transition: opacity 0.45s ease-out;
  }
  .tenki-hero.is-hero-loaded .tenki-hero-overlay { opacity: 1; }
  @media (prefers-reduced-motion: reduce) {
    .tenki-hero .tenki-hero-overlay { transition: none; }
  }
  /* Soft right-side vignette that boosts headline contrast without
     darkening the whole image.  Adjusts per .data-align variant below. */
  .tenki-hero[data-align="right"] .tenki-hero-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to left,
                rgba(0, 0, 0, 0.45) 0%,
                rgba(0, 0, 0, 0.30) 25%,
                rgba(0, 0, 0, 0.08) 55%,
                rgba(0, 0, 0, 0)    80%);
    pointer-events: none;
  }
  .tenki-hero[data-align="center"] .tenki-hero-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
                rgba(0, 0, 0, 0)    0%,
                rgba(0, 0, 0, 0.18) 50%,
                rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
  }
  .tenki-hero[data-align="left"] .tenki-hero-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
                rgba(0, 0, 0, 0.45) 0%,
                rgba(0, 0, 0, 0.30) 25%,
                rgba(0, 0, 0, 0.08) 55%,
                rgba(0, 0, 0, 0)    80%);
    pointer-events: none;
  }

  /* Overlay container — positions the card per data-align */
  .tenki-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 5%;
    pointer-events: none;
  }
  .tenki-hero[data-align="right"]  .tenki-hero-overlay { justify-content: flex-end; }
  .tenki-hero[data-align="center"] .tenki-hero-overlay { justify-content: center; align-items: flex-end; padding-bottom: 9%; }
  .tenki-hero[data-align="left"]   .tenki-hero-overlay { justify-content: flex-start; }

  /* Stack wrapper — meaning card sits ABOVE the headline+CTA on the
     right side.  align-items: flex-end keeps both children right-
     aligned (matches the data-align="right" pattern). */
  .tenki-hero-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 24px;
    pointer-events: auto;
    max-width: 560px;
  }

  /* The "Tenki for born" glass card overlay.  Translucent white +
     backdrop-filter blur reads as layered over the photo without
     obscuring it.  Higher opacity (0.92 vs prev 0.84) so the body
     text is comfortably readable against the busy photo behind.
     Hover lift + soft shadow growth matches the bounce animation
     the rest of the site's cards use (pillars, deep-dive, etc.),
     inviting desktop users to engage with it. */
  .tenki-hero-meaning {
    width: 100%;
    max-width: 500px;
    padding: 26px 32px;
    background-color: rgba(255, 255, 255, 0.96);   /* nearly opaque — body text fully legible */
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-radius: 14px;
    border-left: 5px solid #005A9C;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.32),
                0 0 0 1px rgba(255, 255, 255, 0.6) inset;
    text-align: left;
    color: #111;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    cursor: default;
    animation: tenkiHeroMeaningIn 0.7s ease-out 0.15s both;
  }
  .tenki-hero-meaning:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.36),
                0 0 0 1px rgba(255, 255, 255, 0.65) inset;
  }
  @keyframes tenkiHeroMeaningIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .tenki-hero-meaning-title {
    margin: 0 0 6px 0;
    color: #005A9C;
    font-size: 1.6rem;          /* was 1.4 — bigger, more confident */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
  }
  .tenki-hero-meaning-subtitle {
    margin: 0 0 14px 0;
    color: #111;
    font-size: 1.1rem;          /* was 1.0 — more readable italic */
    font-weight: 500;
    font-style: italic;
  }
  .tenki-hero-meaning-divider {
    width: 48px;
    height: 3px;
    background-color: #005A9C;
    border-radius: 2px;
    margin-bottom: 14px;
  }
  .tenki-hero-meaning-text {
    margin: 0;
    color: #1a1a1a;             /* darker for higher contrast */
    font-size: 1.02rem;         /* was 0.92 — comfortable reading */
    line-height: 1.6;
    font-weight: 500;
  }
  .tenki-hero-meaning-text strong { color: #000; font-weight: 800; }

  /* The card — headline + CTA stacked.  Transparent background to keep
     the photo behind it visible; text + shadow do the lift.
     Gentle fade-in so it appears in sync with the meaning card above
     (reduces the staggered "stuff popping in" load feel). */
  .tenki-hero-card {
    max-width: 560px;
    color: var(--hero-text);
    text-align: right;
    pointer-events: auto;
    animation: tenkiHeroCardIn 0.8s ease-out 0.35s both;
  }
  @keyframes tenkiHeroCardIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .tenki-hero[data-align="center"] .tenki-hero-card { text-align: center; }
  .tenki-hero[data-align="left"]   .tenki-hero-card { text-align: left;  }

  .tenki-hero-headline {
    margin: 0 0 28px 0;
    font-size: clamp(1.6rem, 3.6vw, 3rem);
    font-weight: 400;
    line-height: 1.18;
    letter-spacing: 0.2px;
    color: var(--hero-text);
    text-shadow: var(--hero-shadow);
    /* Allow the headline to wrap naturally to 2-3 lines on most viewports */
    text-wrap: balance;
  }
  .tenki-hero-headline strong,
  .tenki-hero-headline em {
    font-weight: 700;
    font-style: normal;
  }

  .tenki-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: var(--hero-cta-bg);
    color: var(--hero-cta-text);
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    font-size: clamp(0.92rem, 1.4vw, 1.05rem);
    letter-spacing: 0.4px;
    box-shadow: var(--hero-cta-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .tenki-hero-cta:hover,
  .tenki-hero-cta:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.26);
    background: #f8fafc;
    outline: none;
  }
  .tenki-hero-cta:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20);
  }

  /* Build chip — only visible with ?debug=1 (toggled via .show-build) */
  .tenki-hero-build-chip {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 5;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    color: #fff;
    background: rgba(0, 90, 156, 0.85);
    padding: 3px 8px;
    border-radius: 10px;
    letter-spacing: 0.3px;
    display: none;
  }
  .tenki-hero.show-build .tenki-hero-build-chip { display: inline-block; }

  /* Responsive — narrower viewports get a taller hero + overlay shifts
     to bottom for thumb-friendly button placement.  Below 640 px the
     headline gets a darker bottom gradient so it stays legible against
     the body of the photo. */
  @media (max-width: 960px) {
    .tenki-hero {
      aspect-ratio: 4 / 3;
      max-height: 70vh;
    }
    .tenki-hero[data-align="right"] .tenki-hero-overlay,
    .tenki-hero[data-align="left"]  .tenki-hero-overlay {
      align-items: flex-end;
      padding-bottom: 8%;
    }
    .tenki-hero-card { text-align: right; }
  }
  @media (max-width: 640px) {
    .tenki-hero {
      aspect-ratio: 3 / 4;     /* tall portrait on phone */
      max-height: 80vh;
    }
    /* Phone-portrait hero is too tall + narrow to host both the
       meaning card AND the headline overlay — hide the meaning card
       (it still renders below via the standalone meaning section in
       the page composer, which mobile shows in-flow). */
    .tenki-hero-meaning { display: none; }
    .tenki-hero-stack { gap: 0; }
    .tenki-hero-image::after,
    .tenki-hero[data-align="right"] .tenki-hero-image::after,
    .tenki-hero[data-align="left"]  .tenki-hero-image::after {
      background: linear-gradient(to bottom,
                  rgba(0, 0, 0, 0)    35%,
                  rgba(0, 0, 0, 0.35) 65%,
                  rgba(0, 0, 0, 0.70) 100%) !important;
    }
    .tenki-hero-overlay {
      padding: 6%;
      align-items: flex-end;
      justify-content: center !important;
    }
    .tenki-hero-card {
      text-align: center !important;
      max-width: 100%;
    }
    .tenki-hero-cta { padding: 12px 28px; }
  }