@import url('https://fonts.googleapis.com/css2?family=Anton&family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700&family=Noto+Serif+JP:wght@500;700&display=swap');

    :root {
      --white: #ffffff;
      --paper: #fafaf8;
      --navy: #0f2342;
      --ink: #2b2b2b;
      --mist: #e8ebef;
      --mountain: #bfc6cf;
      --sakura: #e9b8c7;
      --soft-sakura: #f4dce4;
      --burgundy: #7c3646;
      --line: rgba(15, 35, 66, 0.12);
      --shadow: 0 24px 80px rgba(15, 35, 66, 0.08);
      --serif: "Cormorant Garamond", Georgia, serif;
      --sans: "Inter", Arial, sans-serif;
      --jp: "Noto Serif JP", "Yu Mincho", serif;
      --display: "Anton", "Inter", Arial, sans-serif;
      /* Single source of truth for body / paragraph copy size, used site-wide
         so every section's body text matches. UI chrome (nav, buttons, labels,
         stats, headings, and the larger intro .lead) keep their own sizes. */
      --body: 0.86rem;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: var(--sans);
      color: var(--ink);
      background: var(--white);
      line-height: 1.7;
    }

    a { color: inherit; text-decoration: none; }
    img, svg { display: block; max-width: 100%; }
    .page { overflow: hidden; background: var(--white); }

    .nav {
      position: fixed;
      z-index: 50;
      top: 0;
      left: 0;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
      padding: 14px clamp(20px, 4vw, 58px);
      background: rgba(255, 255, 255, 0.92);
      border-bottom: 1px solid rgba(15, 35, 66, 0.08);
      backdrop-filter: blur(18px);
      transform: translateY(-100%);
      opacity: 0;
      transition: transform 320ms ease, opacity 320ms ease;
    }

    .nav.scrolled {
      transform: translateY(0);
      opacity: 1;
    }

    .brand-mini {
      display: flex;
      align-items: center;
    }

    .brand-mark {
      width: auto;
      height: 52px;
      object-fit: contain;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: clamp(14px, 2.2vw, 34px);
      font-size: 0.88rem;
      font-weight: 600;
      color: rgba(43, 43, 43, 0.76);
    }

    .nav-links a { transition: color 180ms ease; }
    .nav-links a:hover { color: var(--burgundy); }

    .nav-cta,
    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 46px;
      padding: 0 22px;
      border: 1px solid var(--navy);
      border-radius: 999px;
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--white);
      background: var(--navy);
      transition: transform 180ms ease, background 180ms ease, border 180ms ease;
      white-space: nowrap;
    }

    .button.secondary {
      color: var(--navy);
      background: transparent;
      border-color: rgba(15, 35, 66, 0.22);
    }

    .nav-cta:hover,
    .button:hover {
      transform: translateY(-2px);
      background: var(--burgundy);
      border-color: var(--burgundy);
      color: var(--white);
    }

    /* ---- Hero: inset rounded card skeleton ---- */
    .hero {
      position: relative;
      padding: clamp(6px, 1vw, 12px) clamp(6px, 1vw, 12px) 40px;
      background: var(--white);
    }

    .hero-card {
      position: relative;
      width: min(1480px, 100%);
      margin: 0 auto;
      min-height: min(920px, 94vh);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: clamp(22px, 3vw, 38px);
      overflow: visible;
      isolation: isolate;
      color: var(--white);
      background: transparent;
    }

    /* The actual image shape, clipped with a flowing wavy bottom edge.
       Rounded top corners + a bottom edge where the white page sweeps
       upward (deepest on the left, where the bottom-left copy tucks in). */
    .hero-card::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background-image: url("https://images.unsplash.com/photo-1542051841857-5f90071e7989?auto=format&fit=crop&w=2200&q=80");
      background-size: cover;
      background-position: center 45%;
      border-radius: 44px;
      -webkit-clip-path: url(#heroShape);
      clip-path: url(#heroShape);
    }

    .hero-card::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        linear-gradient(160deg, rgba(15, 35, 66, 0.30) 0%, rgba(15, 35, 66, 0.20) 40%, rgba(15, 35, 66, 0.74) 100%);
      -webkit-clip-path: url(#heroShape);
      clip-path: url(#heroShape);
    }

    /* Floating toolbar inside the card */
    .hero-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      /* button now SITS inside the top-right white tab */
      padding-right: 0;
      /* pull the nav row up toward the top edge of the card */
      margin-top: -24px;
    }

    .hero-pills {
      display: flex;
      gap: 8px;
      padding: 6px;
      background: rgba(255, 255, 255, 0.92);
      border-radius: 999px;
      backdrop-filter: blur(8px);
    }

    .hero-pill {
      padding: 8px 16px;
      border-radius: 999px;
      font-size: 0.84rem;
      font-weight: 700;
      color: var(--navy);
      transition: background 160ms ease, color 160ms ease;
    }

    .hero-pill:hover { background: var(--navy); color: var(--white); }

    /* Hamburger button — hidden on desktop, shown on mobile (top-right). */
    .hero-burger {
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      width: 46px;
      height: 46px;
      flex-shrink: 0;
      padding: 0;
      border: 0;
      border-radius: 999px;
      cursor: pointer;
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(8px);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    }

    .hero-burger span {
      display: block;
      width: 20px;
      height: 2px;
      border-radius: 2px;
      background: var(--navy);
      transition: transform 240ms ease, opacity 200ms ease;
    }

    .hero-burger[aria-expanded="true"] span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }
    .hero-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .hero-burger[aria-expanded="true"] span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    /* Logo + nav pills grouped together on the left */
    .hero-nav {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    /* Logo sits on its own round background so it stays visible */
    .hero-brand {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 92px;
      height: 92px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(8px);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    }

    .hero-brand img {
      height: 72px;
      width: auto;
    }

    /* Compact CTA that fits inside the top-right white tab */
    .hero-book {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 38px;
      padding: 0 16px;
      border-radius: 999px;
      font-size: 0.8rem;
      font-weight: 700;
      white-space: nowrap;
      color: var(--white);
      background: var(--navy);
      border: 1px solid var(--navy);
      /* nudge up and to the right, into the corner of the white tab */
      margin: clamp(-22px, -2vw, -12px) clamp(-16px, -1.6vw, -8px) 0 0;
      transition: transform 180ms ease, background 180ms ease, border 180ms ease;
    }

    .hero-book:hover {
      transform: translateY(-2px);
      background: var(--burgundy);
      border-color: var(--burgundy);
      color: var(--white);
    }

    /* Headline sits in the lower-right of the image */
    .hero-headline {
      display: grid;
      gap: 12px;
      max-width: 620px;
      align-self: flex-end;
      text-align: right;
      margin-top: auto;
      margin-bottom: clamp(20px, 5vh, 56px);
      padding-right: clamp(20px, 4vw, 60px);
    }

    .hero-headline .kicker { align-self: end; }

    .hero-headline .kicker { color: var(--sakura); }
    .hero-headline h1 {
      color: var(--white);
      font-family: var(--display);
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: 0.01em;
      line-height: 0.95;
    }

    /* Three-column copy block below the card.
       Col 1 (left) starts up inside the swept white tab — see negative
       margin-top — and holds a small heading + copy + image card.
       Col 2 (middle) is the big headline + button.
       Col 3 (right) is the thumbnail feature list. */
    .hero-foot {
      position: relative;
      z-index: 2;
      /* same container width + horizontal padding as the hero card so the
         left column lines up with the hero card's left content edge and the
         feature list lines up with its right content edge */
      width: min(1480px, 100%);
      margin: clamp(28px, 3.5vw, 52px) auto 0;
      padding: 0 clamp(22px, 3vw, 38px);
      display: grid;
      grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr) minmax(0, 1.1fr);
      gap: clamp(26px, 4vw, 64px);
      align-items: start;
    }

    /* Left column lifts up into the bottom-left white tab of the hero. */
    .hero-foot-left {
      display: grid;
      justify-items: start;
      gap: 14px;
      max-width: 300px;
      margin-top: clamp(-200px, -16vw, -120px);
      /* heading, copy, and image start from the hero-foot container's own
         left content edge (the wider 1480px container). Every section below
         is aligned to THIS edge — see --content-pad below. */
      padding-left: 0;
    }

    .hero-foot-left h2 {
      margin-top: clamp(4px, 1.2vw, 14px);
      margin-bottom: 0;
      color: var(--navy);
      font-family: var(--display);
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: 0.01em;
      font-size: clamp(1.7rem, 2.6vw, 2.4rem);
      line-height: 1.0;
    }

    .hero-foot-left p {
      margin: 0;
      color: rgba(43, 43, 43, 0.72);
      font-size: var(--body);
      line-height: 1.55;
    }

    .hero-foot-left .left-card {
      width: 100%;
      justify-self: stretch;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      border-radius: 18px;
      box-shadow: 0 18px 50px rgba(15, 35, 66, 0.12);
    }

    .hero-foot-main {
      display: grid;
      gap: 16px;
      max-width: 480px;
      align-self: start;
      align-content: start;
    }

    .hero-foot-title {
      font-family: var(--display);
      color: var(--navy);
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: 0.01em;
      font-size: clamp(2rem, 3.4vw, 3.2rem);
      line-height: 0.98;
    }

    .hero-foot-main p {
      margin: 0;
      color: rgba(43, 43, 43, 0.78);
      font-size: var(--body);
    }

    /* Right column: a single vertical list of thumbnail + title + copy
       rows, divided by thin rules — mirrors the reference layout. */
    .hero-foot-feats {
      display: grid;
      gap: 0;
      padding-top: 4px;
      align-self: start;
    }

    .hero-feat {
      display: grid;
      grid-template-columns: 64px minmax(0, 1fr);
      gap: 18px;
      align-items: center;
      padding: 18px 0;
      border-bottom: 1px solid var(--line);
    }

    .hero-feat:first-child { padding-top: 0; }
    .hero-feat:last-child { border-bottom: 0; }

    .hero-feat-thumb {
      width: 64px;
      height: 64px;
      border-radius: 14px;
      object-fit: cover;
      background: var(--mist);
    }

    .hero-feat strong {
      display: block;
      color: var(--navy);
      font-weight: 700;
      font-size: 1rem;
      margin-bottom: 4px;
    }

    .hero-feat p {
      margin: 0;
      color: rgba(43, 43, 43, 0.68);
      font-size: var(--body);
      line-height: 1.5;
    }

    .hero-proof {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 4px;
      color: rgba(15, 35, 66, 0.7);
      font-size: 0.86rem;
      font-weight: 700;
    }

    .hero-proof span {
      padding: 8px 0;
      border-bottom: 1px solid rgba(124, 54, 70, 0.24);
    }

    .kicker {
      color: var(--burgundy);
      font-weight: 700;
      text-transform: uppercase;
      font-size: 0.78rem;
      letter-spacing: 0.18em;
    }

    h1, h2, h3 {
      margin: 0;
      font-family: var(--display);
      color: var(--navy);
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: 0.01em;
    }

    h1 { font-size: clamp(3rem, 8vw, 7.4rem); line-height: 0.92; }
    .hero h1 {
      max-width: 720px;
      font-size: clamp(2.1rem, 4vw, 3.6rem);
    }
    h2 { font-size: clamp(2.45rem, 5vw, 5rem); line-height: 0.98; }
    h3 { font-size: clamp(1.45rem, 2vw, 1.8rem); line-height: 1.1; }

    .lead {
      max-width: 780px;
      margin: 0;
      font-size: clamp(1.02rem, 1.35vw, 1.18rem);
      color: rgba(43, 43, 43, 0.78);
    }

    .hero .lead { max-width: 540px; }
    .actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 14px; margin-top: 10px; }

    section {
      position: relative;
      /* no horizontal padding here — .inner carries it, exactly like
         .trust-inner, so section content lines up with the hero-foot
         left column ("Built for…") instead of sitting further left */
      padding: clamp(78px, 10vw, 138px) 0;
    }

    .inner {
      /* same container width + horizontal padding as the hero-foot so the
         left edge matches "Built for…". The hero-foot sits inside .hero,
         which adds clamp(6px,1vw,12px) of its own padding; sections have no
         such wrapper, so we add that amount here to line the edges up. */
      width: min(1480px, 100%);
      margin: 0 auto;
      padding: 0 calc(clamp(22px, 3vw, 38px) + clamp(6px, 1vw, 12px));
    }

    .split {
      display: grid;
      grid-template-columns: minmax(0, 0.92fr) minmax(280px, 1.08fr);
      gap: clamp(36px, 7vw, 92px);
      align-items: start;
    }

    .section-copy {
      display: grid;
      gap: 18px;
    }

    .section-copy p { margin: 0; color: rgba(43, 43, 43, 0.78); font-size: var(--body); }

    .editorial-lines {
      display: grid;
      gap: 12px;
      margin-top: 10px;
      color: var(--navy);
      font-family: var(--serif);
      font-size: clamp(1.25rem, 2vw, 1.7rem);
      line-height: 1.15;
    }

    .editorial-lines span {
      padding-top: 14px;
      border-top: 1px solid rgba(15, 35, 66, 0.12);
    }

    /* Perspective band — quiet centered statement on paper */
    .perspective { background: var(--paper); text-align: center; }
    .perspective .inner { width: min(820px, 100%); display: grid; justify-items: center; gap: 16px; }

    .programs,
    .contact {
      isolation: isolate;
      overflow: hidden;
    }

    .programs::before,
    .contact::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background-size: cover;
      background-position: center;
      opacity: 0.075;
      mix-blend-mode: multiply;
      filter: grayscale(0.25) saturate(0.55);
    }

    .programs { background: var(--paper); }

    .programs::before {
      opacity: 0.06;
      background-image: linear-gradient(180deg, rgba(250,250,248,0.72), var(--paper)), url("https://images.unsplash.com/photo-1492571350019-22de08371fd3?auto=format&fit=crop&w=1800&q=80");
      background-position: center right;
    }

    .section-head {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 36px;
      margin-bottom: clamp(34px, 5vw, 58px);
    }

    .section-head .lead { max-width: 510px; }

    .grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .card {
      min-height: 260px;
      padding: 30px;
      background: var(--white);
      border: 1px solid rgba(15, 35, 66, 0.1);
      border-radius: 8px;
      box-shadow: 0 18px 50px rgba(15, 35, 66, 0.045);
      display: grid;
      align-content: start;
      gap: 16px;
    }

    .card.featured {
      grid-column: span 2;
      min-height: 300px;
      padding: clamp(30px, 4vw, 44px);
      background:
        linear-gradient(135deg, rgba(244, 220, 228, 0.54), rgba(255, 255, 255, 0.82) 36%),
        var(--white);
      border-color: rgba(124, 54, 70, 0.22);
    }

    .card .number {
      font-family: var(--serif);
      font-size: 2.1rem;
      line-height: 1;
      color: rgba(124, 54, 70, 0.44);
    }

    .card p, .testimonial p { margin: 0; color: rgba(43, 43, 43, 0.74); font-size: var(--body); }

    .why-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      border-top: 1px solid var(--line);
      border-left: 1px solid var(--line);
    }

    .reason {
      min-height: 370px;
      padding: 46px 30px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      display: grid;
      align-content: start;
      gap: 14px;
    }

    .reason span { display: none; }

    .reason p { margin: 0; color: rgba(43, 43, 43, 0.73); font-size: var(--body); }

    .testimonials { background: linear-gradient(180deg, var(--white), var(--paper)); }

    .testimonials .grid { gap: 20px; }

    /* The carousel arrows are injected by testimonials.js but are only used
       at phone widths (where the cards become a swipeable carousel). Hide
       them by default; the mobile breakpoint re-shows them. */
    .tcarousel-arrow { display: none; }

    .testimonial {
      position: relative;
      min-height: 280px;
      padding: 34px 30px 30px;
      background: var(--white);
      border: 1px solid rgba(15, 35, 66, 0.1);
      border-radius: 12px;
      box-shadow: var(--shadow);
      display: grid;
      grid-template-rows: auto auto 1fr auto;
      gap: 18px;
      overflow: hidden;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .testimonial::before {
      content: "";
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, var(--sakura), rgba(124, 54, 70, 0.45));
    }

    .testimonial:hover {
      transform: translateY(-4px);
      box-shadow: 0 26px 60px rgba(15, 35, 66, 0.12);
    }

    .testimonial .stars {
      display: flex;
      gap: 3px;
      color: #e0a106;
      font-size: 1rem;
      letter-spacing: 1px;
    }

    .testimonial p {
      font-size: var(--body);
      line-height: 1.65;
      color: rgba(43, 43, 43, 0.86);
    }

    .quote-mark {
      font-family: var(--serif);
      color: rgba(124, 54, 70, 0.22);
      font-size: 3.4rem;
      line-height: 0.5;
      display: block;
    }

    .testimonial .person {
      display: flex;
      align-items: center;
      gap: 14px;
      padding-top: 18px;
      border-top: 1px solid var(--line);
    }

    .testimonial .avatar {
      flex: 0 0 auto;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-family: var(--serif);
      font-weight: 600;
      font-size: 1.05rem;
      color: var(--white);
      background: linear-gradient(135deg, var(--navy), var(--sakura));
    }

    .testimonial .person-meta { display: grid; gap: 2px; }
    .testimonial .person-meta strong {
      font-size: 0.95rem;
      color: var(--navy);
      font-weight: 600;
    }
    .testimonial .person-meta span {
      font-size: 0.82rem;
      color: rgba(43, 43, 43, 0.6);
    }

    .contact {
      background:
        radial-gradient(circle at 82% 18%, rgba(244, 220, 228, 0.6), transparent 23%),
        var(--paper);
    }

    .contact::before {
      opacity: 0.065;
      background-image: linear-gradient(90deg, var(--paper), rgba(250,250,248,0.76)), url("https://images.unsplash.com/photo-1526481280693-3bfa7568e0f3?auto=format&fit=crop&w=1800&q=80");
      background-position: center right;
    }

    .contact-panel {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-areas:
        "intro cards"
        "intro cta";
      gap: clamp(28px, 4vw, 48px);
      align-items: start;
      padding: clamp(32px, 5vw, 62px);
      background: var(--white);
      border: 1px solid rgba(15, 35, 66, 0.1);
      border-radius: 22px;
      box-shadow: var(--shadow);
    }

    .contact-intro { grid-area: intro; }
    .contact-intro h2 { margin-bottom: 14px; }

    /* ---- Contact cards ---- */
    .contact-cards {
      grid-area: cards;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      align-content: start;
    }

    .contact-card {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--paper);
      transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
    }

    a.contact-card:hover {
      transform: translateY(-3px);
      border-color: var(--sakura);
      box-shadow: var(--shadow);
    }

    .contact-card.is-static { cursor: default; }

    .contact-card-ico {
      flex: none;
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: var(--white);
      border: 1px solid var(--line);
      font-size: 1.15rem;
    }

    .contact-card-body { display: grid; gap: 2px; min-width: 0; }

    .contact-card-body strong {
      color: var(--navy);
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
    }

    .contact-card-body span {
      color: var(--ink);
      font-size: 0.95rem;
      font-weight: 600;
      overflow-wrap: anywhere;
    }

    /* ---- Contact CTA ---- */
    .contact-cta {
      grid-area: cta;
      padding: clamp(22px, 3vw, 30px);
      border-radius: 18px;
      background:
        radial-gradient(circle at 88% 12%, rgba(233, 184, 199, 0.18), transparent 55%),
        var(--navy);
      color: var(--white);
    }

    .contact-cta h3 { color: var(--white); margin-bottom: 6px; }
    .contact-cta p { color: rgba(255, 255, 255, 0.78); margin-bottom: 18px; }
    .contact-cta .actions { margin: 0; }
    .contact-cta .button.secondary { color: var(--white); border-color: rgba(255,255,255,0.4); }

    footer {
      padding: 64px clamp(20px, 4vw, 58px) 56px;
      color: rgba(255, 255, 255, 0.72);
      background: var(--navy);
    }

    footer .inner {
      display: grid;
      grid-template-columns: minmax(0, 2fr) repeat(3, max-content);
      gap: 48px 52px;
      align-items: start;
      justify-content: space-between;
    }

    .footer-col { margin-top: 40px; }

    .footer-intro { max-width: 520px; }

    .footer-logo {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 130px;
      height: 130px;
      border-radius: 999px;
      background: #fff;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
      margin-bottom: 22px;
    }

    .footer-logo img {
      height: 96px;
      width: auto;
    }

    footer strong {
      display: block;
      font-family: var(--serif);
      color: var(--white);
      font-size: 1.8rem;
      line-height: 1;
      margin-bottom: 18px;
    }

    .footer-intro p {
      margin: 0;
      font-size: var(--body);
      line-height: 1.55;
      color: var(--white);
    }

    .footer-col h4 {
      margin: 0 0 26px;
      font-size: 0.74rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.55);
    }

    .footer-nav {
      display: flex;
      flex-direction: column;
      gap: 22px;
      margin: 0;
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--white);
    }

    .footer-nav a { transition: color 180ms ease; }
    .footer-nav a:hover { color: var(--sakura); }

    /* SEO link band — internal links to landing pages */
    .footer-seo {
      width: min(1480px, 100%);
      margin: 56px auto 0;
      padding: 36px calc(clamp(22px, 3vw, 38px) + clamp(6px, 1vw, 12px)) 0;
      border-top: 1px solid rgba(255, 255, 255, 0.16);
    }
    .footer-seo h4 {
      margin: 0 0 18px;
      font-size: 0.74rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.55);
    }
    .footer-seo-links {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 12px;
    }
    .footer-seo-links a {
      font-size: 0.84rem;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.72);
      padding: 6px 14px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 999px;
      transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
    }
    .footer-seo-links a:hover {
      color: var(--navy);
      background: var(--sakura);
      border-color: var(--sakura);
    }

    .footer-bottom {
      width: min(1480px, 100%);
      margin: 80px auto 0;
      padding: 0 calc(clamp(22px, 3vw, 38px) + clamp(6px, 1vw, 12px));
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 18px 40px;
    }

    .footer-bottom .footer-tagline {
      font-family: var(--serif);
      font-size: 1.5rem;
      color: var(--white);
      margin: 0;
    }

    .footer-legal {
      width: 100%;
      margin-top: 28px;
      padding-top: 20px;
      border-top: 1px solid rgba(255, 255, 255, 0.12);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px 30px;
    }

    .footer-bottom .footer-copy {
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.6);
      margin: 0;
    }

    .footer-bottom .footer-credit {
      text-align: right;
      font-size: 0.82rem;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.6);
      margin: 0;
    }

    .footer-bottom .footer-credit a {
      color: #3cb4ac;
      font-weight: 700;
      text-decoration: none;
      transition: opacity 180ms ease;
    }

    .footer-bottom .footer-credit a:hover { opacity: 0.75; }

    /* ---- Trust Bar ---- */
    .trust-bar {
      padding: 28px 0;
      background: var(--paper);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .trust-inner {
      /* match hero-foot container so the stats bar lines up with "Built for…"
         (+ the .hero wrapper padding the hero-foot inherits) */
      width: min(1480px, 100%);
      margin: 0 auto;
      padding: 0 calc(clamp(22px, 3vw, 38px) + clamp(6px, 1vw, 12px));
      display: flex;
      justify-content: space-between;
      gap: 16px 0;
      flex-wrap: wrap;
    }

    .trust-stat {
      text-align: left;
    }

    .trust-stat .stat-num {
      font-family: var(--serif);
      font-size: clamp(2rem, 3.5vw, 2.8rem);
      line-height: 1;
      color: var(--navy);
      font-weight: 700;
    }

    .trust-stat .stat-label {
      margin-bottom: 6px;
      font-size: 0.62rem;
      color: rgba(43, 43, 43, 0.68);
      text-transform: uppercase;
      letter-spacing: 0.16em;
    }

    /* ---- Industries ---- */
    /* Full-height white section that holds a pastel rounded panel,
       echoing the hero: colored shape floating on white, with two
       white "sweeps" cut into the bottom-left and bottom-right. */
    .industries {
      isolation: isolate;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      /* horizontal padding matches the hero so the navy panel's left/right
         edges line up exactly with the hero card */
      padding: clamp(14px, 2.5vh, 24px) clamp(6px, 1vw, 12px);
      /* --fill is driven by scroll (0 = white, 1 = full navy). The panel shape
         below fades from white to navy as the section enters from above. */
      --fill: 0;
      background: var(--white);
    }

    .industry-panel {
      position: relative;
      width: min(1480px, 100%);
      height: 100%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      padding: clamp(22px, 4vh, 48px) clamp(28px, 5vw, 80px) clamp(28px, 4vh, 48px);
      overflow: visible;
      isolation: isolate;
    }

    /* The pastel shape itself, clipped with the same kind of swept
       rounded-rect used in the hero (white tabs in BL + BR corners). */
    .industry-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      /* Same navy gradient, but each stop is mixed toward white by (1 - --fill)
         so the whole shape washes white -> blue as the section scrolls in. */
      background:
        linear-gradient(160deg,
          color-mix(in srgb, #16305c calc(var(--fill) * 100%), var(--white)) 0%,
          color-mix(in srgb, #0f2342 calc(var(--fill) * 100%), var(--white)) 100%);
      border-radius: 44px;
      transition: background-color 0.15s linear;
      -webkit-clip-path: url(#industryShape);
      clip-path: url(#industryShape);
    }

    .industry-panel .section-head { margin-bottom: clamp(10px, 2vh, 24px); }
    /* Text fades from the navy ink (readable on the white shape) to white as
       the panel fills, so it stays legible the whole way through. */
    .industry-panel .section-head .kicker {
      color: color-mix(in srgb, rgba(255, 255, 255, 0.7) calc(var(--fill) * 100%), #16305c);
      transition: color 0.15s linear;
    }
    .industry-panel .section-head h2 {
      color: color-mix(in srgb, var(--white) calc(var(--fill) * 100%), #0f2342);
      font-size: clamp(1.9rem, 4.2vh, 3.4rem);
      transition: color 0.15s linear;
    }
    .industry-panel .section-head .lead {
      color: color-mix(in srgb, rgba(255, 255, 255, 0.78) calc(var(--fill) * 100%), #16305c);
      transition: color 0.15s linear;
    }

    /* Overlapping fan of cards, center forward + two fanned behind.
       Grows to fill whatever height is left between heading + controls. */
    .industry-fan {
      position: relative;
      flex: 1;
      min-height: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .industry-stage {
      position: relative;
      width: min(420px, 72%);
      height: 78%;
      max-height: 78%;
    }

    .fan-card {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 100%;
      height: 100%;
      padding: clamp(20px, 3vh, 36px) clamp(22px, 3vw, 38px);
      /* Solid (fully opaque) frosted-look tint, no backdrop-filter: avoids the
         live-blur repaint stall AND keeps the front card from showing the
         cards stacked behind it. */
      background:
        linear-gradient(150deg, rgb(236, 241, 249) 0%, rgb(216, 226, 241) 100%);
      border: 1px solid rgba(255, 255, 255, 0.55);
      border-radius: 22px;
      box-shadow:
        0 30px 70px rgba(15, 35, 66, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
      display: grid;
      align-content: center;
      gap: clamp(8px, 1.4vh, 16px);
      transition: transform 420ms cubic-bezier(.22,.61,.36,1),
                  opacity 420ms ease;
      will-change: transform, opacity;
    }

    .fan-card .number { font-size: clamp(1.7rem, 3.4vh, 2.2rem); }
    .fan-card h3 { color: var(--navy); font-size: clamp(1.2rem, 2.4vh, 1.7rem); }
    .fan-card p { margin: 0; color: rgba(15, 35, 66, 0.82); font-size: var(--body); }

    .fan-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 2px 0 0;
      padding: 0;
      list-style: none;
    }

    .fan-tags li {
      padding: 5px 12px;
      border-radius: 999px;
      background: rgba(15, 35, 66, 0.08);
      border: 1px solid rgba(15, 35, 66, 0.18);
      color: rgba(15, 35, 66, 0.92);
      font-size: clamp(0.7rem, 1.4vh, 0.76rem);
      font-weight: 600;
      letter-spacing: 0.01em;
    }

    /* Position classes: center forward, two fanned + tilted behind,
       and a hidden pool for the rest. */
    .fan-card.is-center {
      transform: translate(0, 0) scale(1);
      opacity: 1;
      z-index: 3;
    }
    /* Side + hidden cards skip the live blur entirely — only the centered
       card pays for backdrop-filter, so each 2s tick stays smooth. */
    .fan-card.is-left,
    .fan-card.is-right,
    .fan-card.is-hidden-left,
    .fan-card.is-hidden-right {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
    .fan-card.is-left {
      transform: translate(-46%, 0) scale(0.9);
      opacity: 0.92;
      z-index: 2;
    }
    .fan-card.is-right {
      transform: translate(46%, 0) scale(0.9);
      opacity: 0.92;
      z-index: 2;
    }
    .fan-card.is-hidden-left,
    .fan-card.is-hidden-right {
      opacity: 0;
      pointer-events: none;
      z-index: 1;
    }
    .fan-card.is-hidden-left {
      transform: translate(-92%, 0) scale(0.82);
    }
    .fan-card.is-hidden-right {
      transform: translate(92%, 0) scale(0.82);
    }

    /* Carousel controls (arrows + dots), mirroring the reference. */
    .fan-controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: clamp(12px, 2vh, 24px);
      flex-shrink: 0;
    }

    .fan-arrow {
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      border: 1px solid rgba(15, 35, 66, 0.28);
      background: rgba(255, 255, 255, 0.6);
      color: var(--navy);
      font-size: 0.85rem;
      cursor: pointer;
      transition: background 160ms ease, color 160ms ease, transform 160ms ease;
    }

    .fan-arrow:hover {
      background: var(--navy);
      color: var(--white);
      transform: translateY(-2px);
    }

    .fan-dots { display: flex; gap: 7px; }

    .fan-dot {
      width: 6px;
      height: 6px;
      padding: 0;
      border-radius: 999px;
      border: 0;
      background: rgba(255, 255, 255, 0.4);
      cursor: pointer;
      transition: background 160ms ease, transform 160ms ease;
    }

    .fan-dot.active {
      background: #ffffff;
      transform: scale(1.25);
    }

    .industry-card .number { font-size: 2rem; }

    /* ---- Service card CTA ---- */
    .card .tag {
      font-size: 0.82rem;
      font-weight: 600;
      color: rgba(15, 35, 66, 0.6);
      letter-spacing: 0.01em;
    }

    .card-cta {
      align-self: end;
      margin-top: 4px;
      font-size: 0.86rem;
      font-weight: 700;
      color: var(--burgundy);
      transition: opacity 160ms ease;
    }

    .card-cta:hover { opacity: 0.7; }

    /* ---- Services mosaic (reference-style image + text cards) ---- */
    /* Whole section fits one viewport: heading + grid stacked, centered,
       grid takes the remaining height and splits it across 3 rows. */
    #services.programs {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-top: clamp(28px, 4vh, 56px);
      padding-bottom: clamp(28px, 4vh, 56px);
    }

    #services .inner {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
    }

    #services .section-head { margin-bottom: clamp(14px, 2.4vh, 32px); }

    .service-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      /* fixed, viewport-scaled rows so the whole grid stays short enough
         to sit (with the heading) inside one screen. Bottom row is taller
         because its narrow cards wrap text onto more lines. */
      grid-template-rows: 22vh 22vh 26vh;
      gap: 14px;
      flex: 1;
      min-height: 0;
      max-height: 100%;
      align-content: center;
    }

    /* Placement matched exactly to the reference mosaic:

       ┌───────────────┬──────────────────────────┐
       │  PHOTO (tall) │  text card  (top-right)   │  row 1
       │               ├──────────────────────────┤
       │               │  text card  (mid-right)   │  row 2
       ├───────┬───────┼────────────┬─────────────┤
       │ text  │ text  │   text     │   PHOTO     │  row 3
       └───────┴───────┴────────────┴─────────────┘

       Two photos book-end the grid (top-left, bottom-right);
       five text-only cards fill the remaining cells. */
    .svc-1 { grid-column: 1 / span 2; grid-row: 1 / span 2; } /* big photo, top-left */
    .svc-2 { grid-column: 3 / span 2; grid-row: 1; }          /* text, top-right */
    .svc-3 { grid-column: 3 / span 2; grid-row: 2; }          /* text, mid-right */
    .svc-4 { grid-column: 1; grid-row: 3; }                   /* text, bottom-left */
    .svc-5 { grid-column: 2; grid-row: 3; }                   /* text, bottom-mid */
    .svc-7 { grid-column: 3; grid-row: 3; }                   /* text (JLPT), bottom */
    .svc-6 { grid-column: 4; grid-row: 3; }                   /* photo, bottom-right */

    /* Base tile */
    .svc {
      position: relative;
      display: flex;
      border-radius: 18px;
      overflow: hidden;
      isolation: isolate;
    }

    /* Image-backed tiles (like the reference photos) */
    .svc.svc-media {
      color: var(--white);
      align-items: flex-end;
      padding: 26px;
      background-size: cover;
      background-position: center;
    }

    .svc.svc-media::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(180deg, rgba(15, 35, 66, 0.05) 0%, rgba(15, 35, 66, 0.78) 100%);
    }

    .svc-media .svc-media-label {
      font-family: var(--display);
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: 0.01em;
      line-height: 1;
      color: var(--white);
    }

    /* Text tiles */
    .svc.svc-text {
      flex-direction: column;
      justify-content: space-between;
      gap: 10px;
      padding: clamp(18px, 2.4vh, 28px) clamp(20px, 1.6vw, 30px);
      background: var(--white);
      border: 1px solid rgba(15, 35, 66, 0.1);
      box-shadow: 0 18px 50px rgba(15, 35, 66, 0.045);
    }

    /* Wide text tiles (top-right pair): content left, EXPLORE on the
       far right edge, vertically centered — as in the reference. */
    .svc.svc-text.wide {
      flex-direction: row;
      align-items: center;
      gap: 28px;
      padding: clamp(18px, 2.4vh, 26px) clamp(24px, 2vw, 32px);
    }

    .svc.svc-text.wide .svc-head { flex: 1; }
    .svc.svc-text.wide .svc-explore { margin-top: 0; flex-shrink: 0; }

    /* Narrow bottom text cards: EXPLORE follows the copy with a fixed
       gap (not pinned to the card bottom), so it sits a consistent
       distance below the text in both cards. */
    .svc-4, .svc-5, .svc-7 {
      justify-content: flex-start;
      gap: clamp(10px, 1.4vh, 18px);
      padding: clamp(14px, 1.6vh, 22px) clamp(18px, 1.4vw, 26px);
    }
    /* Educational Exchange card has a longer heading; keep EXPLORE visible */
    .svc-7 { overflow: visible; }
    .svc-4 .svc-head, .svc-5 .svc-head, .svc-7 .svc-head { flex: 0 0 auto; }
    .svc-4 .svc-explore, .svc-5 .svc-explore, .svc-7 .svc-explore {
      margin-top: 0;
      align-self: flex-start;
    }

    /* Accent (sakura-tinted) text tile to echo the reference's notched cards */
    .svc.svc-text.accent {
      background:
        linear-gradient(135deg, rgba(244, 220, 228, 0.6), rgba(255, 255, 255, 0.85) 46%),
        var(--white);
      border-color: rgba(124, 54, 70, 0.2);
    }

    .svc-num {
      font-family: var(--serif);
      font-size: 1.9rem;
      line-height: 1;
      color: rgba(124, 54, 70, 0.42);
    }

    .svc-head {
      display: grid;
      gap: 8px;
    }

    .svc-text h3 {
      font-size: clamp(1.1rem, 1.4vw + 0.3vh, 1.45rem);
      line-height: 1.08;
    }

    .svc-text p {
      margin: 0;
      color: rgba(43, 43, 43, 0.74);
      font-size: var(--body);
      line-height: 1.45;
    }

    /* Photo label scales with viewport so it never clips short screens */
    .svc-media .svc-media-label {
      font-size: clamp(1.3rem, 1vw + 1vh, 1.7rem);
    }

    /* EXPLORE control: arrow chip + label, mirroring the reference */
    .svc-explore {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      margin-top: 18px;
      font-size: 0.74rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--navy);
      transition: gap 180ms ease, color 180ms ease;
    }

    .svc-explore .arrow {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      flex-shrink: 0;
      border-radius: 999px;
      border: 1px solid rgba(15, 35, 66, 0.25);
      font-size: 0.95rem;
      transition: background 180ms ease, color 180ms ease, border 180ms ease;
    }

    .svc-explore:hover { gap: 16px; color: var(--burgundy); }
    .svc-explore:hover .arrow {
      background: var(--burgundy);
      border-color: var(--burgundy);
      color: var(--white);
    }

    /* On image tiles the explore label sits in the corner, light-on-dark */
    .svc-media .svc-explore {
      position: absolute;
      top: 22px;
      right: 22px;
      margin: 0;
      color: var(--white);
    }

    .svc-media .svc-explore .arrow {
      border-color: rgba(255, 255, 255, 0.6);
      color: var(--white);
    }

    .svc-media .svc-explore:hover { color: var(--white); }
    .svc-media .svc-explore:hover .arrow {
      background: var(--white);
      border-color: var(--white);
      color: var(--navy);
    }

    @media (max-width: 960px) {
      /* release the one-viewport constraint; let the section flow */
      #services.programs { min-height: 0; display: block; }
      #services .inner { display: block; }
      .service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        grid-auto-rows: 220px;
        flex: none;
      }
      /* drop explicit placement; let cards flow in two columns */
      .svc-1, .svc-2, .svc-3, .svc-4, .svc-5, .svc-6, .svc-7 {
        grid-column: auto;
        grid-row: auto;
      }
      .svc-1, .svc-6 { grid-column: 1 / span 2; } /* photos go full-width */
      .svc.svc-text.wide { flex-direction: column; align-items: flex-start; }
      .svc.svc-text.wide .svc-explore { margin-top: 14px; }
    }

    @media (max-width: 640px) {
      .service-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
      .svc-1, .svc-6 { grid-column: auto; }
      .svc.svc-media { min-height: 240px; }
      .svc.svc-text { min-height: 200px; }
    }

    /* ---- How We Work ---- */
    .process { background: var(--paper); }
    .process .section-head { margin-bottom: clamp(36px, 6vh, 64px); }

    /* editorial big-number row */
    .steps {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(28px, 4vw, 64px);
    }

    .step {
      position: relative;
      display: grid;
      align-content: start;
      gap: 12px;
      padding-top: clamp(70px, 8vw, 104px);
    }

    /* large ghosted outline number behind the text */
    .step .step-num {
      position: absolute;
      top: 0;
      left: -2px;
      font-family: var(--display);
      font-size: clamp(4.5rem, 8vw, 7rem);
      line-height: 0.8;
      color: transparent;
      -webkit-text-stroke: 2px rgba(124, 54, 70, 0.42);
      transition: color 0.4s ease, -webkit-text-stroke-color 0.4s ease;
      pointer-events: none;
    }

    .step:hover .step-num {
      color: rgba(124, 54, 70, 0.1);
      -webkit-text-stroke-color: var(--burgundy);
    }

    /* short accent rule under the number */

    .step-tag {
      margin: 0;
      font-family: var(--sans);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--burgundy);
    }

    .step h3 {
      margin: 0;
      font-size: clamp(1.2rem, 1.5vw, 1.45rem);
      letter-spacing: 0.01em;
    }

    .step p { margin: 0; color: rgba(43, 43, 43, 0.76); font-size: var(--body); }

    /* ---- FAQ ---- */
    .faq-list {
      width: min(820px, 100%);
      margin: 0 auto;
    }

    .faq-item { border-bottom: 1px solid var(--line); }

    .faq-q {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 22px 0;
      background: transparent;
      border: 0;
      cursor: pointer;
      text-align: left;
      font-family: var(--serif);
      font-size: clamp(1.15rem, 1.6vw, 1.4rem);
      color: var(--navy);
      font-weight: 700;
    }

    .faq-icon {
      flex: 0 0 auto;
      font-family: var(--sans);
      font-size: 1.5rem;
      line-height: 1;
      color: var(--burgundy);
      transition: transform 200ms ease;
    }

    .faq-item.open .faq-icon { transform: rotate(45deg); }

    .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height 280ms ease;
    }

    .faq-a p {
      margin: 0;
      padding: 0 0 22px;
      font-size: var(--body);
      color: var(--ink);
    }

    /* ---- Contact response note ---- */
    .response-note {
      font-size: 0.82rem;
      color: var(--burgundy);
      font-weight: 600;
      margin-top: 8px;
    }

    /* ---- Location / Map block ---- */
    .map-block {
      margin-top: clamp(32px, 5vw, 56px);
      display: grid;
      gap: 16px;
    }

    .map-block h3 { max-width: 720px; }

    .map-frame {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 6;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid rgba(15, 35, 66, 0.1);
      box-shadow: var(--shadow);
    }

    .map-frame iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
      filter: grayscale(0.25) contrast(1.02);
    }

    @media (max-width: 640px) {
      .map-frame { aspect-ratio: 4 / 3; }
    }

    /* ---- WhatsApp Float ---- */
    .float-stack {
      position: fixed;
      bottom: 16px;
      right: 16px;
      z-index: 999;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 14px;
    }

    .wa-float {
      position: relative;
      display: flex;
      align-items: center;
      gap: 0;
      width: 46px;
      height: 46px;
      padding: 0;
      background: #25D366;
      color: #fff;
      border-radius: 999px;
      font-size: 0.88rem;
      font-weight: 700;
      box-shadow: 0 8px 28px rgba(37, 211, 102, 0.38);
      text-decoration: none;
      overflow: hidden;
      white-space: nowrap;
      transition: transform 180ms ease, box-shadow 180ms ease,
                  width 220ms ease, padding 220ms ease, gap 220ms ease;
    }

    .wa-float:hover {
      width: auto;
      padding: 0 22px 0 16px;
      gap: 10px;
      transform: translateY(-3px);
      box-shadow: 0 12px 36px rgba(37, 211, 102, 0.48);
      color: #fff;
    }

    .wa-float svg {
      width: 22px;
      height: 22px;
      fill: currentColor;
      flex-shrink: 0;
      margin: 0 auto;
    }

    /* Label hidden until hover */
    .wa-float span {
      max-width: 0;
      opacity: 0;
      transition: max-width 220ms ease, opacity 180ms ease;
    }

    .wa-float:hover span {
      max-width: 160px;
      opacity: 1;
    }

    .scroll-top {
      width: 46px;
      height: 46px;
      border: none;
      border-radius: 999px;
      background: var(--navy);
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 28px rgba(11, 26, 56, 0.34);
      /* Hidden while in the hero: collapse height so WhatsApp sits at bottom. */
      height: 0;
      width: 0;
      opacity: 0;
      transform: translateY(10px) scale(0.8);
      pointer-events: none;
      transition: height 240ms ease, width 240ms ease, opacity 220ms ease,
                  transform 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms ease;
    }

    .float-stack.show-top .scroll-top {
      height: 46px;
      width: 46px;
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }

    /* Over a dark section: flip to white pill with navy arrow. */
    .float-stack.on-dark .scroll-top {
      background: #fff;
      color: var(--navy);
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32);
    }

    .float-stack.on-dark .scroll-top:hover {
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.42);
    }

    .scroll-top:hover {
      transform: translateY(-3px) scale(1);
      box-shadow: 0 12px 36px rgba(11, 26, 56, 0.46);
    }

    .scroll-top svg {
      width: 20px;
      height: 20px;
      fill: currentColor;
    }

    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 800ms ease, transform 800ms ease;
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ===================================================================
       Text entrance animations
       -------------------------------------------------------------------
       Hero headline rises into place on load; every section's text
       animates as it scrolls into view, with a different motion per
       data-anim value. Each runs once (the .in-view class is added by
       the IntersectionObserver and never removed).
       =================================================================== */

    /* --- Word/line "rise" used for the hero headline on load --- */
    /* Each line is masked; its inner span starts pushed down and rises up
       from where it stands, like type setting into place. */
    .rise-line {
      display: block;
      overflow: hidden;
    }
    .rise-line > span {
      display: block;
      transform: translateY(110%);
      transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
      will-change: transform;
    }
    .rise-in .rise-line > span {
      transform: translateY(0);
    }
    /* Stagger successive lines when the parent has multiple .rise-line */
    .rise-in .rise-line:nth-child(2) > span { transition-delay: 90ms; }
    .rise-in .rise-line:nth-child(3) > span { transition-delay: 180ms; }
    .rise-in .rise-line:nth-child(4) > span { transition-delay: 270ms; }

    /* The kicker above the hero headline fades+rises slightly, slightly
       ahead of the headline lines. */
    .hero-headline .kicker {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    .hero-headline.rise-in .kicker {
      opacity: 1;
      transform: translateY(0);
    }

    /* --- Scroll-triggered, data-driven entrances --- */
    /* Base hidden state for any element carrying a [data-anim] value. */
    [data-anim] {
      opacity: 0;
      transition:
        opacity 820ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 820ms cubic-bezier(0.22, 1, 0.36, 1),
        clip-path 820ms cubic-bezier(0.22, 1, 0.36, 1);
      will-change: opacity, transform;
    }
    [data-anim].in-view {
      opacity: 1;
      transform: none;
      clip-path: inset(0 0 0 0);
    }

    /* rise: comes up from below where it sits (default for headings) */
    [data-anim="rise"]    { transform: translateY(40px); }
    /* fade-up: gentler upward fade for body copy */
    [data-anim="fade-up"] { transform: translateY(22px); }
    /* from-left / from-right: slide in horizontally */
    [data-anim="from-left"]  { transform: translateX(-46px); }
    [data-anim="from-right"] { transform: translateX(46px); }
    /* zoom: scale up softly into place */
    [data-anim="zoom"]    { transform: scale(0.9); }
    /* wipe: reveal upward behind a clip mask (good for big display heads) */
    [data-anim="wipe"] {
      transform: translateY(28px);
      clip-path: inset(0 0 100% 0);
    }

    /* Optional per-element delay for hand-tuned staggering. */
    [data-anim-delay="1"] { transition-delay: 90ms; }
    [data-anim-delay="2"] { transition-delay: 180ms; }
    [data-anim-delay="3"] { transition-delay: 270ms; }
    [data-anim-delay="4"] { transition-delay: 360ms; }

    /* Auto-stagger: children of a [data-stagger] container animate in
       sequence as the container enters view. */
    [data-stagger] > [data-anim] { transition-delay: 0ms; }
    [data-stagger].in-view > [data-anim]:nth-child(1) { transition-delay: 60ms; }
    [data-stagger].in-view > [data-anim]:nth-child(2) { transition-delay: 150ms; }
    [data-stagger].in-view > [data-anim]:nth-child(3) { transition-delay: 240ms; }
    [data-stagger].in-view > [data-anim]:nth-child(4) { transition-delay: 330ms; }
    [data-stagger].in-view > [data-anim]:nth-child(5) { transition-delay: 420ms; }
    [data-stagger].in-view > [data-anim]:nth-child(6) { transition-delay: 510ms; }

    @media (prefers-reduced-motion: reduce) {
      .rise-line > span,
      [data-anim] { transition: none !important; }
      .rise-line > span { transform: none !important; }
      [data-anim] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
      .hero-headline .kicker { opacity: 1 !important; transform: none !important; }
    }

    #why {
      min-height: 100vh;
      display: flex;
      padding-bottom: 0;
    }

    #why .inner {
      display: flex;
      flex-direction: column;
    }

    #why .why-wrap {
      margin-top: auto;
    }

    .why-wrap {
      overflow: hidden;
    }

    .why-wrap .why-grid {
      opacity: 0;
      transform: translateX(105%);
      transition: opacity 900ms ease, transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .why-wrap.visible .why-grid {
      opacity: 1;
      transform: translateX(0);
    }

    @media (max-width: 960px) {
      .nav-links { display: none; }
      .split,
      .hero-foot {
        grid-template-columns: 1fr;
      }
      /* Footer: intro spans the top, the 3 link columns sit in a compact
         row beneath it — instead of one tall single-column stack. */
      footer { padding: 48px clamp(20px, 4vw, 58px) 40px; }
      footer .inner {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 28px 32px;
      }
      .footer-intro { grid-column: 1 / -1; }
      .footer-col { margin-top: 0; }
      .footer-logo { width: 104px; height: 104px; margin-bottom: 16px; }
      .footer-logo img { height: 76px; }
      .footer-nav { gap: 14px; font-size: 0.98rem; }
      .footer-col h4 { margin-bottom: 16px; }
      .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 40px;
      }
      .footer-bottom .footer-credit { text-align: left; }
      .contact-panel {
        grid-template-columns: 1fr;
        grid-template-areas:
          "intro"
          "cards"
          "cta";
      }
      .hero-foot-main { max-width: none; }
      .hero-foot-left { max-width: none; margin-top: 0; padding-left: 0; }
      .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .section-head { display: grid; align-items: start; }
      .steps { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 44px); }
      .step { padding-top: 64px; }
      .step .step-num { font-size: 4rem; }

      /* Hero: the SVG clip-path tabs are tuned for a wide card and look
         awkward when the card gets tall/narrow. Drop the clip-path and
         use a plain rounded rectangle; left-align the headline so it no
         longer crowds the right edge on smaller screens. */
      /* Make the hero fill the viewport on first view (tablet): the photo
         should read as a full-height cover, not a capped card. Use svh so
         the card tracks the actual visible viewport. */
      .hero-card {
        min-height: 100vh;
        min-height: 100svh;
        height: 100svh;
      }
      .hero-card::before,
      .hero-card::after {
        -webkit-clip-path: none;
        clip-path: none;
        border-radius: 32px;
        /* Pin the image layers to the largest viewport height so the cover
           doesn't rescale ("zoom") as the browser toolbar shows/hides. */
        top: 0;
        bottom: auto;
        height: 100lvh;
      }
      /* Push the toolbar (logo, nav pills, CTA) further down from the top
         edge now that the card is full-height. */
      .hero-toolbar { margin-top: clamp(20px, 4vh, 48px); }
      .hero-headline {
        text-align: left;
        align-self: flex-start;
        padding-right: 0;
        /* Lift the headline up from the very bottom and enlarge it so it
           anchors the full-height cover. */
        margin-bottom: clamp(32px, 7vh, 80px);
      }
      .hero-headline h1 { font-size: clamp(3.4rem, 7.5vw, 5.4rem); }
      .hero-headline .kicker { align-self: start; }

      /* Industries: release the locked 100vh height so the fan carousel
         can breathe; drop the clip-path tabs for a clean rounded panel. */
      .industries { height: auto; min-height: 0; }
      .industry-panel::before {
        -webkit-clip-path: none;
        clip-path: none;
        border-radius: 32px;
      }
      .industry-stage { width: min(440px, 88%); height: auto; min-height: 340px; }

      /* Why: release the locked 100vh height. */
      #why { min-height: 0; }
      .why-wrap .why-grid { transform: none; opacity: 1; }
    }

    @media (max-width: 640px) {
      .nav {
        padding: 14px 18px;
      }
      .brand-mark { height: 42px; }
      .nav-cta { display: none; }
      /* Full-bleed, full-height hero image on mobile: drop the page
         padding and rounded corners so the photo fills the viewport.
         Use dvh so the card tracks the actual visible viewport (no white
         strip under the image as the browser bars show/hide). */
      .hero { padding: 0; background: transparent; }
      .hero-card {
        min-height: 100vh;
        min-height: 100svh;
        height: 100svh;
        border-radius: 0;
        padding: 20px;
        margin-bottom: 0;
      }
      /* Pin the image/overlay layers to the LARGEST viewport height (toolbar
         hidden). They're already sized for the tallest state, so when the
         browser toolbar slides away on scroll the cover image doesn't grow /
         rescale — which is what reads as the image "zooming". */
      .hero-card::before,
      .hero-card::after {
        border-radius: 0;
        top: 0;
        bottom: auto;
        height: 100lvh;
      }
      .hero-toolbar { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding-right: 0; margin-top: 0; }
      .hero-nav { flex-direction: row; align-items: center; gap: 12px; }
      .hero-brand { width: 64px; height: 64px; }
      .hero-brand img { height: 48px; }
      .hero-book { display: none; }
      .hero-burger { display: flex; }

      .hero-toolbar { position: relative; }
      /* Pills become a dropdown panel anchored under the burger (top-right). */
      .hero-pills {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        z-index: 30;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        min-width: 200px;
        padding: 10px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.97);
        box-shadow: 0 18px 50px rgba(15, 35, 66, 0.22);
        transform-origin: top right;
        transform: scale(0.92) translateY(-6px);
        opacity: 0;
        visibility: hidden;
        transition: transform 200ms ease, opacity 180ms ease, visibility 0s linear 180ms;
      }
      .hero-pills.open {
        transform: scale(1) translateY(0);
        opacity: 1;
        visibility: visible;
        transition: transform 200ms ease, opacity 180ms ease;
      }
      .hero-pill { text-align: center; padding: 12px 16px; }
      .hero-headline { margin-bottom: clamp(40px, 12vh, 96px); }
      .hero-headline h1 { font-size: clamp(2.6rem, 10vw, 3.5rem); }
      .hero-headline .rise-line { display: block; text-wrap: balance; }
      .hero-foot { margin-top: 24px; padding: 0 20px; gap: 26px; }
      .hero-foot-left .left-card { aspect-ratio: 16 / 9; }
      .actions { width: 100%; }
      .button { width: 100%; }
      .grid,
      .why-grid { grid-template-columns: 1fr; }
      .card.featured { grid-column: auto; }
      .card, .reason, .testimonial { min-height: auto; }

      /* Testimonials become a swipeable carousel on phones. */
      .testimonials .grid {
        grid-template-columns: none;
        display: flex;
        flex-wrap: nowrap;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* let cards peek past the section padding edges */
        margin: 0 -20px;
        padding: 4px 20px 12px;
      }
      .testimonials .grid::-webkit-scrollbar { display: none; }
      .testimonials .testimonial {
        flex: 0 0 90%;
        width: 90%;
        max-width: 360px;
        min-height: 300px;
        padding: 34px 30px 30px;
        scroll-snap-align: center;
      }
      .tcarousel { position: relative; }
      .tcarousel-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 3;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid rgba(15, 35, 66, 0.12);
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(4px);
        box-shadow: 0 6px 18px rgba(15, 35, 66, 0.16);
        color: var(--ink, #102342);
        font-size: 1.5rem;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0 0 3px;
      }
      .tcarousel-prev { left: -2px; }
      .tcarousel-next { right: -2px; }
      .tcarousel-arrow:active { transform: translateY(-50%) scale(0.92); }
      .reason { min-height: auto; padding: 32px 24px; }
      .contact-panel { padding: 26px; }
      .contact-cards { grid-template-columns: 1fr; }
      .trust-inner { gap: 24px 20px; justify-content: flex-start; }
      .trust-stat { flex: 1 1 40%; }
      .trust-stat .stat-num { font-size: clamp(1.7rem, 7vw, 2.2rem); }

      /* Industry fan: at phone widths the side cards (±46%) fall off
         screen and overlap the centre card. Collapse the fan to a single
         centred card — the arrows/dots still page through them. */
      .industries { padding-left: 16px; padding-right: 16px; }
      .industry-panel { padding: 28px 20px 32px; }
      .industry-stage { width: 100%; min-height: 380px; }
      .fan-card.is-left,
      .fan-card.is-right {
        transform: translate(0, 0) scale(0.92);
        opacity: 0;
        pointer-events: none;
      }

      /* Always icon-only on touch devices (no reliable hover) */
      .wa-float, .wa-float:hover { width: 46px; padding: 0; gap: 0; }
      .wa-float span, .wa-float:hover span { max-width: 0; opacity: 0; }
      .float-stack { bottom: 12px; right: 12px; }
    }

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