@charset "utf-8";

/* ==========================================================================
   SHARK CONSULTING — Foreign Entrepreneur Support in Japan (English LP)
   /en/foreign-entrepreneur/

   Self-contained stylesheet. The site-wide /en/assets/css/style.css is NOT
   loaded on this page, so a minimal reset lives here. Every rule is scoped
   to .page-foreign-entrepreneur and cannot reach existing pages.

   Colour and layout values are taken from the existing English site
   (en/assets/scss/_variables-site.scss and _base.scss). Values marked
   "derived" are tints of those same tokens, added where the original
   palette had no equivalent or did not meet WCAG AA contrast.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Reset
   -------------------------------------------------------------------------- */

.page-foreign-entrepreneur *,
.page-foreign-entrepreneur *::before,
.page-foreign-entrepreneur *::after {
  box-sizing: border-box;
}

/* The browser default body margin would otherwise leave an 8px strip down
   both edges, so full-bleed sections could never reach the viewport. */
body.page-foreign-entrepreneur {
  margin: 0;
  padding: 0;
}

.page-foreign-entrepreneur h1,
.page-foreign-entrepreneur h2,
.page-foreign-entrepreneur h3,
.page-foreign-entrepreneur p,
.page-foreign-entrepreneur ul,
.page-foreign-entrepreneur ol,
.page-foreign-entrepreneur li,
.page-foreign-entrepreneur figure,
.page-foreign-entrepreneur figcaption {
  margin: 0;
  padding: 0;
}

.page-foreign-entrepreneur ul,
.page-foreign-entrepreneur ol {
  list-style: none;
}

.page-foreign-entrepreneur img,
.page-foreign-entrepreneur svg {
  display: block;
  max-width: 100%;
}

.page-foreign-entrepreneur img {
  height: auto;
}

.page-foreign-entrepreneur a {
  color: inherit;
  text-decoration: none;
}


/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

.page-foreign-entrepreneur {
  /* Colour — red / black / beige / pink only, as used across the existing
     English site. No blue: $cl-blue appears there solely in the unused
     .text-blue utility, so it is not part of the site's actual palette. */
  --lp-color-accent:        #C30E23;  /* $cl-accent */
  --lp-color-accent-dark:   #96091A;  /* derived — CTA hover */
  --lp-color-cta:           var(--lp-color-accent);
  --lp-color-text:          #222;     /* $cl-black */
  --lp-color-text-sub:      #4C4C4C;  /* derived — 8.6:1 on white */
  --lp-color-muted:         #666;     /* derived — 5.7:1 on white ($cl-gray #888 is 3.5:1, fails AA) */
  --lp-color-border:        #CCC;     /* $cl-gray-medium */
  --lp-color-hairline:      #E6E6E6;  /* derived */
  --lp-color-background:    #FFF;     /* $cl-white */
  --lp-color-tint:          #FFF7EA;  /* $cl-beige */
  --lp-color-marker:        rgba(255, 192, 203, 0.8);  /* .marker on the existing site */

  /* Layout — %base-padding and %narrow-padding cap the box including its
     padding (border-box), so these are outer widths: 1160 / 840 of content. */
  --lp-container-width:     1280px;
  --lp-container-narrow:    960px;
  --lp-gutter:              60px;
  --lp-header-height:       80px;  /* matches #header on the existing English site */

  /* Type — mySize(16, 16, 18, 768) from _base.scss, i.e. the site's body size */
  --lp-font-body:           clamp(16px, 2.083vw, 18px);

  /* Rhythm */
  --lp-section-space:       120px;
  --lp-measure:             68ch;

  color: var(--lp-color-text);
  background: var(--lp-color-background);
  font-family: "Rubik", Meiryo, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--lp-font-body);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

@media only screen and (max-width: 960px) {
  .page-foreign-entrepreneur {
    --lp-gutter: 20px;
    --lp-section-space: 88px;
  }
}

@media only screen and (max-width: 767px) {
  .page-foreign-entrepreneur {
    --lp-header-height: 60px;
    --lp-section-space: 72px;
  }
}

html:has(.page-foreign-entrepreneur) {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}


/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.page-foreign-entrepreneur .lp-container {
  width: 100%;
  max-width: var(--lp-container-width);
  margin-inline: auto;
  padding-inline: var(--lp-gutter);
}

.page-foreign-entrepreneur .lp-container--narrow {
  max-width: var(--lp-container-narrow);
}

.page-foreign-entrepreneur .lp-section {
  padding-block: var(--lp-section-space);
}

.page-foreign-entrepreneur .lp-section--tinted {
  background: var(--lp-color-tint);
}

/* World map backdrop, inlined so the routes can be animated. It sits behind
   the copy, is marked presentational, and never intercepts pointer events. */
.page-foreign-entrepreneur .lp-section--world {
  position: relative;
  overflow: hidden;
}

.page-foreign-entrepreneur .lp-world {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0.75;
  pointer-events: none;
}

.page-foreign-entrepreneur .lp-section--world > .lp-container {
  position: relative;
  z-index: 1;
}

.page-foreign-entrepreneur .lp-world__land {
  fill: var(--lp-color-accent);
  fill-opacity: 0.16;
}

.page-foreign-entrepreneur .lp-world__routes {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.page-foreign-entrepreneur .lp-world__arc {
  stroke: var(--lp-color-accent);
  stroke-opacity: 0.2;
}

.page-foreign-entrepreneur .lp-world__hub {
  fill: var(--lp-color-accent);
  fill-opacity: 0.34;
}

/* Routes travel from each overseas city towards Tokyo. Every path carries
   pathLength="1", so one shared duration lands them all at 1.5s regardless
   of how far they actually run. Paths are drawn destination-to-Tokyo, so the
   offset runs 1 -> 0 to reveal from the far end inwards.

   The dash properties live inside the keyframes on purpose. The resting
   style leaves the routes fully drawn, so anywhere the animation does not
   run — Reduce Motion, Low Power Mode, an engine that skips it — the map
   still shows every route instead of going blank.

   6s cycle: 1.5s travel, 3s held, then a fade and a silent reset. Only runs
   while the section is on screen — the observer clears the attribute again
   on the way out, so nothing animates off-screen. */
.has-js .page-foreign-entrepreneur .lp-world[data-arcs="shown"] .lp-world__arc {
  animation: lp-arc-arrive 6s linear infinite;
}

.has-js .page-foreign-entrepreneur .lp-world[data-arcs="shown"] .lp-world__hub {
  animation: lp-hub-land 6s ease-out infinite;
}

@keyframes lp-arc-arrive {
  0% {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    stroke: #E4808F;
    stroke-opacity: 0.34;
  }
  25% {
    stroke-dashoffset: 0;
    stroke: var(--lp-color-accent);
    stroke-opacity: 0.2;
    animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
  }
  80% {
    stroke-dashoffset: 0;
    stroke: var(--lp-color-accent);
    stroke-opacity: 0.2;
  }
  94% {
    stroke-dashoffset: 0;
    stroke: var(--lp-color-accent);
    stroke-opacity: 0;
  }
  94.01%,
  100% {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    stroke: #E4808F;
    stroke-opacity: 0.34;
  }
}

@keyframes lp-hub-land {
  0%, 20%   { fill-opacity: 0.34; r: 7; }
  27%       { fill-opacity: 0.7;  r: 11; }
  36%, 100% { fill-opacity: 0.34; r: 7; }
}

@media only screen and (max-width: 767px) {
  .page-foreign-entrepreneur .lp-world {
    opacity: 0.6;
  }
}

.page-foreign-entrepreneur .lp-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--lp-color-text);
  color: #FFF;
  font-weight: 500;
}

/* Highlighter emphasis — same treatment as .marker on the existing site.
   Used at two points only: the hero subtitle and the mission statement. */
.page-foreign-entrepreneur .lp-marker {
  text-decoration: underline;
  text-decoration-thickness: 0.5em;
  text-decoration-color: var(--lp-color-marker);
  text-underline-offset: -0.2em;
  text-decoration-skip-ink: none;
}

.page-foreign-entrepreneur .lp-skip-link:focus-visible {
  left: 0;
}


/* --------------------------------------------------------------------------
   4. Type
   -------------------------------------------------------------------------- */

/* Section heading — mirrors the site-wide .ttl-section: centred, with a red
   pill rule beneath. Same scale as .ttl-section on the existing site: clamp(28px, 4vw, 54px)
   at line-height 1.5, with 90px of clearance below (24px of it taken by the
   pill, matching the site's -2rem offset). */
.page-foreign-entrepreneur .lp-section-heading {
  position: relative;
  margin-bottom: 66px;
  padding-bottom: 24px;
  font-size: clamp(28px, 4vw, 54px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-align: center;
  text-wrap: balance;
}

.page-foreign-entrepreneur .lp-section-heading::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 56px;
  height: 6px;
  border-radius: 100vh;
  background: var(--lp-color-accent);
}

.page-foreign-entrepreneur .lp-section-lead {
  max-width: var(--lp-measure);
  margin: 0 auto 56px;
  color: var(--lp-color-text-sub);
  line-height: 1.7;
  text-align: center;
}

/* Line breaking. Short headings get balanced lines; running copy asks the
   browser to avoid leaving a single word on the last line. Both degrade
   silently where unsupported. */
.page-foreign-entrepreneur .lp-feature__title,
.page-foreign-entrepreneur .lp-flow__title,
.page-foreign-entrepreneur .lp-profile__name {
  text-wrap: balance;
}

/* Only on full-width prose. In the narrow card and step columns the same
   rule pulls words down and leaves the block raggeder than plain wrapping,
   so those are left alone. */
.page-foreign-entrepreneur .lp-hero__lead p,
.page-foreign-entrepreneur .lp-section-lead,
.page-foreign-entrepreneur .lp-service-menu li,
.page-foreign-entrepreneur .lp-service-menu .lp-note,
.page-foreign-entrepreneur .lp-record__text,
.page-foreign-entrepreneur .lp-profile__list li,
.page-foreign-entrepreneur .lp-mission__lead,
.page-foreign-entrepreneur .lp-final-cta__text {
  text-wrap: pretty;
}


/* --------------------------------------------------------------------------
   5. CTA
   -------------------------------------------------------------------------- */

.page-foreign-entrepreneur .lp-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 12px 32px;
  border-radius: 100vh;
  background: var(--lp-color-cta);
  color: #FFF;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-align: left;
  transition: background-color 0.25s ease;
}

.page-foreign-entrepreneur .lp-cta::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s ease;
  flex: none;
}

.page-foreign-entrepreneur .lp-cta:hover,
.page-foreign-entrepreneur .lp-cta:focus-visible {
  background: var(--lp-color-accent-dark);
}

.page-foreign-entrepreneur .lp-cta:hover::after {
  transform: rotate(45deg) translate(2px, -2px);
}

.page-foreign-entrepreneur .lp-cta--compact {
  min-height: 44px;
  padding: 8px 22px;
  font-size: 14px;
  gap: 10px;
}

.page-foreign-entrepreneur .lp-cta--large {
  min-height: 64px;
  padding: 14px 44px;
  font-size: 18px;
}

.page-foreign-entrepreneur a:focus-visible,
.page-foreign-entrepreneur .lp-skip-link:focus-visible {
  outline: 3px solid var(--lp-color-text);
  outline-offset: 3px;
}


/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */

.page-foreign-entrepreneur .lp-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  height: var(--lp-header-height);
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--lp-color-hairline);
  backdrop-filter: saturate(180%) blur(6px);
}

.page-foreign-entrepreneur .lp-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
  max-width: calc(var(--lp-container-width) + var(--lp-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--lp-gutter);
}

.page-foreign-entrepreneur .lp-header__logo {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  min-height: 44px;
}

/* Logo sizes mirror the existing English header: 340x66 on desktop,
   269x52 at tablet. On phones the CTA pill has to share the row, so the mark
   is as large as the remaining width allows. */
.page-foreign-entrepreneur .lp-header__logo img {
  width: auto;
  height: 66px;
}

@media only screen and (max-width: 960px) {
  .page-foreign-entrepreneur .lp-header__logo img {
    height: 52px;
  }
}

/* On phones the CTA pill wraps to two lines instead of running the full
   width. The wording is unchanged; the freed space goes back to the logo,
   bringing it close to the 226x44 the existing English header uses. */
/* On phones the CTA pill wraps to two lines instead of running the full
   width, and the logo takes whatever is left, sized by width so it can never
   be squashed out of proportion. */
@media only screen and (max-width: 767px) {
  .page-foreign-entrepreneur .lp-header__logo {
    flex: 1 1 auto;
  }

  .page-foreign-entrepreneur .lp-header__logo img {
    width: 100%;
    max-width: 215px;
    height: auto;
  }

  .page-foreign-entrepreneur .lp-header .lp-cta--compact {
    flex: 0 0 auto;
    min-height: 44px;
    max-width: 150px;
    padding: 5px 13px;
    font-size: 12px;
    line-height: 1.3;
    gap: 6px;
    text-align: left;
  }

  .page-foreign-entrepreneur .lp-header .lp-cta--compact::after {
    width: 6px;
    height: 6px;
  }
}

@media only screen and (max-width: 389px) {
  .page-foreign-entrepreneur .lp-header .lp-cta--compact {
    max-width: 140px;
    padding: 5px 11px;
    font-size: 11.5px;
  }
}


/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

/* Tighter than the section rhythm: the fixed header already provides space
   above, and the first section carries its own padding below. */
.page-foreign-entrepreneur .lp-hero {
  padding-top: calc(var(--lp-header-height) + 40px);
  padding-bottom: 64px;
  overflow: hidden;
}

.page-foreign-entrepreneur .lp-hero__inner {
  display: grid;
  grid-template-columns: 57fr 43fr;
  align-items: center;
  gap: 64px;
}

.page-foreign-entrepreneur .lp-hero__title {
  margin-top: 20px;
  font-size: clamp(26px, 3.906vw, 56px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.page-foreign-entrepreneur .lp-hero__subtitle {
  margin-top: 20px;
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 500;
  line-height: 1.9;
}

.page-foreign-entrepreneur .lp-hero__lead {
  max-width: var(--lp-measure);
  margin-top: 28px;
  color: var(--lp-color-text-sub);
  line-height: 1.7;
}

.page-foreign-entrepreneur .lp-hero__lead p + p {
  margin-top: 16px;
}

/* Button and caption share a centre line at every width. The block shrinks
   to the button, so on desktop it still starts at the left of the column. */
.page-foreign-entrepreneur .lp-hero__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  margin-top: 36px;
}

.page-foreign-entrepreneur .lp-hero__note {
  margin-top: 14px;
  color: var(--lp-color-muted);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

/* Photo — plain rectangular card on a soft tinted panel, matching the way the
   existing English pages present the same portrait. */
.page-foreign-entrepreneur .lp-hero__figure {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 470px;
}

.page-foreign-entrepreneur .lp-hero__figure::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -28px;
  right: 34px;
  top: 40px;
  bottom: -28px;
  background: var(--lp-color-tint);
}

.page-foreign-entrepreneur .lp-hero__photo {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 2px;
}

/* Square crop: the lower torso is trimmed so the hero stays short enough for
   the portrait to reach the first view on phones. Positioned high so the
   head keeps clear headroom. */
.page-foreign-entrepreneur .lp-hero__photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 8%;
}

.page-foreign-entrepreneur .lp-hero__caption {
  position: relative;
  z-index: 1;
  margin-top: 20px;
}

.page-foreign-entrepreneur .lp-hero__caption-name {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.page-foreign-entrepreneur .lp-hero__caption-role {
  display: block;
  margin-top: 2px;
  color: var(--lp-color-muted);
  font-size: 13px;
  line-height: 1.5;
}

@media only screen and (max-width: 960px) {
  .page-foreign-entrepreneur .lp-hero__inner {
    gap: 40px;
  }

  .page-foreign-entrepreneur .lp-hero__figure::before {
    left: -16px;
    right: 24px;
    bottom: -16px;
  }
}

/* SP: single column. DOM order already matches the required sequence —
   H1, subtitle, lead, CTA, note, photo. */
/* SP order: H1 → subtitle → portrait → body copy → CTA, so the photo lands
   inside the first view. display: contents lifts the copy blocks out of
   .lp-hero__body so the figure can be sequenced among them. */
@media only screen and (max-width: 767px) {
  .page-foreign-entrepreneur .lp-hero {
    padding-top: calc(var(--lp-header-height) + 20px);
    padding-bottom: 48px;
  }

  /* align-items must be reset here: the desktop rule centres the two grid
     columns, and left as-is it shrink-wraps and centres every stacked block. */
  .page-foreign-entrepreneur .lp-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .page-foreign-entrepreneur .lp-hero__body {
    display: contents;
  }

  .page-foreign-entrepreneur .lp-hero__title    { order: 1; }
  .page-foreign-entrepreneur .lp-hero__subtitle { order: 2; }
  .page-foreign-entrepreneur .lp-hero__figure   { order: 3; }
  .page-foreign-entrepreneur .lp-hero__lead     { order: 4; }
  .page-foreign-entrepreneur .lp-hero__action   { order: 5; }

  /* Sized in vw so the title fills the screen. 8.3vw is the largest value
     that still keeps "Foreign Entrepreneur" on one line down to 320px; the
     40px cap stops it ballooning on the widest phones. */
  .page-foreign-entrepreneur .lp-hero__title {
    margin-top: 12px;
    font-size: clamp(22px, 8.3vw, 40px);
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

  .page-foreign-entrepreneur .lp-hero__subtitle {
    margin-top: 12px;
    line-height: 1.5;
  }

  /* Separates the body copy from the portrait that now sits above it. */
  .page-foreign-entrepreneur .lp-hero__lead {
    margin-top: 50px;
  }

  .page-foreign-entrepreneur .lp-hero__lead p + p {
    margin-top: 12px;
  }

  /* Full width here, so the pair centres on the screen rather than sitting
     at the left of the column. */
  .page-foreign-entrepreneur .lp-hero__action {
    width: 100%;
    margin-top: 24px;
  }

  .page-foreign-entrepreneur .lp-hero__note {
    margin-top: 10px;
  }

  /* ---- SP hero portrait: full width, caption underneath -----------------
     Replaces the earlier side-by-side layout (photo 58% / caption 1fr).
     To go back, restore that grid and put the tinted panel on the left. */
  .page-foreign-entrepreneur .lp-hero__figure {
    display: block;
    max-width: none;
    margin-top: 24px;
  }

  /* Tinted panel sits behind the foot of the photo and the caption, bleeding
     off the left edge — the same side it sits on at desktop. */
  .page-foreign-entrepreneur .lp-hero__figure::before {
    left: -20px;
    right: 28px;
    top: 62%;
    bottom: -20px;
    width: auto;
  }

  .page-foreign-entrepreneur .lp-hero__caption {
    margin-top: 16px;
    padding-bottom: 0;
  }

  .page-foreign-entrepreneur .lp-hero__caption-name {
    font-size: 17px;
  }

  .page-foreign-entrepreneur .lp-hero__caption-role {
    font-size: 13px;
    line-height: 1.5;
  }
  /* ---- end SP hero portrait -------------------------------------------- */
}


/* --------------------------------------------------------------------------
   8. Why SHARK CONSULTING? — six parallel fields of experience.
      Not a sequence, so the numbers stay quiet index labels rather than
      the focal point of each cell.
   -------------------------------------------------------------------------- */

.page-foreign-entrepreneur .lp-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* White card on the tinted section. The icon is the card's anchor, so it is
   left to carry the weight on its own — no rule, no numbering. */
.page-foreign-entrepreneur .lp-feature {
  display: flex;
  flex-direction: column;
  padding: 40px 34px 38px;
  background: var(--lp-color-background);
}

/* Lucide glyph, inlined. */
.page-foreign-entrepreneur .lp-feature__icon {
  display: block;
}

.page-foreign-entrepreneur .lp-feature__icon svg {
  width: 64px;
  height: 64px;
  fill: none;
  stroke: var(--lp-color-accent);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-foreign-entrepreneur .lp-feature__title {
  margin-top: 26px;
  padding-bottom: 18px;
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 600;
  line-height: 1.45;
}

/* Divider between the label and the body copy. */
.page-foreign-entrepreneur .lp-feature__title::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  margin-top: 18px;
  background: var(--lp-color-border);
}

.page-foreign-entrepreneur .lp-feature__text {
  color: var(--lp-color-text-sub);
  font-size: 16px;
  line-height: 1.8;
}

@media only screen and (max-width: 960px) {
  .page-foreign-entrepreneur .lp-feature-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .page-foreign-entrepreneur .lp-feature {
    padding: 34px 28px 32px;
  }

  .page-foreign-entrepreneur .lp-feature__icon svg {
    width: 56px;
    height: 56px;
  }
}

@media only screen and (max-width: 767px) {
  .page-foreign-entrepreneur .lp-feature-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .page-foreign-entrepreneur .lp-feature {
    padding: 30px 24px 28px;
  }

  .page-foreign-entrepreneur .lp-feature__icon svg {
    width: 52px;
    height: 52px;
  }

  .page-foreign-entrepreneur .lp-feature__title {
    margin-top: 20px;
    font-size: 18px;
  }
}


/* --------------------------------------------------------------------------
   9. Our Comprehensive Support
   -------------------------------------------------------------------------- */

/* Same list device as #service-overview .service-menu on the existing site:
   a red ring bullet built from a 0.9em box with a 0.3em border. */
.page-foreign-entrepreneur .lp-service-menu {
  max-width: 720px;
  margin-inline: auto;
}

.page-foreign-entrepreneur .lp-service-menu li {
  position: relative;
  padding-left: 1.7em;
  font-weight: 500;
  line-height: 1.6;
}

.page-foreign-entrepreneur .lp-service-menu li + li {
  margin-top: 22px;
}

.page-foreign-entrepreneur .lp-service-menu li:has(.lp-note) + li {
  margin-top: 26px;
}

.page-foreign-entrepreneur .lp-service-menu li::before {
  content: "";
  position: absolute;
  top: 0.32em;
  left: 0;
  width: 0.9em;
  height: 0.9em;
  border: solid var(--lp-color-accent) 0.3em;
  border-radius: 50%;
}

/* Plain annotation under the item it belongs to — no panel, no rule. */
.page-foreign-entrepreneur .lp-service-menu .lp-note {
  display: block;
  margin-top: 4px;
  color: var(--lp-color-text-sub);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
}

@media only screen and (max-width: 767px) {
  .page-foreign-entrepreneur .lp-service-menu li {
    font-size: 16px;
  }

  .page-foreign-entrepreneur .lp-service-menu li + li {
    margin-top: 18px;
  }
}


/* --------------------------------------------------------------------------
   10. How We Work With You — the one place on this page where numbering
       carries real information, so the flow is the page's signature element.
   -------------------------------------------------------------------------- */

.page-foreign-entrepreneur .lp-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 32px;
}

.page-foreign-entrepreneur .lp-flow__step {
  position: relative;
}

/* Connector, drawn through the vertical centre of the node and across the
   grid gap into the next column. After the last step it keeps running to the
   edge of the section — the support does not stop at step four. */
.page-foreign-entrepreneur .lp-flow__step::before {
  content: "";
  position: absolute;
  top: 38px;
  left: 80px;
  right: -32px;
  height: 1px;
  background: var(--lp-color-border);
}

/* Stops flush with the container, level with where the last column's copy
   ends, rather than running off the page. */
.page-foreign-entrepreneur .lp-flow__step:last-child::before {
  right: 0;
}

.page-foreign-entrepreneur .lp-flow__node {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--lp-color-accent);
  color: #FFF;
  font-size: 38px;
  font-weight: 400;
  line-height: 1;
}

.page-foreign-entrepreneur .lp-flow__body {
  margin-top: 26px;
}

.page-foreign-entrepreneur .lp-flow__title {
  font-size: clamp(19px, 1.5vw, 22px);
  font-weight: 600;
  line-height: 1.45;
}

.page-foreign-entrepreneur .lp-flow__text {
  margin-top: 12px;
  color: var(--lp-color-text-sub);
  font-size: 16px;
  line-height: 1.8;
}

@media only screen and (max-width: 960px) {
  .page-foreign-entrepreneur .lp-flow {
    gap: 0 24px;
  }

  .page-foreign-entrepreneur .lp-flow__step::before {
    right: -24px;
  }

  .page-foreign-entrepreneur .lp-flow__step:last-child::before {
    right: 0;
  }

  .page-foreign-entrepreneur .lp-flow__title {
    font-size: 18px;
  }
}

/* TB and SP: vertical timeline. */
@media only screen and (max-width: 900px) {
  .page-foreign-entrepreneur .lp-flow {
    display: block;
  }

  .page-foreign-entrepreneur .lp-flow__step {
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 0 22px;
    padding-bottom: 40px;
  }

  .page-foreign-entrepreneur .lp-flow__step:last-child {
    padding-bottom: 0;
  }

  .page-foreign-entrepreneur .lp-flow__step::before,
  .page-foreign-entrepreneur .lp-flow__step:last-child::before {
    top: 84px;
    bottom: 8px;
    left: 37px;
    right: auto;
    width: 1px;
    height: auto;
  }

  .page-foreign-entrepreneur .lp-flow__step:last-child::before {
    display: none;
  }

  .page-foreign-entrepreneur .lp-flow__body {
    margin-top: 0;
    padding-top: 14px;
  }
}

@media only screen and (max-width: 767px) {
  .page-foreign-entrepreneur .lp-flow__step {
    grid-template-columns: 62px 1fr;
    gap: 0 18px;
  }

  .page-foreign-entrepreneur .lp-flow__node {
    width: 62px;
    height: 62px;
    font-size: 30px;
  }

  .page-foreign-entrepreneur .lp-flow__step::before {
    top: 70px;
    left: 30px;
  }

  .page-foreign-entrepreneur .lp-flow__body {
    padding-top: 10px;
  }
}


/* --------------------------------------------------------------------------
   11. Our Mission — the single dark band on the page. Emphasis comes from
       space and scale, not decoration.
   -------------------------------------------------------------------------- */

.page-foreign-entrepreneur .lp-mission {
  text-align: center;
}

.page-foreign-entrepreneur .lp-mission__lead {
  max-width: 46ch;
  margin-inline: auto;
  color: var(--lp-color-text-sub);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.7;
}

/* Sized in em so the measure scales with the statement's own type: about two
   lines at every viewport. */
.page-foreign-entrepreneur .lp-mission__statement {
  max-width: 16em;
  margin: 32px auto 0;
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 600;
  line-height: 1.85;
  letter-spacing: -0.005em;
  text-wrap: balance;
}


/* --------------------------------------------------------------------------
   12. Track Record — one engagement, presented as one engagement.
   -------------------------------------------------------------------------- */

/* A stack rather than a row, so the section holds its shape whether there is
   one entry or a dozen. */
/* Inset by 10% of the narrow container, the same rule .narrow-box uses on
   the existing site (and full width below 768px, as it does there too). */
.page-foreign-entrepreneur .lp-record-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 10%;
}

.page-foreign-entrepreneur .lp-record {
  padding: 32px 40px;
  background: var(--lp-color-background);
}

.page-foreign-entrepreneur .lp-record__text {
  line-height: 1.8;
}

@media only screen and (max-width: 767px) {
  .page-foreign-entrepreneur .lp-record-list {
    gap: 12px;
    margin: 0;
  }

  .page-foreign-entrepreneur .lp-record {
    padding: 24px 22px;
  }

  .page-foreign-entrepreneur .lp-record__text {
    font-size: 16px;
  }
}


/* --------------------------------------------------------------------------
   13. Profile
   -------------------------------------------------------------------------- */

/* Photo left, credentials right — the mirror of the hero, so the two
   portraits do not sit on the same side of the page. */
.page-foreign-entrepreneur .lp-profile {
  display: grid;
  grid-template-columns: 300px 1fr;
  align-items: start;
  gap: 48px;
  max-width: 52rem;
  margin-inline: auto;
}

.page-foreign-entrepreneur .lp-profile__figure {
  position: relative;
}

/* Tinted panel offset behind the photo, matching the hero treatment. */
.page-foreign-entrepreneur .lp-profile__figure::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -20px;
  right: 26px;
  top: 26px;
  bottom: -20px;
  background: var(--lp-color-tint);
}

.page-foreign-entrepreneur .lp-profile__figure picture {
  position: relative;
  z-index: 1;
  display: block;
}

/* Cropped tighter than the hero so the two portraits read as different
   shots rather than a repeat. */
.page-foreign-entrepreneur .lp-profile__figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 8%;
  border-radius: 2px;
}

.page-foreign-entrepreneur .lp-profile__name {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--lp-color-hairline);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
}

.page-foreign-entrepreneur .lp-profile__list {
  margin-top: 24px;
}

.page-foreign-entrepreneur .lp-profile__list li {
  position: relative;
  padding-left: 1.7em;
  color: var(--lp-color-text-sub);
  font-size: 16px;
  line-height: 1.75;
}

.page-foreign-entrepreneur .lp-profile__list li + li {
  margin-top: 14px;
}

.page-foreign-entrepreneur .lp-profile__list li::before {
  content: "";
  position: absolute;
  top: 0.32em;
  left: 0;
  width: 0.9em;
  height: 0.9em;
  border: solid var(--lp-color-accent) 0.3em;
  border-radius: 50%;
}

@media only screen and (max-width: 960px) {
  .page-foreign-entrepreneur .lp-profile {
    grid-template-columns: 32% 1fr;
    gap: 36px;
  }
}

@media only screen and (max-width: 767px) {
  .page-foreign-entrepreneur .lp-profile {
    display: block;
    max-width: 30rem;
  }

  .page-foreign-entrepreneur .lp-profile__figure {
    width: 66%;
    margin: 0 auto 44px;
  }

  .page-foreign-entrepreneur .lp-profile__figure::before {
    left: -16px;
    right: 20px;
    top: 20px;
    bottom: -16px;
  }

  .page-foreign-entrepreneur .lp-profile__name {
    font-size: 21px;
  }
}


/* --------------------------------------------------------------------------
   14. Final CTA
   -------------------------------------------------------------------------- */

.page-foreign-entrepreneur .lp-final-cta {
  padding-block: var(--lp-section-space);
  background: var(--lp-color-tint);
  text-align: center;
}

.page-foreign-entrepreneur .lp-final-cta__title {
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.page-foreign-entrepreneur .lp-final-cta__text {
  max-width: 58ch;
  margin: 24px auto 0;
  color: var(--lp-color-text-sub);
  line-height: 1.8;
}

.page-foreign-entrepreneur .lp-final-cta .lp-cta {
  margin-top: 40px;
}

.page-foreign-entrepreneur .lp-final-cta__note {
  margin-top: 16px;
  color: var(--lp-color-muted);
  font-size: 14px;
}

/* --- Dark variant -------------------------------------------------------
   Toggled by adding lp-final-cta--dark to the section in the markup.
   Remove that one class to return to the beige treatment; nothing else
   needs to change. Uses $cl-black rather than pure #000 so it stays in the
   existing palette. */
.page-foreign-entrepreneur .lp-final-cta--dark {
  background: var(--lp-color-text);
  color: #FFF;
}

.page-foreign-entrepreneur .lp-final-cta--dark .lp-final-cta__text {
  color: rgba(255, 255, 255, 0.84);
}

.page-foreign-entrepreneur .lp-final-cta--dark .lp-final-cta__note {
  color: rgba(255, 255, 255, 0.64);
}

.page-foreign-entrepreneur .lp-final-cta--dark a:focus-visible {
  outline-color: #FFF;
}

@media only screen and (max-width: 767px) {
  .page-foreign-entrepreneur .lp-final-cta__text {
    font-size: 16px;
  }

  .page-foreign-entrepreneur .lp-final-cta .lp-cta--large {
    min-height: 56px;
    padding: 12px 28px;
    font-size: 16px;
  }
}


/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */

/* Light, matching the existing English footer (#footer .copy-right is
   $cl-beige on $cl-black). A dark footer would also render logo-mark.svg —
   which is drawn in #231815 — almost invisible. */
.page-foreign-entrepreneur .lp-footer {
  padding-block: 40px;
  background: var(--lp-color-background);
  border-top: 1px solid var(--lp-color-hairline);
  color: var(--lp-color-text);
}

.page-foreign-entrepreneur .lp-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  flex-wrap: wrap;
}

/* Mark above wordmark at 200px wide — the same lockup and size the existing
   English footer uses. */
.page-foreign-entrepreneur .lp-footer__logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
}

.page-foreign-entrepreneur .lp-footer__logo img {
  width: 200px;
  height: auto;
}

.page-foreign-entrepreneur .lp-footer__info {
  font-size: 14px;
  line-height: 1.7;
}

.page-foreign-entrepreneur .lp-footer__address span {
  display: inline-block;
}

.page-foreign-entrepreneur .lp-footer__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 20px;
}

.page-foreign-entrepreneur .lp-footer__contact a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color 0.2s ease;
}

.page-foreign-entrepreneur .lp-footer__contact a:hover {
  color: var(--lp-color-accent);
}

.page-foreign-entrepreneur .lp-footer__hours {
  color: var(--lp-color-muted);
}

.page-foreign-entrepreneur .lp-footer__copyright {
  color: var(--lp-color-muted);
  font-size: 13px;
  letter-spacing: 0.04em;
}

@media only screen and (max-width: 960px) {
  .page-foreign-entrepreneur .lp-footer__inner {
    gap: 20px 32px;
  }
}

@media only screen and (max-width: 767px) {
  .page-foreign-entrepreneur .lp-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .page-foreign-entrepreneur .lp-footer__info {
    font-size: 13px;
  }
}


/* --------------------------------------------------------------------------
   16. Reveal
       Only applied when JavaScript is running, so content stays visible if
       the script fails to load.
   -------------------------------------------------------------------------- */

.has-js .page-foreign-entrepreneur [data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.has-js .page-foreign-entrepreneur [data-reveal="shown"] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html:has(.page-foreign-entrepreneur) {
    scroll-behavior: auto;
  }

  .has-js .page-foreign-entrepreneur [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Dropped outright rather than shortened, so the routes fall back to their
     resting style — fully drawn — instead of ending on a hidden frame. */
  .has-js .page-foreign-entrepreneur .lp-world[data-arcs="shown"] .lp-world__arc,
  .has-js .page-foreign-entrepreneur .lp-world[data-arcs="shown"] .lp-world__hub {
    animation: none !important;
  }

  .page-foreign-entrepreneur *,
  .page-foreign-entrepreneur *::before,
  .page-foreign-entrepreneur *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* --------------------------------------------------------------------------
   17. Print
   -------------------------------------------------------------------------- */

@media print {
  .page-foreign-entrepreneur .lp-header {
    position: static;
  }

  .page-foreign-entrepreneur .lp-hero {
    padding-top: 24px;
  }

  .has-js .page-foreign-entrepreneur [data-reveal] {
    opacity: 1;
    transform: none;
  }
}