/* =====================================================
   HANDSHAX Corporate Site — v2 (corrections applied)
   Breakpoints (mobile-first):
     - mobile : 0     → 599px   (default)
     - tablet : 600   → 1024px
     - desktop: 1025px+
   ===================================================== */

/* ------- Reset ------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{
  margin:0;
  padding:0;
  /* Prevents iOS Safari from allowing horizontal swipe-panning when any
     positioned element (hero blob, dots, hexashape) extends past viewport.
     `clip` (with `hidden` fallback) avoids turning html/body into a scroll
     container, which would otherwise break position:sticky inside the page. */
  overflow-x:hidden;
  overflow-x:clip;
  position:relative;
  width:100%;
  /* Disable horizontal overscroll/bounce on touch devices */
  overscroll-behavior-x:none;
}
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:"Inter","Noto Sans JP",-apple-system,BlinkMacSystemFont,sans-serif;
  color:#000;
  background:#fff;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; padding:0; }
input,textarea,select{ font-family:inherit; }
ul,ol{ list-style:none; padding:0; margin:0; }
p{ margin:0; }

/* ------- Design tokens ------- */
:root{
  --hs-blue:#0095d5;
  --hs-pink:#c3a4b2;
  --hs-gray:#5c6470;
  --hs-white:#ffffff;
  --hs-black:#000000;
  --hs-accent:#ffce1b;
  --hs-light-grey:#e1e1e1;
  --hs-bg-soft:#fafbfd;
  --hs-header:#f1f1f1;

  --font-inter:"Inter",sans-serif;
  --font-jp:"Noto Sans JP",sans-serif;
  --font-mincho:"Shippori Mincho","Hiragino Mincho Pro","Yu Mincho",serif;
}

/* =====================================================
   SHARED COMPONENTS
   ===================================================== */

/* Section title */
.section-title{
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:flex-start;
  width:100%;
}
.section-title__eyebrow{
  display:flex;
  gap:8px;
  align-items:center;
}
.section-title__number{
  font-family:var(--font-inter);
  font-weight:600;
  font-size:12px;
  line-height:32px;
  color:var(--hs-blue);
  letter-spacing:2px;
}
.section-title__eyebrow-text{
  font-family:var(--font-inter),var(--font-jp);
  font-weight:400;
  font-size:12px;
  line-height:32px;
  color:var(--hs-gray);
  letter-spacing:2px;
}
/* Title wraps responsively — EN stays on top-left, JP wraps below or beside.
   Mobile: items can wrap to next line if needed.
   The vertical separator stays attached to the EN side. */
.section-title__title{
  display:flex;
  flex-wrap:nowrap;
  align-items:flex-start;
  row-gap:8px;
}
.section-title__en{
  display:flex;
  align-items:center;
  padding-right:24px;
  border-right:1px solid #000;
  font-family:var(--font-inter);
  font-weight:700;
  /* Scales down 24px → 16px between viewport widths 365px → 260px.
     Stays 24px above 365px, floors at 16px below 260px. */
  font-size:clamp(16px, calc(16px + (100vw - 260px) * 0.0762), 24px);
  line-height:1.4;
  color:var(--hs-blue);
  white-space:nowrap;
  flex-shrink:0;
}
.section-title__jp{
  display:block;
  padding-left:24px;
  font-family:var(--font-inter),var(--font-jp);
  font-weight:700;
  /* Same scaling rule as .section-title__en — keeps JP title to 2 lines on narrow phones */
  font-size:clamp(16px, calc(16px + (100vw - 260px) * 0.0762), 24px);
  line-height:1.4;
  color:#000;
  /* Allow wrapping — natural flow */
  /*word-break:keep-all;*/
  overflow-wrap:break-word;
  flex:1 1 auto;
  min-width:0;
}
.section-title__spacer{
  padding-bottom:24px;
}
.section-title__spacer span{
  display:block;
  background:var(--hs-pink);
  height:4px;
  width:60px;
}
.section-title__quote{
  font-family:var(--font-mincho);
  font-weight:600;
  font-size:22px;
  line-height:34px;
  color:var(--hs-blue);
}

/* Body text */
.body-text{
  padding:24px 0;
  font-family:var(--font-inter),var(--font-jp);
  font-weight:400;
  font-size:16px;
  line-height:32px;
  color:#000;
}
.body-text--gray{ color:var(--hs-gray); }
.body-text p + p{ margin-top:32px; }

/* CTA Button — default solid blue,
   hover: white bg with blue border + glow (per cta-button-hover.png) */
.cta-button{
  width: 100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  height:56px;
  padding:8px 16px;
  background:var(--hs-blue);
  color:var(--hs-white);
  border:1px solid var(--hs-blue);
  border-radius:999px;
  font-family:var(--font-inter);
  font-weight:700;
  font-size:16px;
  line-height:22px;
  transition:background .25s ease,
             color .25s ease,
             border-color .25s ease,
             box-shadow .35s ease,
             transform .2s ease;
  cursor:pointer;
}
.cta-button:hover{
  background:var(--hs-white);
  color:var(--hs-blue);
  border-color:var(--hs-blue);
  box-shadow:0 0 30px rgba(0,149,213,.35);
  transform:translateY(-1px);
  border: solid 1px;
}
.cta-button .cta-icon{
  width:24px; height:24px;
  display:flex; align-items:center; justify-content:center;
  transition:filter .25s ease;
}
.cta-button .cta-icon svg{
  width:100%; height:100%;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  transition:stroke .25s ease;
}
.cta-button .cta-icon img{
  width:100%; height:100%;
  filter:brightness(0) invert(1);
  transition:filter .25s ease;
}
.cta-button:hover .cta-icon img{
  filter:invert(43%) sepia(99%) saturate(1352%) hue-rotate(173deg) brightness(95%) contrast(101%);
}

.cta-wrap{
  display:flex;
  justify-content:center;
  padding:24px 0;
  width:100%;
}
/* Submit / apply / full-width button variants */
.cta-button--block{
  width:100%;
}

/* =====================================================
   HEADER
   ===================================================== */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  /* opacity .75 + blur 10px (per spec) */
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hs-header);
  height:65px;
  display:flex;
  align-items:center;
}
.site-header__inner{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px;
}
.site-header__logo{
  display:flex;
  align-items:center;
  height:38px;
  z-index:101;
}
.site-header__logo img{ height:38px; width:auto; }
.site-header__nav-desktop{ display:none; }
.site-header__cta{ display:none; }
.menu-toggle{
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  z-index:101;
  position:relative;
}
.menu-toggle img{ width:32px; height:32px; }
.menu-toggle .icon-close{ display:none; }
.menu-toggle[aria-expanded="true"] .icon-open{ display:none; }
.menu-toggle[aria-expanded="true"] .icon-close{ display:block; }

/* Mobile / Tablet menu drawer */
.mobile-menu{
  position:fixed;
  top:65px;
  left:0; right:0;
  /* Match site-header backdrop style */
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transform:translateY(-120%);
  transition:transform .4s cubic-bezier(.4,0,.2,1),
             opacity .3s ease,
             visibility .3s ease,
             box-shadow .3s ease;
  z-index:99;
  padding:24px 24px 0;
  max-height:calc(100vh - 65px);
  overflow-y:auto;
  visibility:hidden;
  opacity:0;
}
.mobile-menu.is-open{
  transform:translateY(0);
  visibility:visible;
  opacity:1;
  box-shadow:0 8px 12px rgba(0,0,0,.03);
  z-index:10000;        /* when open, sit above the cookie banner (9999) */
}
/* Center align — no borders */
.mobile-menu ul{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  padding:8px 0;
}
.mobile-menu li{
  border-bottom:none;
  width:100%;
  text-align:center;
}
.mobile-menu a{
  display:block;
  padding:14px 4px;
  font-family:var(--font-inter);
  font-weight:300;
  font-size:16px;
  letter-spacing:.05em;
  color:var(--hs-gray);
  text-align:center;
  transition:color .2s;
}
.mobile-menu a:hover{ color:var(--hs-blue); }

/* CTA contact bar at the bottom of the menu, with top border */
.mobile-menu__cta{
  margin-top:8px;
  padding:24px 0;
  border-top:1px solid var(--hs-light-grey);
  display:flex;
  justify-content:stretch;
}
.mobile-menu__cta .cta-button{
  width:100%;
  color: var(--hs-white);
  font-weight: 700;

}

/* =====================================================
   HERO
   ===================================================== */
.hero{
  position:relative;
  margin-top:65px;
  background:var(--hs-white);
  overflow:hidden;
  height:590px;
  width:100%;
  max-width:100vw;
}
.hero__content{
  position:relative;
  width:100%;
  height:100%;
}
.hero__bg{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.hero__blue-shape{
  position:absolute;
  top:5px;
  left:-454px;
  width:1122px;
  height:530px;
}
.hero__blue-shape img{ width:100%; height:100%; }
.hero__dots{
  position:absolute;
  top:-50px;
  left:-309px;
  width:1180px;
  height:730px;
  opacity:.18;
  pointer-events:none;
}
.hero__dots img{ width:100%; height:100%; }

/* Hexashape — two-frame slow crossfade (heartbeat-like pulsation) */
.hero__hexashape{
  position:absolute;
  top:226px;
  left:69px;
  width:387px;
  height:310px;
  pointer-events:none;
}
/* Each state frame fills the container, layered on top of each other */
.hero__hexashape .hexa-frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.hero__hexashape .hexa-frame img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
/* At rest: state 1 visible, state 2 hidden.
   JS adds .is-animating after a 1s delay to kick off the loop. */
.hero__hexashape .hexa-frame--1{ opacity:1; }
.hero__hexashape .hexa-frame--2{ opacity:0; }

/* 8-second cycle — slow, gentle pulsation. Both frames run the same keyframe
   but frame 2 is offset by half the cycle so they alternate smoothly. */
.hero__hexashape.is-animating .hexa-frame{
  animation:hexaDissolve 8s ease-in-out infinite;
}
.hero__hexashape.is-animating .hexa-frame--2{
  animation-delay:-4s;  /* half-cycle offset for perfect crossfade */
}

/* Smooth continuous dissolve — no held states, both frames are always
   either fading in or fading out. Gives a soft, dreamy "morphing" effect. */
@keyframes hexaDissolve{
  0%, 100% { opacity:1; }
  50%      { opacity:0; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero__hexashape.is-animating .hexa-frame{
    animation:none;
  }
  .hero__hexashape .hexa-frame--2{ opacity:0; }
}

.hero__title{
  position:absolute;
  top:62px;
  left:27px;
  width:320px;
  height:112px;
  /* cursor:pointer; */
  transition:opacity .4s ease;
}
.hero__title img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transition:opacity .4s cubic-bezier(.4,0,.2,1);
}
.hero__title .hover-state{ opacity:0; }
.hero__title:hover .hover-state{ opacity:1; }
.hero__title:hover .default-state{ opacity:0; }

.hero__subtext{
  position:absolute;
  top:219px;
  left:27px;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.hero__subtext p{
  font-family:var(--font-inter);
  font-weight:300;
  font-style:italic;
  font-size:20px;
  line-height:32px;
  color:var(--hs-gray);
  margin:0;
}
.hero__subtext-bar{
  display:block;
  width:60px;
  height:4px;
  background:var(--hs-pink);
}

.hero__logo{
  position:absolute;
  top:248px;
  left:27px;
  width:160px;
  height:auto;
}
.hero__logo img{ width:100%; height:auto; display:block; }

.hero__tagline-bar{
  position:absolute;
  bottom:0; left:0; right:0;
  height:64px;
  background:linear-gradient(90deg, var(--hs-pink) 0%, var(--hs-blue) 100%);
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.hero__tagline-bar p{
  font-family:var(--font-inter),var(--font-jp);
  font-weight:400;
  font-size:16px;
  line-height:32px;
  color:var(--hs-white);
}

/* =====================================================
   SECTIONS - shared layout
   ===================================================== */
.section{
  position:relative;
  padding:80px 16px;
}
.section__content{
  max-width:1248px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.section--bg-soft{ background:var(--hs-bg-soft); }

/* MISSION */
.mission-section{ background:var(--hs-bg-soft); overflow:hidden; }

/* --- Floating background shapes (subtle, gentle, slow drift + fade) --- */
.bg-shapes{
  position:absolute;
  inset:0;
  z-index:0;             /* behind the content */
  pointer-events:none;
  overflow:hidden;
  display:none;          /* mobile: hide the drifting background shapes */
}
/* Tablet & desktop only — show the drifting background shapes */
@media (min-width:600px){
  .bg-shapes{ display:block; }
}
/* Keep the actual content above the shapes */
.mission-section .section__content,
.service-section .section__content,
.vision-section .section__content,
.value-section .section__content,
.career-section .section__content{
  position:relative;
  z-index:1;
}
.bg-shape{
  position:absolute;
  display:block;
  opacity:0;             /* animations fade them in/out */
  will-change:transform, opacity;
}
/* Each shape: its own start position, size, drift path, timing — so they
   feel out of sync and random. Sizes are scaled down a touch from source. */
.bg-shape--1{      /* small pink hexagon */
  width:70px;  top:12%;  left:8%;
  animation:bgDrift1 20s ease-in-out infinite;
}
.bg-shape--2{      /* large blue hexagon */
  width:220px; top:40%;  left:72%;
  animation:bgDrift2 26s ease-in-out infinite;
  animation-delay:-6s;
}
.bg-shape--3{      /* medium blue hexagon */
  width:130px; top:68%;  left:18%;
  animation:bgDrift3 23s ease-in-out infinite;
  animation-delay:-12s;
}
.bg-shape--4{      /* tiny pink hexagon */
  width:42px;  top:22%;  left:84%;
  animation:bgDrift4 17s ease-in-out infinite;
  animation-delay:-3s;
}

/* Gentle travel + fade. Opacity pulses within a visible band (never 0 or 100):
   shape1 25%↔75%, shape2 5%↔50%, shape3 25%↔75%, shape4 50%↔95%.
   Start and end share the valley value so the infinite loop is seamless. */
@keyframes bgDrift1{
  0%   { transform:translate(0,0) rotate(0deg);          opacity:.25; }
  50%  { transform:translate(40px,-30px) rotate(20deg);  opacity:.75; }
  100% { transform:translate(0,0) rotate(0deg);          opacity:.25; }
}
@keyframes bgDrift2{
  0%   { transform:translate(0,0) rotate(0deg);           opacity:.05; }
  50%  { transform:translate(-50px,40px) rotate(-15deg);  opacity:.50; }
  100% { transform:translate(0,0) rotate(0deg);           opacity:.05; }
}
@keyframes bgDrift3{
  0%   { transform:translate(0,0) rotate(0deg);          opacity:.25; }
  50%  { transform:translate(55px,25px) rotate(18deg);   opacity:.75; }
  100% { transform:translate(0,0) rotate(0deg);          opacity:.25; }
}
@keyframes bgDrift4{
  0%   { transform:translate(0,0) rotate(0deg);           opacity:.50; }
  50%  { transform:translate(-35px,-40px) rotate(-25deg); opacity:.95; }
  100% { transform:translate(0,0) rotate(0deg);           opacity:.50; }
}

/* Respect users who prefer reduced motion — hold shapes still and faint */
@media (prefers-reduced-motion: reduce){
  .bg-shape{
    animation:none;
    opacity:.25;
  }
}

/* =====================================================
   VISION
   ===================================================== */
.vision-section{ background:var(--hs-white); }
/* =====================================================
   VISION CARDS
   Vertical roulette: a picker tab + 3 cards. The active card is full/sharp;
   the prev/next cards are blurred (6px) and scaled to 0.80. Drag/swipe up or
   down to rotate. Mobile-first = picker on TOP (points down), cards below.
   ===================================================== */
.vision__roulette{
  position:relative;
  display:flex;
  flex-direction:column;       /* mobile: picker on top, track below */
  align-items:center;
  width:100%;
  padding:24px 0;
  gap:0;
  user-select:none;
  -webkit-user-select:none;
}

/* Picker tab — mobile: pill with a downward triangle pointing at the card.
   Built in CSS (rounded rect + ::after triangle), blue, white text. */
.vision__picker{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--hs-blue);
  border-radius:16px;
  padding:18px 28px;
  margin-bottom:0;             /* track tucks right under via its own offset */
  box-shadow:0 8px 24px rgba(0,149,213,.28);
}
.vision__picker::after{        /* downward triangle (mobile) */
  content:"";
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  border-left:14px solid transparent;
  border-right:14px solid transparent;
  border-top:14px solid var(--hs-blue);
}
.vision__picker-text{
  font-family:var(--font-inter),var(--font-jp);
  font-weight:600;
  font-size:20px;
  line-height:1.2;
  color:#fff;
  white-space:nowrap;
}

/* Track — the viewport that holds the 3 cards. Fixed height shows the active
   card plus a peek of the blurred neighbors above/below. */
.vision__track{
  position:relative;
  width:100%;
  max-width:340px;
  height:236px;                /* mobile viewport height (tighter) */
  margin-top:-30px;            /* tuck up so the active sits near the picker */
  cursor:grab;
  touch-action:pan-y;
}
.vision__track:active{ cursor:grabbing; }

/* Each card — absolutely centered; JS sets position state classes. */
.vision-card{
  box-sizing:border-box;
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  max-width:320px;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:24px;
  background:#fff;
  border:1px solid rgba(0,149,213,.3);
  border-radius:20px;
  box-shadow:0 0 20px rgba(92,100,112,.12);
  /* default transform set per-state; smooth eased rotation */
  transform:translate(-50%,-50%) scale(.8);
  filter:blur(4px);
  opacity:.6;
  transition:transform .5s cubic-bezier(.22,1,.36,1),
             filter .5s ease, opacity .5s ease;
  will-change:transform, filter, opacity;
}
.vision-card__text{
  font-family:var(--font-inter),var(--font-jp);
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  color:#000;
  margin:0;
  text-align:center;
}
.vision-card__icon{
  flex-shrink:0;
  width:40px;
  height:auto;
}

/* --- Position states (set by JS) --- */
/* Active: centered, full size, sharp */
.vision-card.is-active{
  transform:translate(-50%,-50%) scale(1);
  filter:blur(0);
  opacity:1;
  z-index:2;
}
/* Previous: just above, blurred + scaled 0.80, peeking behind the active */
.vision-card.is-prev{
  transform:translate(-50%,calc(-50% - 86px)) scale(.8);
  filter:blur(4px);
  opacity:.5;
  z-index:1;
}
/* Next: just below, blurred + scaled 0.80, peeking behind the active */
.vision-card.is-next{
  transform:translate(-50%,calc(-50% + 86px)) scale(.8);
  filter:blur(4px);
  opacity:.5;
  z-index:1;
}

/* =====================================================
   VALUE — full color-flip on hover (see value-card-hover.png)
   ===================================================== */
.value-section{ background:var(--hs-bg-soft); }
.value__cards{
  display:flex;
  flex-direction:column;
  gap:24px;
  padding:24px 0;
  width:100%;
}

/* --- Value card: default = white, big centered number + title + chevron.
   Hover/tap = gradient background; the TEXT changes (number shrinks, title
   turns white, subtitle + caret + body reveal) but the CARD stays the same
   size — content is centered, so there is no jump between states. --- */
.value-card{
  display:flex;
  flex-direction:column;
  align-items:center;          /* center everything horizontally */
  justify-content:center;      /* center the content block vertically */
  border-radius:20px;
  padding:32px 24px;
  background:var(--hs-white);
  box-shadow:0 8px 30px rgba(0,149,213,.18);
  text-align:center;           /* centered text */
  width:100%;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  /* Fixed height sized for the fullest (hover) state, so the card never
     resizes between default and hover — only the inner text animates. */
  height:420px;
  -webkit-tap-highlight-color:transparent;
  transition:box-shadow .4s ease;
}
/* The gradient layer (hidden by default, fades in on activate) */
.value-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, #0095D5 0%, #7AC8E9 100%);
  opacity:0;
  transition:opacity .45s ease;
  z-index:0;
}
/* Keep all content above the gradient layer */
.value-card > *{
  position:relative;
  z-index:1;
}

/* Number — 90px by default, centered */
.value-card__number{
  font-family:var(--font-inter);
  font-weight:700;
  font-size:90px;
  line-height:1;
  letter-spacing:1px;
  color:#000;
  transition:font-size .45s var(--e, cubic-bezier(.19,1,.22,1)), color .4s ease;
}

/* Title — blue 22px bold by default, centered */
.value-card__title{
  font-family:var(--font-inter);
  font-weight:700;
  font-size:22px;
  line-height:1.3;
  color:var(--hs-blue);
  margin:16px 0 0;
  transition:color .4s ease;
}

/* Subtitle — hidden by default, white on hover */
.value-card__subtitle{
  font-family:var(--font-mincho);
  font-weight:600;
  font-size:16px;
  line-height:1.4;
  color:#fff;
  margin:0;
  max-height:0;
  overflow:hidden;
  opacity:0;
  transform:translateY(8px);
  transition:max-height .45s ease, opacity .45s ease, transform .45s ease, margin-top .4s ease;
}

/* Yellow caret/spacer line between subtitle and content (hidden by default) */
.value-card__caret{
  width:40px;
  height:4px;
  background:var(--hs-accent);
  margin:0 auto;
  opacity:0;
  max-height:0;
  transform:translateY(8px);
  transition:opacity .45s ease, max-height .45s ease, transform .45s ease, margin .4s ease;
}

/* Body content — hidden by default, white on hover */
.value-card__hover-content{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transform:translateY(8px);
  transition:max-height .5s ease, opacity .45s ease, transform .45s ease, margin-top .4s ease;
}
.value-card__desc{
  font-family:var(--font-inter),var(--font-jp);
  font-size:16px;
  line-height:1.8;
  color:#fff;
  margin:0;
}

/* Chevron — uses the provided SVGs (default = blue circle, hover = white).
   Centered; the two images swap on hover/active. */
.value-card__chevron{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  margin-top:16px;
  position:relative;
}
.value-card__chevron img{
  width:32px;
  height:32px;
  display:block;
}
.value-card__chevron .chevron-hover{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .4s ease;
}
.value-card__chevron .chevron-default{
  transition:opacity .4s ease;
}

/* ---- Active state (hover on desktop, .is-open on tap) ---- */
.value-card.is-open,
.value-card:hover{
  box-shadow:0 16px 40px rgba(0,149,213,.35);
}
.value-card.is-open::before,
.value-card:hover::before{ opacity:1; }

/* Number shrinks to 32px and turns white */
.value-card.is-open .value-card__number,
.value-card:hover .value-card__number{
  font-size:32px;
  color:#fff;
}
/* Title turns white */
.value-card.is-open .value-card__title,
.value-card:hover .value-card__title{ color:#fff; }
/* Subtitle reveals */
.value-card.is-open .value-card__subtitle,
.value-card:hover .value-card__subtitle{ max-height:80px; opacity:1; transform:translateY(0); margin-top:12px; }
/* Yellow caret reveals */
.value-card.is-open .value-card__caret,
.value-card:hover .value-card__caret{ opacity:1; max-height:4px; transform:translateY(0); margin:12px auto; }
/* Body reveals */
.value-card.is-open .value-card__hover-content,
.value-card:hover .value-card__hover-content{
  max-height:400px;
  opacity:1;
  transform:translateY(0);
  margin-top:0;
}
/* Chevron swaps to the white (hover) SVG */
.value-card.is-open .value-card__chevron .chevron-default,
.value-card:hover .value-card__chevron .chevron-default{ opacity:0; }
.value-card.is-open .value-card__chevron .chevron-hover,
.value-card:hover .value-card__chevron .chevron-hover{ opacity:1; }

/* --- Mobile (≤599px): show value cards permanently OPEN, no interaction.
   Forces the gradient + revealed content as the default state and removes
   the hover/tap toggling (cards don't react to touch — they're just open). --- */
@media (max-width:599px){
  .value-card{
    cursor:default;
    height:auto;             /* let the always-open content set the height */
    min-height:280px;
  }
  .value-card::before{ opacity:1; }                 /* gradient always on */
  .value-card__number{ font-size:32px; color:#fff; }/* small white number */
  .value-card__title{ color:#fff; }                 /* white title */
  .value-card__subtitle{
    max-height:80px; opacity:1; transform:translateY(0); margin-top:12px;
  }
  .value-card__caret{
    opacity:1; max-height:4px; transform:translateY(0); margin:12px auto;
  }
  .value-card__hover-content{
    max-height:400px; opacity:1; transform:translateY(0); margin-top:0;
  }
  /* Chevron is pointless on mobile (nothing to reveal/toggle) — hide it */
  .value-card__chevron{ display:none; }
  /* Neutralize hover shadow change so there's no flicker on tap */
  .value-card:hover{ box-shadow:0 8px 30px rgba(0,149,213,.18); }
}

/* =====================================================
   CAROUSEL — Mobile-first (320–599px)
   Unified single horizontal row at ALL breakpoints:
     - quote block on top (centered)
     - one row: active slide (wide) + closed pills (thin), in DOM sequence
   On mobile the row can be wider than the viewport; it's swipeable.
   Gap between items: 16px (all screens).
   ===================================================== */
.value__carousel{
  display:flex;
  flex-direction:column;
  align-items:center;        /* center the quote + strip */
  gap:24px;
  width:100%;
  background:none;
  border-radius:0;
  padding:80px 0 0;          /* room between the value cards above and the carousel */
}

/* Quote block FIRST (on top), centered */
.value__quote-block{
  order:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  position:relative;
  align-items:center;
  text-align:center;
}
.value__quote-block .quote-mark{
  width:42px; height:32px;
  margin-bottom:8px;
}
.value__quote-block .quote-text{
  font-family:var(--font-mincho);
  font-weight:600;
  font-size:24px;
  line-height:1.5;
  color:var(--hs-gray);
  margin:0 0 16px;
}
.value__quote-block .quote-bar{
  width:60px; height:4px;
  background:var(--hs-pink);
  margin:0 auto;
}
.value__quote-block .quote-en{
  font-family:var(--font-inter);
  font-weight:300;
  font-style:italic;
  font-size:18px;
  color:var(--hs-blue);
  margin-top:8px;
}

/* The slide strip — single horizontal nowrap row.
   On mobile it's a horizontal scroll/swipe track — you can drag the whole
   row freely (overflow swipe) and the active slide can sit centered. */
.value__strip{
  order:1;
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:16px;
  width:100%;
  /* Vertical padding gives each slide's shadow room inside the scroll box
     (overflow-x:auto forces overflow-y to clip). Negative margin pulls the
     box back so layout spacing is unchanged. Side padding = 16px gutter so
     slides snap to the left with the next image peeking on the right. */
  height:auto;
  padding:40px 16px;
  margin:-40px 0;
  overflow-x:auto;           /* free horizontal swipe (overflow scroll) */
  overflow-y:hidden;
  scroll-snap-type:x mandatory;   /* lock each slide in place */
  -webkit-overflow-scrolling:touch;   /* momentum scroll on iOS */
  scrollbar-width:none;      /* hide scrollbar (Firefox) */
  scroll-padding-left:16px;  /* snap aligns to the 16px gutter */
  touch-action:pan-x;        /* horizontal swipe handled by the scroller */
}
.value__strip::-webkit-scrollbar{ display:none; }  /* hide scrollbar (WebKit) */
.value__slide{ scroll-snap-align:start; }   /* snap to left edge, next peeks */


/* Each slide holds an active (wide) and close (pill) image; .is-active picks. */
.value__slide{
  border:none;
  padding:0;
  margin:0;
  background:none;
  cursor:pointer;
  border-radius:999px;       /* pills are fully rounded (per Figma) */
  overflow:hidden;
  position:relative;
  height:100%;
  flex:0 0 auto;
  transition:flex-basis .45s cubic-bezier(.4,0,.2,1),
             width .45s cubic-bezier(.4,0,.2,1),
             border-radius .45s ease;
  -webkit-tap-highlight-color:transparent;
}
/* The active (wide) slide uses a rounded-rectangle radius, not a full pill */
.value__slide.is-active{
  border-radius:20px;
}
.value__slide img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  -webkit-user-drag:none;
  user-select:none;
  pointer-events:none;   /* clicks/drags handled by the slide button */
}
/* Both images absolutely fill the slide box; the slide's width/height controls
   dimensions (keeps every active slide the same rectangle). */
.value__img-active,
.value__img-close{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
/* Active image hidden by default; close (pill) shown. Soft fade + bloom. */
.value__img-active{
  opacity:0;
  transform:scale(1.04);
  transition:opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.value__img-close{
  opacity:1;
  transition:opacity .55s ease;
}

/* --- Mobile sizing — CLASSIC carousel: all slides uniform width, each shows
   the full dashboard image, swipe to move, next image peeks on the right. --- */
.value__slide{
  height:160px;
  /* Uniform slide width (per Figma 375px design ≈ 301px). On wider mobile
     (up to 599px) it grows a touch but caps so the next image always peeks. */
  width:clamp(280px, 80vw, 320px);
  flex:0 0 clamp(280px, 80vw, 320px);
  border-radius:16px;        /* all slides are rounded rectangles on mobile */
  box-shadow:0 0 30px rgba(0,149,213,.14), 0 12px 40px rgba(0,0,0,.10);
}
/* On mobile every slide shows the full (active) dashboard image */
.value__slide .value__img-active{ opacity:1; pointer-events:auto; transform:scale(1); }
.value__slide .value__img-close{ opacity:0; }

/* --- Slider indicator dots (mobile only) --- */
.value__dots{
  order:2;                   /* below the strip */
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:20px;
  width:100%;
}
.value__dot{
  width:8px;
  height:8px;
  border-radius:4px;
  background:var(--hs-light-grey);   /* light gray inactive */
  transition:width .4s cubic-bezier(.22,1,.36,1), background .35s ease;
}
.value__dot.is-active{
  width:24px;                /* active = elongated rounded rectangle */
  background:var(--hs-blue); /* blue */
}

/* =====================================================
   QUOTE BLOCK — (styles defined above in carousel block)
   ===================================================== */

/* =====================================================
   SERVICE — interactive: cursor/finger-following gradient
   glow border (blue→pink) + blue shadow + playful 3D tilt
   ===================================================== */
.service-section{ background:var(--hs-white); }
.service__cards{
  display:flex;
  flex-direction:column;
  gap:24px;
  padding:24px 0;
  width:100%;
  /* establish 3D space so the card tilt has perspective */
  perspective:1000px;
}
.service-card{
  display:flex;
  flex-direction:column;
  gap:16px;
  background:var(--hs-white);
  border-radius:20px;
  padding:24px;
  box-shadow:0 0 20px rgba(92,100,112,.12);
  cursor:pointer;
  text-align:left;
  position:relative;
  /* default tilt vars (neutral) — JS updates --rx/--ry on pointer move */
  --rx:0deg;
  --ry:0deg;
  --mx:50%;
  --my:50%;
  --glow:0;          /* 0 = idle, 1 = active (fades the glow in/out) */
  transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style:preserve-3d;
  transition:transform .25s ease, box-shadow .35s ease;
  isolation:isolate;
}
/* The gradient glow border — a pseudo-element behind the card.
   Uses a blue→pink gradient ring, masked to show only the border. */
.service-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:20px;
  padding:2px;                       /* border thickness */
  background:linear-gradient(135deg, #0095d5, #c3a4b2);
  /* show only the ring (mask out the center) */
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  opacity:var(--glow);
  transition:opacity .35s ease;
  pointer-events:none;
  z-index:2;
}
/* The cursor-following spotlight — a soft blue radial glow inside the card
   that tracks the pointer position (--mx/--my). */
.service-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:20px;
  background:radial-gradient(
    240px circle at var(--mx) var(--my),
    rgba(0,149,213,.18),
    transparent 60%
  );
  opacity:var(--glow);
  transition:opacity .35s ease;
  pointer-events:none;
  z-index:1;
}
/* When active, lift the card with a blue shadow */
.service-card.is-glowing{
  box-shadow:0 18px 40px rgba(0,149,213,.28);
}
/* keep inner content above the glow layers */
.service-card__head,
.service-card__body,
.service-card__icon{
  position:relative;
  z-index:3;
}
.service-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  gap:16px;
}
.service-card__title{
  font-family:var(--font-mincho);
  font-weight:600;
  font-size:22px;
  line-height:1.4;
  color:var(--hs-gray);
  margin:0;
}
.service-card__chip{
  flex-shrink:0;
  padding:4px 16px;
  background:var(--hs-light-grey);
  border:1px solid transparent;
  border-radius:999px;
  font-family:var(--font-inter);
  font-weight:600;
  font-size:12px;
  line-height:32px;
  letter-spacing:2px;
  color:var(--hs-gray);
}
.service-card__body{
  font-family:var(--font-inter),var(--font-jp);
  font-weight:400;
  font-size:14px;
  line-height:32px;
  color:#000;
}
.service-card__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:24px;
  width:100%;
  height:64px;
  position:relative;
  /* Push the icon to the bottom of the card so that, with equal-height
     cards, the icons line up across all cards regardless of text length. */
  margin-top:auto;
  /* Divider line — moved here from the body (same color/thickness) */
  border-top:4px solid var(--hs-light-grey);
}
.service-card__icon img{
  max-height:40px; width:auto;
  position:absolute;
}
/* Only the default icon is used now (no swap). Hide the hover-icon. */
.service-card__icon .default-icon{ opacity:1; }
.service-card__icon .hover-icon{ opacity:0; }


/* =====================================================
   COMPANY
   ===================================================== */
.company-section{
  background:var(--hs-bg-soft);
  position:relative;
  overflow:hidden;
}
.company__bg{
  position:absolute;
  top:120px;
  right:-200px;
  width:600px;
  height:400px;
  background:url('../assets/img/company-bg.png') center/cover;
  opacity:.6;
  mask-image:linear-gradient(90deg, transparent 30%, #000 70%);
  -webkit-mask-image:linear-gradient(90deg, transparent 30%, #000 70%);
  pointer-events:none;
}
.company__table{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:24px 0;
  width:100%;
  position:relative;
}
.company__row{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:24px 0;
  border-bottom:1px solid var(--hs-light-grey);
}
.company__row-label{
  font-family:var(--font-inter),var(--font-jp);
  font-weight:600;
  font-size:14px;
  line-height:32px;
  letter-spacing:2px;
  color:var(--hs-blue);
}
.company__row-value{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.company__row-value-primary{
  font-family:var(--font-inter),var(--font-jp);
  font-weight:400;
  font-size:16px;
  line-height:1.7;
  color:#000;
}
.company__row-value-sub{
  font-family:var(--font-inter),var(--font-jp);
  font-weight:400;
  font-size:14px;
  line-height:1.7;
  color:var(--hs-gray);
}
/* Phone number — special case under the address, 16px (vs the 14px sub) */
.company__row-phone{
  font-family:var(--font-inter),var(--font-jp);
  font-weight:400;
  font-size:16px;
  line-height:1.7;
  color:#000;
}
.company__row-zipcode{
  font-family:var(--font-inter),var(--font-jp);
  font-weight:400;
  font-size:16px;
  line-height:1.7;
  color:#000;
}

/* =====================================================
   CAREER
   ===================================================== */
.career-section{
  background:var(--hs-white);
  position:relative;
  overflow:hidden;
}
.career__bg{
  position:absolute;
  top:0; left:-200px;
  width:1440px;
  height:650px;
  opacity:.5;
  pointer-events:none;
  z-index:0;
}
.career__bg img{ width:100%; height:100%; }
.career__content{ position:relative; z-index:1; }

/* Career decoration — wiggle + fake 3D tilt on hover */
.career__decoration {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Establishes the 3D context — without this, transforms look flat */
  perspective: 800px;
  cursor: pointer;
}

.career__decoration img {
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
  /* Pre-set transform style so child transforms compose in 3D */
  transform-style: preserve-3d;
  will-change: transform;
}

/* On hover/touch: trigger the wiggle animation via a JS-added class.
   Using a class (not :hover) avoids the mobile "sticky hover" problem where
   the effect stayed stuck until you tapped elsewhere. The class is removed
   automatically when the animation ends, so it resets on its own. */
.career__decoration.is-wiggling img {
  animation: decorationWiggle 1.2s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes decorationWiggle {
  0%   { transform: perspective(800px) rotateX(0)    rotateY(0)    rotateZ(0)    scale(1); }
  15%  { transform: perspective(800px) rotateX(-8deg) rotateY(12deg) rotateZ(-2deg) scale(1.04); }
  30%  { transform: perspective(800px) rotateX(6deg)  rotateY(-10deg) rotateZ(2deg)  scale(1.06); }
  45%  { transform: perspective(800px) rotateX(-5deg) rotateY(8deg)  rotateZ(-1deg) scale(1.05); }
  60%  { transform: perspective(800px) rotateX(4deg)  rotateY(-6deg) rotateZ(1deg)  scale(1.04); }
  75%  { transform: perspective(800px) rotateX(-2deg) rotateY(3deg)  rotateZ(0)    scale(1.03); }
  100% { transform: perspective(800px) rotateX(0)    rotateY(0)    rotateZ(0)    scale(1); }
}

.career__list-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:24px 0;
  width:100%;
}
.career__list-title-jp{
  font-family:var(--font-inter),var(--font-jp);
  font-weight:700;
  font-size:22px;
  letter-spacing:1.1px;
  color:#000;
}
.career__list-title-sep{
  font-family:var(--font-inter);
  font-weight:700;
  font-size:22px;
  color:var(--hs-light-grey);
}
.career__list-title-en{
  font-family:var(--font-inter);
  font-weight:400;
  font-size:22px;
  letter-spacing:1.1px;
  color:var(--hs-gray);
}

.career__jobs{
  display:flex;
  flex-direction:column;
  gap:24px;
  width:100%;
  padding-bottom:24px;
}
.job-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  background:var(--hs-white);
  border:1px solid var(--hs-light-grey);
  border-radius:20px;
  padding:24px;
  box-shadow:0 0 20px rgba(195,164,178,.15);
  transition:box-shadow .3s;
}
.job-card:hover{ box-shadow:0 8px 30px rgba(195,164,178,.3); }
.job-card.is-open{ border-color:var(--hs-blue); }   /* 1px blue stroke when open */
.job-card__division{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 0;
  width:100%;
  gap:16px;
  cursor:pointer;
}
.job-card__division-tag{
  background:var(--hs-blue);
  color:var(--hs-white);
  padding:4px 12px;
  font-family:var(--font-inter),var(--font-jp);
  font-weight:700;
  font-size:13px;
  white-space: pre-wrap;
}
.job-card__toggle{
  flex-shrink:0;
  width:32px; height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  background:none;
  border:none;
}
.job-card__toggle .icon-expand{ display:block; }
.job-card__toggle .icon-close{ display:none; }
.job-card.is-open .job-card__toggle .icon-expand{ display:none; }
.job-card.is-open .job-card__toggle .icon-close{ display:block; }
.job-card__toggle img{ width:32px; height:32px; display:block; }

.job-card__tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding-bottom:16px;
}
.job-card__tag{
  background:var(--hs-light-grey);
  border-radius:8px;
  padding:6px 12px;
  font-family:var(--font-inter),var(--font-jp);
  font-size:14px;
  color:#000;
}
.job-card__worktype{
  padding-bottom:16px;
  font-family:var(--font-inter),var(--font-jp);
  font-weight:700;
  font-size:16px;
  color:#000;
}
.job-card__position{
  background:var(--hs-blue);
  color:var(--hs-white);
  padding:4px 12px;
  font-family:var(--font-inter),var(--font-jp);
  font-weight:700;
  font-size:16px;            /* division style, bumped 13px -> 16px */
  white-space:pre-wrap;
}
.job-card__body{
  display:none;
}
.job-card.is-open .job-card__body{ display:flex; flex-direction:column; gap:8px; }
.job-card__detail{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-bottom:16px;
}
.job-card__detail-title{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px;
  font-family:var(--font-inter),var(--font-jp);
  font-weight:700;
  font-size:16px;
  color:#000;
}
.job-card__detail-title img{ width:24px; height:24px; }
.job-card__detail-text{
  padding:8px 8px 8px 24px;
  border-radius:8px;
  font-family:var(--font-inter),var(--font-jp);
  font-weight:400;
  font-size:15px;
  line-height:24px;
  color:var(--hs-gray);
  white-space:pre-line;
}
/* Apply button — full width per spec */
.job-card__apply{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:48px;
  background:var(--hs-blue);
  color:var(--hs-white);
  border:1px solid var(--hs-blue);
  border-radius:999px;
  font-family:var(--font-inter);
  font-weight:700;
  font-size:16px;
  width:100%;
  margin-top:8px;
  transition:background .25s, color .25s, box-shadow .35s;
}
.job-card__apply:hover{
  background:var(--hs-white);
  color:var(--hs-blue);
  box-shadow:0 0 30px rgba(0,149,213,.35);
}

/* =====================================================
   CONTACT
   ===================================================== */
.contact-section{
  background:var(--hs-white);
  padding-bottom:120px;
}
.contact__card{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:24px;
  background:var(--hs-white);
  border:1px solid var(--hs-light-grey);
  border-radius:20px;
  box-shadow:0 0 10px rgba(195,164,178,.15);
  width:100%;
}
.contact__info{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.contact__info-body{
  padding:24px 0;
  font-family:var(--font-inter),var(--font-jp);
  font-weight:400;
  font-size:16px;
  line-height:32px;
  color:var(--hs-gray);
}
.contact__form{
  display:flex;
  flex-direction:column;
  gap:24px;
  width:100%;
}
.contact__field{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom: 24px;
}
.contact__field-label{
  font-family:var(--font-inter),var(--font-jp);
  font-weight:400;
  font-size:12px;
  line-height:18px;
  color:var(--hs-gray);
}
.contact__field input,
.contact__field select,
.contact__field textarea{
  width:100%;
  height:56px;
  padding:0 16px;
  border:1px solid var(--hs-light-grey);
  border-radius:8px;
  background:var(--hs-white);
  font-family:var(--font-inter),var(--font-jp);
  font-size:16px;
  color:var(--hs-blue);
  transition:border-color .2s, box-shadow .2s, color .2s;
}
.contact__field textarea{
  height:auto;
  min-height:140px;
  padding:16px;
  resize:vertical;
}
/* Placeholder text stays light grey (only the typed text is blue) */
.contact__field input::placeholder,
.contact__field textarea::placeholder{
  color:var(--hs-light-grey);
}
/* Dropdown: grey while showing the placeholder option, blue once a real
   choice is selected. JS adds .has-value when a non-empty option is chosen. */
.contact__field select{
  color:var(--hs-light-grey);
}
.contact__field select.has-value{
  color:var(--hs-blue);
}
.contact__field input:focus,
.contact__field textarea:focus,
.contact__field select:focus{
  outline:none;
  border-color:var(--hs-blue);
  box-shadow:0 2px 20px rgba(0,149,213,.2);
}
/* Submit wraps full width */
.contact__submit{
  width:100%;
  margin-top:8px;
}
.contact__submit .cta-button{ width:100%; }

/* Disabled submit — when consent checkbox is unchecked */
.contact__submit .cta-button:disabled,
.contact__submit .cta-button[disabled]{
  opacity:.5;
  cursor:not-allowed;
  pointer-events:none;
}

/* =====================================================
   CONTACT — privacy consent checkbox
   Required for APPI 利用目的 disclosure + GDPR explicit consent
   Positioned below the submit button (per V16 spec) — the gating
   logic still works since submit stays disabled until checked.
   ===================================================== */
.contact__consent{
  width:100%;
  margin-top:16px;
}
.contact__consent-label{
  display:flex;
  align-items:center;  /* center vertically since text is single line now */
  gap:10px;
  cursor:pointer;
  user-select:none;
}
/* Hide native checkbox visually but keep accessible */
.contact__consent input[type="checkbox"]{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
/* Custom checkbox box */
.contact__consent-box{
  flex-shrink:0;
  width:18px;
  height:18px;
  border:1.5px solid var(--hs-light-grey);
  border-radius:4px;
  background:var(--hs-white);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease, border-color .2s ease, transform .15s ease;
  color:var(--hs-white);
}
.contact__consent-box svg{
  width:12px;
  height:12px;
  opacity:0;
  transform:scale(.5);
  transition:opacity .15s ease, transform .15s ease;
}
.contact__consent-label:hover .contact__consent-box{
  border-color:var(--hs-blue);
}
.contact__consent input:checked + .contact__consent-box{
  background:var(--hs-blue);
  border-color:var(--hs-blue);
}
.contact__consent input:checked + .contact__consent-box svg{
  opacity:1;
  transform:scale(1);
}
/* Focus ring for keyboard users */
.contact__consent input:focus-visible + .contact__consent-box{
  box-shadow:0 0 0 3px rgba(0,149,213,.25);
}
.contact__consent-text{
  font-family:var(--font-inter),var(--font-jp);
  font-weight:400;
  font-size:12px;
  line-height:1.4;
  color:var(--hs-gray);
  /* Force single line per V16 spec */
  white-space:nowrap;
  /* If the container is too narrow to fit, allow horizontal scroll
     within the consent block rather than wrapping or pushing the page */
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.contact__consent-text a{
  color:var(--hs-blue);
  text-decoration:underline;
  text-underline-offset:2px;
  transition:color .2s;
}
.contact__consent-text a:hover{
  color:#007ab0;
}

/* Honeypot — extra safety to keep it unreachable/invisible */
.contact__honeypot{
  position:absolute !important;
  left:-9999px !important;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

/* Status message shown after submit (success / error) */
.contact__status{
  width:100%;
  margin:16px 0 0;
  padding:14px 16px;
  border-radius:10px;
  font-family:var(--font-inter),var(--font-jp);
  font-size:14px;
  line-height:1.6;
}
.contact__status.is-success{
  background:rgba(0,149,213,.08);
  border:1px solid var(--hs-blue);
  color:#007ab0;
}
.contact__status.is-error{
  background:rgba(220,53,69,.06);
  border:1px solid #dc3545;
  color:#c62330;
}

/* ---- Success pop-up (over the form, auto-dismiss + close button) ---- */
.contact__popup{
  position:fixed;
  inset:0;
  z-index:10001;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.contact__popup.is-visible{
  opacity:1;
  visibility:visible;
}
.contact__popup-backdrop{
  position:absolute;
  inset:0;
  background:rgba(10,20,34,.45);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.contact__popup-card{
  position:relative;
  width:100%;
  max-width:420px;
  background:var(--hs-white);
  border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  padding:40px 32px 32px;
  text-align:center;
  transform:translateY(16px) scale(.98);
  transition:transform .3s ease;
}
.contact__popup.is-visible .contact__popup-card{
  transform:translateY(0) scale(1);
}
.contact__popup-close{
  position:absolute;
  top:12px;
  right:12px;
  width:32px;
  height:32px;
  border-radius:50%;
  background:none;
  border:none;
  cursor:pointer;
  font-size:26px;
  line-height:1;
  color:var(--hs-gray);
  transition:background .2s, color .2s;
}
.contact__popup-close:hover{
  background:#f6f9fc;
  color:var(--hs-blue);
}
.contact__popup-icon{
  width:56px;
  height:56px;
  margin:0 auto 16px;
  color:var(--hs-blue);
}
.contact__popup-icon svg{
  width:100%;
  height:100%;
  display:block;
}
.contact__popup-text{
  font-family:var(--font-inter),var(--font-jp);
  font-size:15px;
  line-height:1.7;
  color:var(--hs-gray);
  margin:0;
}

/* =====================================================
   FOOTER
   ===================================================== */
.site-footer{
  padding:60px 16px 0;
  background:linear-gradient(245.97deg, var(--hs-pink) 0%, var(--hs-blue) 100%);
  color:var(--hs-white);
}
.site-footer__inner{
  max-width:1248px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:24px;
}
.site-footer__top{
  display:flex;
  flex-direction:column;
  gap:32px;
  justify-content:space-between;
  align-items:flex-start;
  width:100%;
}
.site-footer__brand{
  display:flex;
  flex-direction:column;
  gap:16px;
  width:239px;
}
.site-footer__brand-logo img{
  width:150px; height:auto;
}
.site-footer__brand-jp{
  font-family:var(--font-mincho);
  font-weight:600;
  font-size:18px;
  line-height:32px;
  color:var(--hs-white);
}
.site-footer__brand-en{
  font-family:var(--font-inter);
  font-weight:400;
  font-style:italic;
  font-size:16px;
  line-height:32px;
  color:var(--hs-white);
}
.site-footer__brand-bar{
  width:60px; height:4px;
  background:var(--hs-pink);
}
.site-footer__desc{
  font-family:var(--font-inter),var(--font-jp);
  font-weight:400;
  font-size:14px;
  line-height:32px;
  color:var(--hs-white);
}

.site-footer__sitemap{
  padding:24px 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}
/* Single horizontal row of links with a vertical divider in the middle */
.site-footer__links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:24px;                    /* 24px between items */
  list-style:none;
  margin:0;
  padding:0;
  width:100%;
}
.site-footer__links a{
  font-family:var(--font-inter),var(--font-jp);
  font-weight:400;
  font-size:14px;
  line-height:1.6;
  color:var(--hs-light-grey);  /* same colour as before */
  transition:color .2s;
}
.site-footer__links a:hover{
  color:var(--hs-white);       /* same hover as before */
}
/* White 1px vertical spacer between the two link groups */
.site-footer__links-divider{
  width:1px;
  align-self:stretch;
  min-height:16px;
  background:var(--hs-white);
  opacity:.4;
}

.site-footer__sns{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding:24px 0;
}
.site-footer__sns a{
  width:32px; height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .25s;
}
.site-footer__sns a:hover{
  transform:translateY(-3px) scale(1.1);
}
.site-footer__sns img{
  width:16px; height:16px;
}

.site-footer__copyright{
  padding:24px 0;
  text-align:center;
  border-top:1px solid rgba(255,255,255,.4);
  font-family:var(--font-inter);
  font-weight:300;
  font-size:12px;
  line-height:32px;
  color:var(--hs-white);
}

/* =====================================================
   TABLET BREAKPOINT (600 → 1024px)
   ===================================================== */
@media (min-width:600px){
  .site-header{ height:65px; }
  .site-header__inner{ padding:0 32px; }

  /* Hero — tablet positioning */
  .hero{ height:420px; margin-top:65px; }
  .hero__blue-shape{ left:144px; top:-48px; width:1440px; height:650px; }
  .hero__dots{ top:-100px; left:-195px; width:1723px; height:537px; }
  .hero__hexashape{ top:43px; left:344px; width:410px; height:329px; }
  .hero__title{ top:37px; left:60px; width:380px; height:133px; }
  .hero__subtext{ top:220px; left:60px; }
  .hero__subtext p{ font-size:24px; line-height:38px; }
  .hero__logo{ top:254px; left:60px; width:180px; height:auto; }
  .hero__tagline-bar{ justify-content:flex-end; padding-right:24px; }

  /* Sections */
  .section{ padding:80px 24px; }

  /* Section title — tablet scale (per section-title.png middle view) */
  .section-title__en,
  .section-title__jp{
    font-size:36px;
    line-height:44px;
  }
  .section-title__jp{
    /* Allow Japanese title to wrap to next line beside EN */
    white-space:normal;
  }
  .section-title__quote{
    font-size:28px;
    line-height:42px;
  }

  /* Vision roulette — horizontal: picker on the LEFT (points right), track right */
  .vision__roulette{
    flex-direction:row;
    align-items:flex-start;    /* picker sits toward the top, not centered */
    justify-content:flex-start; /* left-align the roulette block (horizontal layout) */
    gap:0;
    padding:40px 0;
  }
  .vision__picker{
    margin-bottom:0;
    margin-right:14px;         /* room for the right-pointing triangle */
    margin-top:137px;          /* sit a bit ABOVE the active card's center */
    padding:24px 32px;
    border-radius:20px;
    z-index:3;
  }
  /* Triangle now points RIGHT (toward the cards) instead of down */
  .vision__picker::after{
    top:50%;
    left:100%;
    transform:translateY(-50%);
    border-left:18px solid var(--hs-blue);
    border-top:18px solid transparent;
    border-bottom:18px solid transparent;
    border-right:0;
  }
  .vision__picker-text{ font-size:28px; }

  .vision__track{
    max-width:640px;
    height:360px;              /* desktop viewport height */
    margin-top:0;              /* reset mobile tuck */
    flex:1 1 auto;
  }
  .vision-card{
    max-width:600px;
    min-height:140px;          /* taller active card (clearly > picker box) */
    gap:24px;
    padding:28px 32px;
  }
  .vision-card__text{ font-size:22px; line-height:1.5; }
  .vision-card__icon{ width:52px; }
  /* Neighbors tuck close behind the active card (almost overlapping) */
  .vision-card.is-prev{ transform:translate(-50%,calc(-50% - 96px)) scale(.8); }
  .vision-card.is-next{ transform:translate(-50%,calc(-50% + 96px)) scale(.8); }

  /* Company table */
/* Company table */
  .company__row{
    flex-direction:row;
    gap:24px;
    align-items:center;
  }
  .company__row-label{
    flex-shrink:0;
    width:120px;
  }
  .company__row-value{ flex:1; }

  /* Job card */
  .job-card{ padding:32px; }

  /* Contact form — 2 columns on tablet */
  .contact__card{ padding:32px; }
  .contact__form{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:24px;
    row-gap:24px;
  }
  .contact__field--message,
  .contact__submit{
    grid-column:1 / -1;
  }

  /* Footer */
  .site-footer{ padding:80px 24px 0; }
  .site-footer__top{
    flex-direction:row;
    align-items:flex-end;
  }
  .site-footer__desc-side{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    text-align:right;
  }
  .site-footer__sns{ justify-content:flex-start; }

  /* =====================================================
     CAROUSEL — Tablet & up (600px+)
     One horizontal row that FITS the container (no overflow): active slide
     expands to fill, pills are fixed 80px. Capped at 1044px, centered.
     Quote stays on top (handled by base order). Same style as desktop.
     ===================================================== */
  .value__carousel{
    padding:80px 0 0;          /* keep top spacing from the value cards above */
    border-radius:0;
    background:none;
  }
  .value__strip{
    flex-wrap:nowrap;
    align-items:stretch;        /* pills + active share the row height */
    gap:16px;
    width:100%;
    max-width:1044px;
    margin:0 auto;
    padding:0;                  /* reset mobile centering padding */
    scroll-padding:0;
    /* Row height scales with viewport width so the active slide keeps close to
       its 660:350 rectangle as the screen narrows (instead of going square).
       At ~1044px wide → ~363px tall; at ~600px wide → ~165px tall. */
    height:clamp(150px, 28vw, 363px);
    overflow:visible;           /* reset mobile overflow — full row fits here */
    touch-action:auto;
    cursor:grab;                /* draggable to rotate */
  }
  .value__strip:active{ cursor:grabbing; }
  /* Slider dots are mobile-only — hide on tablet/desktop */
  .value__dots{ display:none; }

  /* Reset mobile uniform-slide defaults back to the pill model */
  .value__slide{
    width:auto;
    border-radius:20px;        /* active = rounded rect; pills overridden below */
    box-shadow:none;
  }
  /* Active slide expands to fill remaining width; height comes from the row.
     Because the row height scales with viewport, the active stays a wide
     rectangle rather than collapsing toward a square on manual resize. */
  .value__slide.is-active{
    order:0;                    /* stays in its DOM position among the pills */
    flex:1 1 0;
    width:auto;
    min-width:0;
    height:100%;
    max-width:none;
    box-shadow:0 0 30px rgba(0,149,213,.18), 0 12px 40px rgba(0,0,0,.12);
  }
  /* Closed pills: fully rounded, show the close (pill) image, hide active */
  .value__slide:not(.is-active){
    flex:0 0 clamp(56px, 7vw, 80px);
    width:clamp(56px, 7vw, 80px);
    height:100%;
    max-width:80px;
    border-radius:999px;       /* pills fully rounded */
  }
  .value__slide:not(.is-active) .value__img-active{ opacity:0; }
  .value__slide:not(.is-active) .value__img-close{ opacity:1; }
  .value__slide.is-active .value__img-close{ opacity:0; }
  /* On tablet/desktop the active image fills its box */
  .value__slide.is-active .value__img-active{
    object-fit:cover;
    opacity:1;
  }
}

/* =====================================================
   DESKTOP BREAKPOINT (1025px+)
   ===================================================== */
@media (min-width:1025px){
  .site-header{ height:80px; }
  .site-header__inner{ padding:0 64px; }
  .site-header__logo img{ height:33px; }
  .menu-toggle{ display:none; }
  .mobile-menu{ display:none !important; }
  .site-header__nav-desktop{
    display:flex;
    flex:1;
    justify-content:center;
    align-items:center;
    gap:48px;
    height:100%;
  }
  .site-header__nav-desktop a{
    font-family:var(--font-inter);
    font-weight:300;
    font-size:16px;
    line-height:22px;
    color:var(--hs-gray);
    position:relative;
    transition:color .2s;
    padding:4px 0;
  }
  .site-header__nav-desktop a::after{
    content:"";
    position:absolute;
    bottom:-2px;
    left:50%;
    transform:translateX(-50%);
    width:0; height:2px;
    background:var(--hs-blue);
    transition:width .25s ease;
  }
  .site-header__nav-desktop a:hover{ color:var(--hs-blue); }
  .site-header__nav-desktop a:hover::after{ width:100%; }
  .site-header__cta{
    display:flex;
    align-items:center;
  }
  .site-header__cta .cta-button{
    height:48px;
    padding:8px 16px;
    gap:8px;
  }

  /* Hero — exact desktop positioning */
  .hero{ height:614px; margin-top:80px; }
  .hero__blue-shape{ left:167px; top:-48px; width:1440px; height:650px; }
  .hero__dots{ top:100px; left:-156px; width:2359px; height:730px; }
  .hero__hexashape{ top:36px; left:797px; width:696px; height:558px; }
  .hero__title{ top:62.93px; left:171px; width:750px; height:262px; }
  .hero__subtext{ top:380px; left:171px; gap:24px; }
  .hero__subtext p{ font-size:20.5px; line-height:36.44px; }
  .hero__logo{ top:419px; left:171px; width:260px; height:auto; }
  .hero__tagline-bar{ padding-right:96px; }

  /* Sections — desktop padding */
  .section{ padding:120px 96px; }

  /* Section title — desktop scale */
  .section-title__en{
    font-size:40px;
    line-height:52px;
    white-space:nowrap;
  }
  .section-title__jp{
    font-size:40px;
    line-height:52px;
    /* Desktop: keep single line where possible */
    white-space:nowrap;
  }
  .section-title__quote{
    font-size:40px;
    line-height:50px;
  }

  /* Body text fills the container in all sections by default... */
  .section__content > .body-text{
    width:100%;
    max-width:100%;
  }
  /* ...except the Mission section, which keeps the 880px reading width */
  #mission .section__content > .body-text{
    width:880px;
    max-width:100%;
  }

  /* Value cards — 3 columns, equal height (stretch to the tallest) */
  .value__cards{
    flex-direction:row;
    align-items:stretch;
    gap:32px;
    padding:24px;
  }
  .value-card{
    flex:1 1 0;
    min-width:0;
  }
  /* Carousel — stays in column at 1240-1439, switches to row at 1440+ (see media block below) */

  /* Service cards — 3 columns */
  .service__cards{
    flex-direction:row;
    align-items:stretch;   /* equal height — all cards match the tallest */
    gap:32px;
    padding:24px 32px;
    width:100%;
  }
  .service-card{ flex:1 1 0; min-width:0; }

  /* Company */
  .company__table{
    width:880px;
    max-width:100%;
    padding:0 24px;
  }
  .company__row-label{ width:240px; }
  .company__bg{
    width:1150px; 
    height:673px;
    top:50px; 
    right:100px;
    border-radius: 20px;
  }

  /* Career */
  .career-section{ position:relative; }
  .career__bg{ width:1440px; height:804px; top:0; left:-406px; opacity:1; }
  .career__jobs{ align-items:center; }
  .job-card{
    width:1036px;
    max-width:100%;
  }
  /* Apply button still full-width */
  .job-card__apply{
    width:100%;
  }

  /* Contact */
  .contact-section{ padding:40px 96px 120px; }
  .contact__card{ padding:32px; }

  /* Footer */
  .site-footer{ padding:120px 96px 0; }
}

/* =====================================================
   WIDE DESKTOP (1440px+)
   Carousel keeps the same horizontal strip (capped at 1044px)
   with the quote block below it — no layout change needed beyond
   what the tablet/desktop strip rules already provide.
   ===================================================== */
@media (min-width:1440px){
  /* Strip already caps at 1044px and centers; nothing further required.
     Quote block stays below, left-aligned, fixed size (per spec). */
}

/* =====================================================
   POLICY PAGES (privacy.html / terms.html / cookie.html)
   Shared layout for legal content pages.
   Based on .body-text for body paragraphs; headings use the spec's
   sizes (24px JP / 20px EN bold).
   ===================================================== */
.policy-page{
  /* Reserve space for fixed header */
  padding-top:65px;
}
@media (min-width:1025px){
  .policy-page{ padding-top:80px; }
}
.policy-section{
  background:var(--hs-white);
  padding:60px 16px 80px;
}
@media (min-width:600px){
  .policy-section{ padding:80px 24px 100px; }
}
@media (min-width:1025px){
  .policy-section{ padding:120px 96px 140px; }
}
.policy-section__container{
  max-width:880px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
}
.policy-page__title{
  /* Reuses the .section-title styles via composition in the HTML */
  margin-bottom:24px;
}

/* Headings inside policy body */
.policy-h2{
  font-family:var(--font-inter),var(--font-jp);
  font-weight:600;
  font-size:24px;
  line-height:1.5;
  color:#000;
  margin:0;
}
.policy-h3{
  font-family:var(--font-inter);
  font-weight:600;
  font-size:20px;
  line-height:1.5;
  color:var(--hs-gray);
  margin:0;
}
/* Body paragraphs — same baseline as .body-text (16px / 32 line-height) */
.policy-p{
  font-family:var(--font-inter),var(--font-jp);
  font-weight:400;
  font-size:16px;
  line-height:32px;
  color:#000;
  margin:0;
}
.policy-p--en{
  color:var(--hs-gray);
}

/* Unified link style for ALL clickable text inside policy page bodies
   (privacy / terms / cookie). Blue + underline with offset — matches the
   .cookie-preferences-link treatment. Applies to existing links and any
   future links dropped in with the legal team's reviewed text, so no need
   to tag each <a> individually. */
.policy-section__container a{
  color:var(--hs-blue);
  text-decoration:underline;
  text-underline-offset:3px;
  transition:color .2s ease;
}
.policy-section__container a:hover{
  color:#007ab0;
}

/* Spacing utilities used per SPECS column of the source sheet:
   .policy-gap--32 = 32px gap before the next block
   .policy-gap--64 = 64px gap before the next block (between sections)
   These are placed AFTER the element they follow, like a manual margin. */
.policy-gap--32{ height:32px; }
.policy-gap--64{ height:64px; }

/* Effective-date / footer note inside policy */
.policy-footnote{
  margin-top:48px;
  padding-top:24px;
  border-top:1px solid var(--hs-light-grey);
  font-family:var(--font-inter),var(--font-jp);
  font-size:14px;
  line-height:1.8;
  color:var(--hs-gray);
}

/* =====================================================
   LANGUAGE SWITCHER — globe icon + dropdown
   Icon #e1e1e1, dropdown options blue(active)/gray(hover)
   ===================================================== */
.lang-switch{
  position:relative;
  display:inline-flex;
  align-items:center;
}
/* The globe icon button */
.lang-switch__toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:auto;
  min-width:32px;
  height:32px;
  padding:0 4px;
  background:none;
  border:none;
  cursor:pointer;
  border-radius:6px;
  transition:background .2s ease;
}
/* Icon is a pre-colored SVG per location (header=light grey, mobile=gray, footer=white) */
.lang-switch__toggle img{
  width:24px;
  height:24px;
  display:block;
  flex-shrink:0;
}
/* The blue hover icon (header only) is hidden by default */
.lang-switch__toggle .lang-icon-hover{
  display:none;
}
/* The current-language text label — hidden by default, shown only in footer */
.lang-switch__current{
  display:none;
  font-family:var(--font-inter);
  font-weight:400;
  font-size:12px;
  line-height:1;
}
.lang-switch__toggle:hover{
  background:rgba(0,0,0,.04);
}

/* Dropdown menu */
.lang-switch__menu{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  min-width:120px;
  background:var(--hs-white);
  border:1px solid var(--hs-light-grey);
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  padding:6px;
  display:flex;
  flex-direction:column;
  gap:2px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index:50;
}
.lang-switch.is-open .lang-switch__menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.lang-switch__menu [data-lang]{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  text-align:left;
  background:none;
  border:none;
  padding:8px 12px;
  border-radius:6px;
  cursor:pointer;
  font-family:var(--font-inter),var(--font-jp);
  font-weight:400;
  font-size:14px;
  line-height:1.2;
  color:var(--hs-gray);
  transition:color .2s ease, background .2s ease;
}
.lang-switch__menu [data-lang]:hover{
  color:var(--hs-blue);
  background:rgba(0,149,213,.06);
}
.lang-switch__menu [data-lang].is-active{
  color:var(--hs-blue);
  font-weight:600;
  cursor:default;
}

/* Header placement — sits between desktop nav and CTA */
.site-header__lang{
  display:none;
}
@media (min-width:1025px){
  .site-header__lang{
    display:flex;
    align-items:center;
    margin-right:32px;
  }
}
/* Header-only hover (desktop/large screens): remove the grey rounded-square
   background and instead swap the light-grey icon for the blue one. */
@media (min-width:1025px){
  .site-header__lang .lang-switch__toggle:hover{
    background:none;
  }
  .site-header__lang .lang-switch__toggle:hover .lang-icon-default{
    display:none;
  }
  .site-header__lang .lang-switch__toggle:hover .lang-icon-hover{
    display:block;
  }
}

/* Mobile menu — language switch sits centered, above the CTA.
   Icon uses hs-gray here (per spec). */
.mobile-menu__lang{
  display:flex;
  justify-content:center;
  padding:16px 0 8px;
}
/* On mobile the dropdown opens centered, not right-aligned */
.mobile-menu__lang .lang-switch__menu{
  right:auto;
  left:50%;
  transform:translate(-50%, -6px);
}
.mobile-menu__lang.is-open .lang-switch__menu{
  transform:translate(-50%, 0);
}

/* Footer placement — last row above the copyright line.
   Icon is white + shows current-language text label (per spec). */
.site-footer__lang{
  display:flex;
  justify-content:center;
  padding:16px 0 8px;
}
@media (min-width:600px){
  .site-footer__lang{
    justify-content:flex-start;
  }
  /* flush-left when the footer switcher is left-aligned (mobile stays centered) */
  .site-footer__lang .lang-switch__toggle{ padding-left:0; }
}
/* Show the current-language text label only in the footer */
.site-footer__lang .lang-switch__current{
  display:inline-block;
  color:var(--hs-white);
}
/* Footer dropdown opens upward (footer is at page bottom), kept tight to the icon */
.site-footer__lang .lang-switch__menu{
  top:auto;
  bottom:calc(100% + 6px);
  left:0;
  right:auto;
  transform:translateY(6px);
}
.site-footer__lang.is-open .lang-switch__menu{
  transform:translateY(0);
}
.site-footer__lang .lang-switch__toggle:hover{
  background:rgba(255,255,255,.12);
}

/* =====================================================
   COOKIE CONSENT — banner + modal (Option B / GDPR)
   ===================================================== */

/* ---- Banner (floating snackbar, bottom-left) ---- */
.cookie-banner{
  position:fixed;
  left:16px;
  right:16px;
  bottom:16px;
  z-index:9999;
  max-width:480px;
  background:rgba(255,255,255,.98);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  /* border:1px solid var(--hs-light-grey); */
  border-radius:16px;
  box-shadow:0 12px 32px rgba(0,0,0,.16);
  transform:translateY(calc(100% + 16px));
  transition:transform .45s cubic-bezier(.4,0,.2,1), opacity .45s ease;
  opacity:0;
}
.cookie-banner.is-visible{
  transform:translateY(0);
  opacity:1;
}
.cookie-banner__inner{
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:flex-start;
}
.cookie-banner__text{
  font-family:var(--font-inter),var(--font-jp);
  font-weight:400;
  font-size:14px;
  line-height:1.7;
  color:var(--hs-gray);
  margin:0;
  flex:1 1 auto;
  min-width:0;
}
.cookie-banner__link{
  color:var(--hs-blue);
  text-decoration:underline;
  text-underline-offset:2px;
  transition:color .2s;
}
.cookie-banner__link:hover{
  color:#007ab0;
}
.cookie-banner__actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  width:100%;
}
.cookie-banner__btn{
  /* Equal-weight buttons per GDPR best practice */
  flex:1 1 0;
  min-width:0;
  padding:11px 14px;
  border-radius:999px;
  font-family:var(--font-inter),var(--font-jp);
  font-weight:600;
  font-size:13px;
  line-height:1.2;
  cursor:pointer;
  border:1px solid transparent;
  transition:background .2s, color .2s, border-color .2s, transform .15s;
  white-space:nowrap;
}
.cookie-banner__btn:active{ transform:scale(.97); }
.cookie-banner__btn--primary{
  background:var(--hs-blue);
  color:var(--hs-white);
  border-color:var(--hs-blue);
}
.cookie-banner__btn--primary:hover{
  background:#007ab0;
  border-color:#007ab0;
}
.cookie-banner__btn--secondary{
  background:var(--hs-white);
  color:var(--hs-gray);
  border-color:var(--hs-light-grey);
}
.cookie-banner__btn--secondary:hover{
  background:#f6f9fc;
  color:var(--hs-blue);
  border-color:var(--hs-blue);
}

@media (min-width:600px){
  .cookie-banner{
    /* Anchor to bottom-left corner as a contained box */
    right:auto;
    left:24px;
    bottom:24px;
    width:420px;
    transform:translateY(calc(100% + 24px));
  }
  .cookie-banner.is-visible{
    transform:translateY(0);
  }
  .cookie-banner__inner{
    padding:24px;
  }
  .cookie-banner__text{
    font-size:14px;
  }
}

/* ---- Modal (settings) ---- */
.cookie-modal{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.cookie-modal.is-visible{
  opacity:1;
  visibility:visible;
}
.cookie-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(10,20,34,.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.cookie-modal__panel{
  position:relative;
  width:100%;
  max-width:600px;
  max-height:90vh;
  background:var(--hs-white);
  border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transform:translateY(20px);
  transition:transform .3s ease;
}
.cookie-modal.is-visible .cookie-modal__panel{
  transform:translateY(0);
}
.cookie-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:24px 24px 8px;
  gap:16px;
}
.cookie-modal__title{
  font-family:var(--font-inter),var(--font-jp);
  font-weight:700;
  font-size:20px;
  line-height:1.3;
  color:var(--hs-text, #000);
  margin:0;
}
.cookie-modal__close{
  flex-shrink:0;
  width:32px;
  height:32px;
  border-radius:50%;
  background:none;
  border:none;
  cursor:pointer;
  font-size:28px;
  line-height:1;
  color:var(--hs-gray);
  transition:background .2s, color .2s;
}
.cookie-modal__close:hover{
  background:#f6f9fc;
  color:var(--hs-blue);
}
.cookie-modal__intro{
  padding:8px 24px 16px;
  font-family:var(--font-inter),var(--font-jp);
  font-weight:400;
  font-size:14px;
  line-height:1.7;
  color:var(--hs-gray);
  margin:0;
}
.cookie-modal__list{
  list-style:none;
  padding:0 24px;
  margin:0;
  flex:1 1 auto;
  overflow-y:auto;
}
.cookie-cat{
  padding:20px 0;
  border-top:1px solid var(--hs-light-grey);
}
.cookie-cat:first-child{ border-top:none; }
.cookie-cat__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:8px;
}
.cookie-cat__name{
  font-family:var(--font-inter),var(--font-jp);
  font-weight:600;
  font-size:16px;
  line-height:1.4;
  color:#000;
  margin:0;
}
.cookie-cat__desc{
  font-family:var(--font-inter),var(--font-jp);
  font-weight:400;
  font-size:13px;
  line-height:1.7;
  color:var(--hs-gray);
  margin:0;
}
.cookie-cat__locked{
  font-family:var(--font-inter),var(--font-jp);
  font-size:12px;
  font-weight:500;
  color:var(--hs-gray);
  padding:4px 10px;
  background:#f1f3f5;
  border-radius:999px;
  flex-shrink:0;
}

/* Toggle switch */
.cookie-toggle{
  position:relative;
  display:inline-block;
  width:44px;
  height:24px;
  flex-shrink:0;
  cursor:pointer;
}
.cookie-toggle input{
  opacity:0;
  width:0;
  height:0;
  position:absolute;
}
.cookie-toggle__slider{
  position:absolute;
  inset:0;
  background:var(--hs-light-grey);
  border-radius:999px;
  transition:background .25s ease;
}
.cookie-toggle__slider::before{
  content:"";
  position:absolute;
  left:2px;
  top:2px;
  width:20px;
  height:20px;
  background:#fff;
  border-radius:50%;
  transition:transform .25s ease;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.cookie-toggle input:checked + .cookie-toggle__slider{
  background:var(--hs-blue);
}
.cookie-toggle input:checked + .cookie-toggle__slider::before{
  transform:translateX(20px);
}
.cookie-toggle input:focus-visible + .cookie-toggle__slider{
  box-shadow:0 0 0 3px rgba(0,149,213,.25);
}

.cookie-modal__foot{
  padding:16px 24px 24px;
  border-top:1px solid var(--hs-light-grey);
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.cookie-modal__foot .cookie-banner__btn{
  flex:1 1 0;
  min-width:0;
}
@media (min-width:600px){
  .cookie-modal__foot{ gap:12px; }
  .cookie-modal__foot .cookie-banner__btn{ flex:0 1 auto; padding:12px 24px; }
  .cookie-modal__foot .cookie-banner__btn:last-child{ margin-left:auto; }
}

/* "Manage preferences" link helper — for use on cookie.html */
.cookie-preferences-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--hs-blue);
  font-family:var(--font-inter),var(--font-jp);
  font-weight:500;
  font-size:15px;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
  background:none;
  border:none;
  padding:0;
  transition:color .2s;
}
.cookie-preferences-link:hover{
  color:#007ab0;
}

/* =====================================================
   UTILS / Animations
   ===================================================== */
.scroll-progress{
  position:fixed;
  top:0; left:0;
  height:2px;
  width:0;
  background:linear-gradient(90deg, var(--hs-pink), var(--hs-blue));
  z-index:200;
  transition:width .1s linear;
}

.fade-in{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .8s ease, transform .8s ease;
}
.fade-in.is-visible{
  opacity:1;
  transform:translateY(0);
}

::selection{
  background:var(--hs-blue);
  color:var(--hs-white);
}

:focus-visible{
  outline:2px solid var(--hs-blue);
  outline-offset:3px;
  border-radius:4px;
}

/* =====================================================
   BACK-TO-TOP FAB — desktop only (≥1025px)
   48px glass circle, blue up-arrow, shadow. Hover: blue bg + white icon.
   ===================================================== */
.back-to-top{
  display:none;              /* hidden by default; shown on desktop + when scrolled */
  position:fixed;
  right:32px;
  bottom:32px;
  z-index:90;
  width:48px;
  height:48px;
  border:none;
  border-radius:50%;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  color:var(--hs-blue);      /* blue arrow (via currentColor) */
  /* Glass effect like the header */
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 6px 20px rgba(0,0,0,.18);
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity .35s ease, transform .35s ease, background .3s ease, color .3s ease;
}
.back-to-top svg{ width:22px; height:22px; display:block; }
/* Visible state (toggled by JS once the user scrolls down) */
.back-to-top.is-visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
/* Hover: reverse to blue background + white icon */
.back-to-top:hover{
  background:var(--hs-blue);
  color:#fff;
  box-shadow:0 8px 24px rgba(0,149,213,.4);
}
/* Only enable on desktop (large screens) */
@media (min-width:1025px){
  .back-to-top{ display:flex; }
}

/* =====================================================
   SERVICE — mobile & tablet (≤1024px): sticky card-stack
   Each card sticks under the header; the next scrolls up and stacks over it,
   with the buried ones peeking at the top and shrinking slightly (main.js).
   Desktop (≥1025px) keeps the side-by-side row.
   ===================================================== */
@media (max-width:1024px){
  /* neutralise the generic container fade-in (GSAP controls the scale) */
  .service__cards.fade-in{ opacity:1; transform:none; }

  .service__cards{
    display:flex;
    flex-direction:column;
    gap:28px;
    width:100%;
    max-width:520px;
    margin:0 auto;
    padding:0 0 40px;
    perspective:none;
  }
  /* --- CSS-only stacking deck (no JS / GSAP) ---
     Each card pins under the header, staggered (--i) so buried cards peek;
     the next scrolls up and stacks over it. The shrink-as-buried look is
     added in the @supports block below (scroll-driven). Technique adapted
     from CodePen "CSS-Only Stacking Cards" by Kara Bharat (MIT). */
  .service-card{
    position:sticky;
    top:calc(81px + var(--i, 0) * 14px);   /* 65 header + 16 gap + 14 peek per card */
    transform-origin:50% 0%;
    transform:none;            /* clear the desktop pointer-tilt transform on touch */
    will-change:transform, filter;
    transition:none;
  }
  .service-card:nth-child(1){ --i:0; }
  .service-card:nth-child(2){ --i:1; }
  .service-card:nth-child(3){ --i:2; }
  .service-card:nth-child(4){ --i:3; }     /* future-proof for a 4th card */
  /* No hover/tap glow on touch — drop the gradient stroke, spotlight & lift
     shadow here; the stack style is the whole interaction on mobile/tablet.
     (Desktop ≥1025px keeps the hover effect.) */
  .service-card::before,
  .service-card::after{ display:none; }
  .service-card.is-glowing{ box-shadow:0 0 20px rgba(92,100,112,.12); }

  /* Scroll-driven shrink — progressive enhancement (Safari 26+, Chromium).
     Unsupported browsers just skip it: cards still pin & stack, no shrink. */
  @media (prefers-reduced-motion: no-preference){
    @supports (animation-timeline: view()){
      .service-card{
        animation:service-bury linear both;
        animation-timeline:view();
        animation-range:exit 0% exit 100%;
      }
    }
  }
}

/* The "getting buried" look for the stacking service cards (mobile/tablet). */
@keyframes service-bury{
  to{
    transform:perspective(1200px) translateY(-10px) scale(.92) rotateX(-5deg);
    filter:brightness(.85);
    box-shadow:0 24px 40px -12px rgba(0,149,213,.22);
  }
}

/* =====================================================
   Background drifting shapes — per-section variations
   Reuses .bg-shapes markup + the bgDrift1–4 keyframes, but each
   section gets its own start positions + timing so they don't look identical.
   (Container is still hidden <600px and clipped to the section.)
   ===================================================== */
/* VISION */
.vision-section .bg-shape--1{ top:18%; left:80%; animation-duration:22s; animation-delay:-8s; }
.vision-section .bg-shape--2{ top:6%;  left:10%; animation-duration:28s; animation-delay:-2s; }
.vision-section .bg-shape--3{ top:62%; left:68%; animation-duration:21s; animation-delay:-16s; }
.vision-section .bg-shape--4{ top:78%; left:24%; animation-duration:18s; animation-delay:-10s; }

/* VALUES */
.value-section .bg-shape--1{ top:72%; left:84%; animation-duration:19s; animation-delay:-5s; }
.value-section .bg-shape--2{ top:10%; left:58%; animation-duration:25s; animation-delay:-14s; }
.value-section .bg-shape--3{ top:74%; left:8%;  animation-duration:24s; animation-delay:-4s; }
.value-section .bg-shape--4{ top:28%; left:14%; animation-duration:16s; animation-delay:-7s; }

/* CAREER */
.career-section .bg-shape--1{ top:24%; left:30%; animation-duration:21s; animation-delay:-11s; }
.career-section .bg-shape--2{ top:54%; left:78%; animation-duration:27s; animation-delay:-1s; }
.career-section .bg-shape--3{ top:12%; left:84%; animation-duration:22s; animation-delay:-9s; }
.career-section .bg-shape--4{ top:82%; left:60%; animation-duration:17s; animation-delay:-15s; }

/* =====================================================
   CAREER — "no open positions" empty state
   Toggle via data-has-jobs on <section id="career">:
     data-has-jobs="true"   -> job cards shown, this message hidden
     data-has-jobs="false"  -> job cards hidden, this message shown
   (Hidden by default, so a typo/missing value safely keeps the job cards.)
   ===================================================== */
.career__empty{
  display:none;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:16px;
  width:100%;
  max-width:600px;
  margin:0 auto;
  padding:48px 32px;
  background:var(--hs-white);
  border:1px solid var(--hs-light-grey);
  border-radius:20px;
  box-shadow:0 0 20px rgba(195,164,178,.15);
}
.career-section[data-has-jobs="false"] .career__jobs{ display:none; }
.career-section[data-has-jobs="false"] .career__empty{ display:flex; }

.career__empty-icon{
  width:64px; height:64px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(0,149,213,.08);
  color:var(--hs-gray);
}
.career__empty-icon svg{ width:30px; height:30px; }
.career__empty-title{
  font-family:var(--font-mincho);
  font-weight:600;
  font-size:22px;
  color:var(--hs-gray);
  margin:0;
}
.career__empty-text{
  font-family:var(--font-jp);
  font-size:15px;
  line-height:1.9;
  color:var(--hs-gray);
  margin:0;
  max-width:46ch;
}
.career__empty-cta{
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; padding:0 32px;
  background:var(--hs-blue); color:var(--hs-white);
  border:1px solid var(--hs-blue); border-radius:999px;
  font-family:var(--font-inter); font-weight:700; font-size:16px;
  margin-top:8px;
  transition:background .25s ease, color .25s ease;
}
.career__empty-cta:hover{ background:transparent; color:var(--hs-blue); }

/* Visually-hidden but available to screen readers & search crawlers */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}
/* hero title is now an <h1> — strip default heading margins/metrics (visual unchanged) */
h1.hero__title{ margin:0; font-size:0; font-weight:inherit; }

/* Circular flag badges in the language menu */
.lang-switch__flag{
  width:20px;
  height:20px;
  border-radius:50%;
  flex-shrink:0;
  display:block;
}
.lang-switch__menu [data-lang] span{ display:inline-block; }

/* =====================================================
   Maintenance screen — toggled by js/maintenance.js
   (sets data-maintenance="on" on <html>). Hidden otherwise.
   ===================================================== */
.maintenance{ display:none; }
html[data-maintenance="on"]{ overflow:hidden; }
html[data-maintenance="on"] body > *:not(.maintenance){ display:none !important; }
html[data-maintenance="on"] .maintenance{
  display:flex;
  position:fixed;
  inset:0;
  z-index:99999;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:var(--hs-bg-soft);
  text-align:center;
}
.maintenance__inner{
  max-width:520px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}
.maintenance__logo{ width:180px; height:auto; display:block; }
.maintenance__title{
  font-family:var(--font-mincho);
  font-weight:600;
  font-size:24px;
  color:var(--hs-gray);
  margin:0;
}
.maintenance__text{
  font-family:var(--font-jp);
  font-size:15px;
  line-height:1.9;
  color:var(--hs-gray);
  margin:0;
}

/* =========================================================
   Contact Form 7 integration
   Aligns CF7-generated markup with the site's contact design.
   (Added when the contact form was migrated from Web3Forms to CF7.)
   ========================================================= */
/* Field-control wrappers → block so inputs fill the column width */
.contact-section .wpcf7-form-control-wrap{ display:block; width:100%; }

/* Honeypot trap field — keep unreachable / invisible */
.contact-section input[name="your-website"]{
  position:absolute !important;
  left:-9999px !important;
  width:1px; height:1px; opacity:0; pointer-events:none;
}

/* CF7 spinner shown during AJAX submit */
.contact-section .wpcf7-spinner{ display:block; margin:12px auto 0; }

/* Consent ([acceptance]) — native checkbox inline with the text, brand-tinted */
.contact__consent .wpcf7-form-control-wrap{ display:block; }
.contact__consent .wpcf7-acceptance .wpcf7-list-item{ margin:0; }
.contact__consent .wpcf7-acceptance label{
  display:flex; align-items:center; gap:10px; cursor:pointer; margin:0;
}
.contact__consent .wpcf7-acceptance input[type="checkbox"]{
  flex-shrink:0; width:18px; height:18px;
  accent-color:var(--hs-blue); cursor:pointer; margin:0;
}

/* Per-field validation tips */
.contact-section .wpcf7-not-valid-tip{
  color:#c62330; font-size:12px; margin-top:6px; display:block;
}
.contact-section .wpcf7-form-control.wpcf7-not-valid{
  border-color:#dc3545 !important;
}

/* Response output (errors / notices) — match the old .contact__status look */
.contact-section .wpcf7-response-output{
  width:100%; margin:16px 0 0 !important; padding:14px 16px !important;
  border-radius:10px; border:1px solid;
  font-family:var(--font-inter),var(--font-jp);
  font-size:14px; line-height:1.6;
}
.contact-section .wpcf7-form.invalid .wpcf7-response-output,
.contact-section .wpcf7-form.unaccepted .wpcf7-response-output,
.contact-section .wpcf7-form.spam .wpcf7-response-output,
.contact-section .wpcf7-form.failed .wpcf7-response-output{
  background:rgba(220,53,69,.06); border-color:#dc3545; color:#c62330;
}
/* Success is surfaced via the bespoke pop-up — hide CF7's inline success line */
.contact-section .wpcf7-form.sent .wpcf7-response-output{ display:none; }