@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700;800&display=swap");

:root {
  --ink:#171917; --muted:#656a65; --paper:#fcfcfa; --line:#d9d8d1;
  --accent:#772014; --max:1180px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.62}
a{color:inherit;text-decoration:none} a:hover{opacity:.68}
.wrap{width:min(calc(100% - 48px),var(--max));margin:auto}
header{position:sticky;top:0;z-index:10;background:rgba(248,248,248,.96);backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,.06)}
nav{height:74px;display:flex;align-items:center;justify-content:space-between}
.brand{font-size:20px;font-weight:760;letter-spacing:.16em}.tag{font-size:13px;color:var(--muted);margin-left:16px;letter-spacing:.03em}
.links{display:flex;gap:28px;font-size:14px}
.hero{min-height:78vh;display:flex;align-items:center;padding:90px 0}
.eyebrow{font-size:13px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);margin-bottom:28px}
h1{font-size:clamp(56px,8vw,112px);line-height:.92;letter-spacing:-.055em;margin:0;max-width:950px;font-weight:680}
.hero p{font-size:clamp(19px,2vw,25px);max-width:730px;margin:38px 0 0;color:#3e423e}
.story{padding:112px 0;border-top:1px solid var(--line)}
.story-grid{display:grid;grid-template-columns:1fr 2.05fr;gap:8vw}
.num{font-size:13px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}
.word{font-size:clamp(38px,5vw,70px);line-height:1;margin:14px 0 0;letter-spacing:-.04em}
.kicker{font-size:14px;color:var(--muted);margin-bottom:18px}
h2{font-size:clamp(34px,4.2vw,60px);line-height:1.02;letter-spacing:-.04em;margin:0 0 30px;max-width:820px}
.copy{font-family:Georgia,"Times New Roman",serif;font-size:19px;max-width:760px;color:#303330}
.copy p{margin:0 0 1.25em}
.pull{font-family:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;font-size:clamp(27px,3vw,42px);line-height:1.15;letter-spacing:-.025em;margin:48px 0;color:var(--accent)}
.cta{display:inline-block;margin-top:18px;border-bottom:1px solid var(--ink);padding-bottom:4px;font-family:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;font-size:15px}
.final{padding:140px 0 160px;border-top:1px solid var(--line)}
.final h2{font-size:clamp(46px,6vw,82px);max-width:1000px}.final p{font-size:22px;max-width:720px;color:#414541}
footer{border-top:1px solid var(--line);padding:32px 0 42px;color:var(--muted);font-size:13px}
.footer-row{display:flex;justify-content:space-between;gap:20px}
.about{padding:110px 0 130px}.about h1{font-size:clamp(52px,7vw,92px)}
.about-intro{font-size:clamp(22px,2.5vw,31px);max-width:850px;margin:45px 0 100px;color:#383c38}
.about-section{display:grid;grid-template-columns:1fr 2fr;gap:8vw;padding:80px 0;border-top:1px solid var(--line)}
.about-section h2{font-size:clamp(32px,4vw,52px)}
.values{display:grid;grid-template-columns:1fr 1fr;gap:28px 45px;margin-top:42px}
.value strong{display:block;font-size:19px;margin-bottom:6px}.value span{color:var(--muted)}
.company{font-size:17px}.company p{margin:.25em 0}
code{font-family:"SFMono-Regular",Consolas,monospace;font-size:.88em;background:#ecebe5;padding:.08em .3em;border-radius:4px}
@media(max-width:760px){
 .wrap{width:min(calc(100% - 30px),var(--max))}.tag{display:none}.links{gap:17px}.hero{min-height:70vh;padding:70px 0}
 .story{padding:80px 0}.story-grid,.about-section{grid-template-columns:1fr;gap:38px}.values{grid-template-columns:1fr}
 .copy{font-size:18px}.footer-row{flex-direction:column}.about{padding-top:75px}
}

/* Verbium identity v2 */
.brand-wordmark{
  display:block;
  width:128px;
  height:42px;
  object-fit:cover;
  object-position:left center;
}
.word{color:#772014}

/* Identity + editorial hierarchy v3 */
.brand-logo{
  display:block;
  width:132px;
  height:auto;
}
.word{
  color:#772014;
  font-weight:800;
  letter-spacing:-.05em;
}
.story h2{
  font-weight:430;
  letter-spacing:-.035em;
}
.story-image{
  width:100%;
  max-width:760px;
  margin:42px 0 48px;
}
.story-image img{
  display:block;
  width:100%;
  height:auto;
}
.story-image.narrow img{
  width:min(100%,520px);
}
.story-image.sentinel img{
  width:min(100%,560px);
}
.story-image figcaption{
  margin-top:10px;
  font-family:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  font-size:12px;
  line-height:1.5;
  color:var(--muted);
}
@media(max-width:760px){
  .brand-logo{width:112px}
  .story-image{margin:32px 0 38px}
}

/* Revised supplied artwork v4 */
.brand-logo{
  width:138px;
  max-height:44px;
  object-fit:contain;
  object-position:left center;
}

/* v5: restrained color + phosphor-green terminal accent */
.terminal{
  display:inline-block;
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-weight:500;
  color:#72ff72;
  background:#111411;
  padding:.08em .30em .11em;
  border-radius:2px;
  letter-spacing:-.055em;
  text-shadow:
    0 0 3px rgba(114,255,114,.90),
    0 0 8px rgba(114,255,114,.48),
    0 0 15px rgba(114,255,114,.20);
  box-shadow:inset 0 0 12px rgba(114,255,114,.035);
}

/* v6: documentary monochrome imagery + engineering hero */
.hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.hero::before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:0;
  background:
    linear-gradient(to bottom,
      rgba(252,252,250,.18) 0%,
      rgba(252,252,250,.36) 48%,
      rgba(252,252,250,.78) 78%,
      rgba(252,252,250,1) 100%),
    url("engineering-background.jpeg");
  background-size:cover;
  background-position:center top;
  opacity:.32;
  filter:grayscale(100%) contrast(.92);
}
.hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(90deg,
    rgba(252,252,250,.68) 0%,
    rgba(252,252,250,.40) 55%,
    rgba(252,252,250,.20) 100%);
}
.story-image img{
  filter:grayscale(1);
  border:1px solid #171917;
}

/* v7: IBM Plex + revised logo/assets + tighter hero */
.brand-logo{
  width:170px;
  max-height:48px;
  object-fit:contain;
  object-position:left center;
}
.hero{
  min-height:64vh; /*was 64*/
  padding:62px 0 54px;
}
.hero::before{
  opacity:.48;
}
.hero::after{
  background:linear-gradient(90deg,
    rgba(252,252,250,.57) 100%,
    rgba(252,252,250,.31) 100%,
    rgba(252,252,250,.14) 100%);
}
.hero p{
  margin-top:30px;
}
@media(max-width:760px){
  .brand-logo{width:142px;max-height:42px}
  .hero{
    min-height:auto;
    padding:46px 0 44px;
  }
  .hero .eyebrow{margin-bottom:20px}
  .hero p{margin-top:26px}
}

/* v8: human element, quieter emphasis, inline tagline */
nav > div:first-child{
  display:flex;
  align-items:center;
}
.tag{
  margin-left:12px;
  color:var(--muted);
  font-size:13px;
  letter-spacing:.02em;
  white-space:nowrap;
}
.tag-sep{
  display:inline-block;
  margin-right:8px;
  color:#8b8e89;
}

/* Keep red reserved for the four defining adjectives only. */
.pull{
  color:var(--ink);
  font-family:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  font-weight:700;
  font-style:italic;
}

/* Human element at the culmination of the page */
.final-image{
  width:min(100%,760px);
  margin:46px 0 42px;
}
.final-image img{
  display:block;
  width:100%;
  height:auto;

  border:1px solid #171917;
}

/* Slightly smaller logo to make the logo + tagline read as one unit */
.brand-logo{
  width:162px;
}

@media(max-width:760px){
  .brand-logo{width:128px}
  .tag{
    display:inline-block;
    margin-left:9px;
    font-size:11px;
  }
  .tag-sep{margin-right:6px}
  .final-image{margin:34px 0 32px}
}

/* v9: brighter ground, compact branding, bilingual nav, alternating stories */
header{
  background:rgba(248,248,248,.96);
}
nav > div:first-child{
  gap:0;
}
.brand-logo{
  width:162px;
  max-height:48px;
}
.tag{
  margin-left:5px;
  font-size:15px;
  font-weight:500;
}
.tag-sep{
  margin-right:5px;
  color:#777;
}
.lang-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.jp-flag{
  width:18px;
  height:12px;
  display:inline-block;
  position:relative;
  background:#fff;
  border:1px solid #cfcfcf;
}
.jp-flag::after{
  content:"";
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#bc002d;
  left:5px;
  top:2px;
}

/* Original consistent editorial layout restored. */

/* Japanese gets slightly tighter tracking in large display text. */
html[lang="ja"] h1,
html[lang="ja"] h2,
html[lang="ja"] .word{
  letter-spacing:-.035em;
}

@media(max-width:760px){
  .brand-logo{width:122px}
  .tag{
    margin-left:3px;
    font-size:12px;
  }
  .tag-sep{margin-right:3px}
  .links{gap:12px}
  .lang-link{gap:4px}
  .jp-flag{width:16px;height:11px}
  .jp-flag::after{width:5px;height:5px;left:5px;top:2px}
}

/* v11: wordmark-only identity + stronger engineering background */
.brand-logo{
  width:158px;
  max-height:44px;
  object-fit:contain;
  object-position:left center;
}
.hero::before{
  opacity:.60;
}
.hero::after{
  background:linear-gradient(90deg,
    rgba(252,252,250,.49) 100%,
    rgba(252,252,250,.25) 100%,
    rgba(252,252,250,.10) 100%);
}
@media(max-width:760px){
  .brand-logo{width:120px;max-height:38px}
}

/* v12: optical alignment + stronger Japanese story headings */

/* Align tagline to the visual center of the wordmark rather than its text baseline. */
nav > div:first-child{
  display:flex;
  align-items:center;
}
nav > div:first-child > a{
  display:flex;
  align-items:center;
  line-height:0;
}
.brand-logo{
  display:block;
}
.tag{
  display:flex;
  align-items:center;
  align-self:center;
  line-height:1;
  transform:translateY(1px);
}

/* Japanese story titles need more weight against the bold left-hand adjectives. */
html[lang="ja"] .story-content h2{
  font-weight:520;
}

/* v14: transition from introduction into the four stories */
.hero .hero-bridge{max-width:650px;margin-top:20px;font-family:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;font-size:14px;line-height:1.55;font-weight:600;letter-spacing:.01em;color:var(--ink)}
@media(max-width:760px){.hero .hero-bridge{margin-top:16px;font-size:13px}}

/* v16: stronger, optically centered tagline */
.tag{
  margin-left:5px;
  font-size:18px;
  font-weight:500;
  line-height:1;
  transform:translateY(3px);
}
@media(max-width:760px){
  .tag{
    margin-left:3px;
    font-size:14px;
    transform:translateY(2px);
  }
}

/* v19: stronger transition into the four episodes */
.hero .hero-bridge{
  font-size:17px;
  line-height:1.55;
}
@media(max-width:760px){
  .hero .hero-bridge{
    font-size:15px;
  }
}

/* final: project-photo captions */
.story-image figcaption{
  margin-top:10px;
  font-family:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  font-size:13px;
  line-height:1.45;
  font-weight:600;
  color:var(--ink);
}


/* final-v2: subtle scroll-led reveal */
html.js .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:
    opacity .72s cubic-bezier(.22,1,.36,1),
    transform .82s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}
html.js .reveal.is-visible{
  opacity:1;
  transform:none;
}
html.js .reveal-image{
  overflow:hidden;
}
html.js .reveal-image img{
  transform:scale(1.022);
  transition:transform 1.05s cubic-bezier(.22,1,.36,1);
}
html.js .reveal-image.is-visible img{
  transform:scale(1);
}
html.js .reveal-delay-1{transition-delay:.05s}
html.js .reveal-delay-2{transition-delay:.10s}
html.js .reveal-delay-3{transition-delay:.15s}
@media (prefers-reduced-motion: reduce){
  html.js .reveal,
  html.js .reveal-image img{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* final-v7: the actual adjective and heading unfold into place.
   No duplicate text is used: the enlarged opening text literally becomes
   the final text, preserving wrapping, alignment, and exact final size. */

.story{
  position:relative;
  overflow:visible;
}

/* The real final elements are transformed from an enlarged, centered
   opening state back to their native layout positions. */
html.js .story.is-scroll-choreographed .word,
html.js .story.is-scroll-choreographed .story-grid > div:nth-child(2) > h2{
  will-change:transform;
  transform-origin:center center;
}

html.js .story.is-scroll-choreographed .word{
  transform:
    translate3d(var(--word-x,0px),var(--word-y,0px),0)
    scale(var(--word-scale,1));
}

html.js .story.is-scroll-choreographed .story-grid > div:nth-child(2) > h2{
  transform:
    translate3d(var(--heading-x,0px),var(--heading-y,0px),0)
    scale(var(--heading-scale,1));
}

/* Supporting details stay out of the way until the two main typographic
   blocks are nearly settled. */
html.js .story.is-scroll-choreographed .num,
html.js .story.is-scroll-choreographed .kicker{
  opacity:var(--story-meta-opacity,0);
}

html.js .story.is-scroll-choreographed .story-image,
html.js .story.is-scroll-choreographed .copy{
  opacity:var(--story-evidence-opacity,0);
  transform:translateY(var(--story-evidence-y,18px));
}

/* Avoid conflicts with the older generic reveal utility inside stories. */
html.js .story.is-scroll-choreographed .story-image.reveal,
html.js .story.is-scroll-choreographed .copy.reveal{
  transition:none;
}

/* Smooth opacity only; the main word/headline movement is continuously
   tied to scroll position. */
html.js .story.is-scroll-choreographed .num,
html.js .story.is-scroll-choreographed .kicker,
html.js .story.is-scroll-choreographed .story-image,
html.js .story.is-scroll-choreographed .copy{
  transition:opacity .16s linear;
}

/* Japanese uses the same choreography, with its native final typography. */
html[lang="ja"].js .story.is-scroll-choreographed .word,
html[lang="ja"].js .story.is-scroll-choreographed .story-grid > div:nth-child(2) > h2{
  transform-origin:center center;
}

@media(prefers-reduced-motion:reduce){
  html.js .story.is-scroll-choreographed .word,
  html.js .story.is-scroll-choreographed .story-grid > div:nth-child(2) > h2,
  html.js .story.is-scroll-choreographed .story-image,
  html.js .story.is-scroll-choreographed .copy{
    transform:none !important;
  }
  html.js .story.is-scroll-choreographed .num,
  html.js .story.is-scroll-choreographed .kicker,
  html.js .story.is-scroll-choreographed .story-image,
  html.js .story.is-scroll-choreographed .copy{
    opacity:1 !important;
  }
}


/* final-v8: each story activates only as it reaches the viewport.
   Future story titles remain completely hidden, avoiding the pile-up at page load. */
html.js .story.is-scroll-choreographed .word,
html.js .story.is-scroll-choreographed .story-grid > div:nth-child(2) > h2{
  opacity:var(--story-title-opacity,0);
}

/* Once active, the title pair is visually dominant; supporting material waits. */
html.js .story.is-scroll-choreographed .word,
html.js .story.is-scroll-choreographed .story-grid > div:nth-child(2) > h2{
  transition:opacity .12s linear;
}


/* final-v9: keep each animated title pair inside its own section */
.story{
  overflow:hidden;
}

/* Give the opening pair a clean field before the supporting evidence appears. */
html.js .story.is-scroll-choreographed .story-grid{
  position:relative;
  z-index:1;
}


/* final-v11: subtle flow-chart connector between the opening adjective
   and explanation. It fades away rather than traveling with the text. */
.story::after{
  content:"";
  position:absolute;
  z-index:3;
  pointer-events:none;
  opacity:var(--flow-arrow-opacity,0);
  transition:opacity .10s linear;

  /* centered opening block geometry */
  width:clamp(90px,10vw,150px);
  height:clamp(64px,7vw,100px);

  /* start just to the right of the opening adjective, then turn downward
     and back left toward the explanatory heading */
  left:calc(50% + min(34vw,490px) - clamp(90px,10vw,150px));
  top:clamp(185px,17vw,255px);

  border-top:1px solid rgba(20,20,20,.22);
  border-right:1px solid rgba(20,20,20,.22);
  border-bottom:1px solid rgba(20,20,20,.22);
  border-radius:0 2px 2px 0;
}

/* Small arrowhead at the lower-left end, pointing into the heading. */
.story::before{
  content:"";
  position:absolute;
  z-index:3;
  pointer-events:none;
  opacity:var(--flow-arrow-opacity,0);
  transition:opacity .10s linear;

  left:calc(50% + min(34vw,490px) - clamp(90px,10vw,150px) - 1px);
  top:calc(clamp(185px,17vw,255px) + clamp(64px,7vw,100px) - 4px);

  width:7px;
  height:7px;
  border-left:1px solid rgba(20,20,20,.28);
  border-bottom:1px solid rgba(20,20,20,.28);
  transform:rotate(45deg);
  transform-origin:center;
}

@media(max-width:760px){
  .story::after{
    width:72px;
    height:58px;
    left:calc(50% + 35vw - 72px);
    top:165px;
  }
  .story::before{
    left:calc(50% + 35vw - 73px);
    top:219px;
  }
}

@media(prefers-reduced-motion:reduce){
  .story::before,
  .story::after{
    display:none !important;
  }
}


/* final-v12: real SVG flow connector (not pseudo-elements) */
.story-flow-connector{
  position:absolute;
  z-index:20;
  pointer-events:none;
  overflow:visible;
  opacity:var(--flow-arrow-opacity,0);
  transition:opacity .10s linear;
  width:clamp(120px,12vw,180px);
  height:clamp(82px,8vw,120px);
  left:calc(50% + min(25vw,360px));
  top:clamp(175px,16vw,245px);
}
.story-flow-connector path{
  fill:none;
  stroke:#b8b8b8;
  stroke-width:1.15;
  vector-effect:non-scaling-stroke;
}
.story-flow-connector polyline{
  fill:none;
  stroke:#b8b8b8;
  stroke-width:1.15;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
  stroke-linejoin:round;
}
@media(max-width:760px){
  .story-flow-connector{
    width:90px;
    height:70px;
    left:auto;
    right:7vw;
    top:160px;
  }
}
@media(prefers-reduced-motion:reduce){
  .story-flow-connector{display:none!important}
}


/* final-v13: exact left alignment + vertical flow connector */
html.js .story.is-scroll-choreographed .word,
html.js .story.is-scroll-choreographed .story-grid > div:nth-child(2) > h2{
  transform-origin:left center;
}

/* Straight connector with round endpoints, deliberately very light. */
.story-flow-connector{
  position:absolute;
  z-index:20;
  pointer-events:none;
  overflow:visible;
  opacity:var(--flow-arrow-opacity,0);
  transition:opacity .12s linear;

  width:24px;
  height:var(--flow-line-height,120px);
  left:calc(var(--opening-block-left, 16%) + 10px);
  top:var(--flow-line-top, 220px);
}
.story-flow-connector line{
  stroke:#b8b8b8;
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.story-flow-connector circle{
  fill:#b8b8b8;
}
.story-flow-connector path,
.story-flow-connector polyline{
  display:none;
}

@media(max-width:760px){
  .story-flow-connector{
    width:20px;
    left:calc(var(--opening-block-left, 7%) + 7px);
  }
}


/* final-v14: clean typographic choreography, no connector */
.story-flow-connector,
.story::before,
.story::after{
  display:none !important;
}

/* Start the two principal blocks centered; their native final alignment
   is restored only when they are nearly settled. */
html.js .story.is-scroll-choreographed .word,
html.js .story.is-scroll-choreographed .story-grid > div:nth-child(2) > h2{
  text-align:var(--opening-text-align, center);
  transform-origin:center center;
}

/* At the end of the movement, return to the native editorial alignment. */
html.js .story.is-scroll-choreographed.is-settling .word,
html.js .story.is-scroll-choreographed.is-settling .story-grid > div:nth-child(2) > h2{
  text-align:left;
}


/* final-v15: soften the center -> left alignment handoff */
html.js .story.is-scroll-choreographed .story-grid > div:nth-child(2) > h2{
  filter:blur(var(--heading-handoff-blur, 0px));
  opacity:var(--heading-handoff-opacity, var(--story-title-opacity, 0));
  will-change:transform, filter, opacity;
}


/* final-v16: deeper story opening + tighter hero-to-first-story transition */

/* Pull the first section closer to the introductory bridge. */
.hero{
  padding-bottom:26px;
}
.story:first-of-type{
  padding-top:46px;
}

/* Keep later sections at the existing rhythm. */
.story:not(:first-of-type){
  padding-top:112px;
}

@media(max-width:760px){
  .hero{
    padding-bottom:18px;
  }
  .story:first-of-type{
    padding-top:30px;
  }
}


/* final-v18: red opening field that resolves into the normal page */
html.js .story.is-scroll-choreographed{
  background-color:rgb(
    var(--section-bg-r,252),
    var(--section-bg-g,252),
    var(--section-bg-b,250)
  );
  transition:none;
}

/* The actual moving adjective/header change color as they move:
   white -> Verbium red / near-black. */
html.js .story.is-scroll-choreographed .word{
  color:rgb(
    var(--word-r,119),
    var(--word-g,32),
    var(--word-b,20)
  );
}
html.js .story.is-scroll-choreographed .story-grid > div:nth-child(2) > h2{
  color:rgb(
    var(--heading-r,23),
    var(--heading-g,25),
    var(--heading-b,23)
  );
}

/* Keep the top metadata and supporting copy in their normal final colors
   once they reveal. */
html.js .story.is-scroll-choreographed .num,
html.js .story.is-scroll-choreographed .kicker{
  color:var(--muted);
}

/* On mobile, completely disable the choreography and use the static design. */
@media(max-width:760px){
  html.js .story.is-scroll-choreographed{
    background-color:transparent !important;
  }

  html.js .story.is-scroll-choreographed .word{
    color:#772014 !important;
    transform:none !important;
    text-align:left !important;
    opacity:1 !important;
  }

  html.js .story.is-scroll-choreographed .story-grid > div:nth-child(2) > h2{
    color:var(--ink) !important;
    transform:none !important;
    text-align:left !important;
    filter:none !important;
    opacity:1 !important;
  }

  html.js .story.is-scroll-choreographed .num,
  html.js .story.is-scroll-choreographed .kicker,
  html.js .story.is-scroll-choreographed .story-image,
  html.js .story.is-scroll-choreographed .copy{
    opacity:1 !important;
    transform:none !important;
  }
}


/* final-v19: header stays left-justified throughout its movement.
   This removes the final alignment snap and makes the blur unnecessary. */
html.js .story.is-scroll-choreographed .story-grid > div:nth-child(2) > h2,
html.js .story.is-scroll-choreographed.is-settling .story-grid > div:nth-child(2) > h2{
  text-align:left !important;
  filter:none !important;
  opacity:var(--story-title-opacity,0) !important;
}


/* final-v22: per-story accent colors */
.story .word{
  color:var(--story-accent,#772014);
}

@media(max-width:760px){
  html.js .story.is-scroll-choreographed .word{
    color:var(--story-accent,#772014) !important;
  }
}


/* final-v23: exact shared opening x-coordinate */
html.js .story.is-scroll-choreographed .word,
html.js .story.is-scroll-choreographed .story-grid > div:nth-child(2) > h2{
  transform-origin:left center !important;
}


/* final-v24: make the opening pair behave as one true left-justified block */
html.js .story.is-scroll-choreographed .word,
html.js .story.is-scroll-choreographed .story-grid > div:nth-child(2) > h2{
  text-align:left !important;
  transform-origin:left center !important;
}


/* final-v24: carry the four section colors into the closing value summary */
.final-value-tenacious{color:#772014}
.final-value-creative{color:#F2C14E}
.final-value-engaged{color:#1F363D}
.final-value-humble{color:#717744}

/* final-v25: final refinements */
header{
  background:#f2f2f2 !important;
  border-bottom:1px solid #000 !important;
      backdrop-filter:blur(162px);
   opacity:0.95

}

/* Keep the engineering drawing, but remove the gradient wash over it. */
.hero::before{
  background-image:url("engineering-background.jpeg") !important;
}
.hero::after{
  background:none !important;
}

/* final-v26: soften top bar and engineering drawing */

.hero::before{
  opacity:.25 !important;
}


/* v27: story photography sits with each adjective in the left column.
   This shortens the sections and makes the adjective + image read as one unit. */
.story-grid{
  align-items:start;
}

.story-grid > div:first-child,
.story-label{
  min-width:0;
}

.story-grid > div:first-child .story-image,
.story-label .story-image{
  width:100%;
  max-width:none;
  margin:34px 0 0;
}

.story-grid > div:first-child .story-image img,
.story-label .story-image img,
.story-grid > div:first-child .story-image.narrow img,
.story-label .story-image.narrow img,
.story-grid > div:first-child .story-image.sentinel img,
.story-label .story-image.sentinel img{
  width:100%;
  max-width:none;
  height:auto;
}

.story-grid > div:first-child .story-image figcaption,
.story-label .story-image figcaption{
  margin-top:9px;
}

/* With the image no longer interrupting the narrative column,
   the copy can begin immediately below the heading. */
.story-grid > div:nth-child(2) > h2 + .copy,
.story-content > h2 + .copy{
  margin-top:0;
}

@media(max-width:760px){
  .story-grid > div:first-child .story-image,
  .story-label .story-image{
    margin-top:26px;
  }
}


/* v30: compact white robot-arm hero */
.home header{
  position:sticky !important;
  top:0 !important;
  z-index:50 !important;
  background:#000 !important;
  border-bottom:1px solid #000 !important;
  backdrop-filter:none !important;
  opacity:1 !important;
}

.home header nav{
  height:74px;
}

.home header .brand-logo{
  filter:brightness(0) invert(1);
}

.home header .tag,
.home header .tag-sep,
.home header .links,
.home header .links a{
  color:#fff !important;
}

.home .hero{
  position:relative;
  min-height:44vh !important;
  padding:42px 0 34px !important;
  display:flex !important;
  align-items:flex-end !important;
  overflow:hidden;
  isolation:isolate;
  background:#fff !important;
  color:var(--ink) !important;
}

.home .hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:url("engineering-background.jpeg") !important;
  background-repeat:no-repeat !important;
  background-size:auto 118% !important;
  background-position:right center !important;
  opacity:1 !important;
  filter:none !important;
}

.home .hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.99) 34%,
      rgba(255,255,255,.93) 48%,
      rgba(255,255,255,.48) 63%,
      rgba(255,255,255,0) 78%) !important;
}

.home .hero-inner{
  position:relative;
  z-index:1;
  align-self:flex-end;
  margin-left:auto;
  margin-right:auto;
}

.home .hero .eyebrow{
  color:var(--muted) !important;
  margin-bottom:14px;
}

.home .hero h1{
  color:var(--ink) !important;
  max-width:720px;
  font-size:clamp(48px,6vw,86px);
  line-height:.93;
  letter-spacing:-.055em;
  margin:0;
}

.home .hero p{
  color:#3e423e !important;
  max-width:620px;
  font-size:clamp(16px,1.35vw,20px);
  line-height:1.5;
  margin-top:20px;
}

.home .hero .hero-bridge{
  color:var(--ink) !important;
  max-width:620px;
  margin-top:14px;
  font-size:15px;
  font-weight:600;
  line-height:1.5;
}

html[lang="ja"] .home .hero h1{
  font-size:clamp(46px,5.6vw,80px);
  line-height:1.0;
}

/* Keep the text safely in the lower-left while preserving the arm on the right. */
@media(min-width:1000px){
  .home .hero-inner{
    padding-right:42%;
  }
}

@media(max-width:760px){
  .home header nav{
    height:66px;
  }

  .home header .brand-logo{
    width:118px;
  }

  .home .hero{
    min-height:58vh !important;
    padding:28px 0 26px !important;
  }

  .home .hero::before{
    background-size:auto 84% !important;
    background-position:right 18% !important;
    opacity:.28 !important;
  }

  .home .hero::after{
    background:
      linear-gradient(to top,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,.97) 45%,
        rgba(255,255,255,.76) 70%,
        rgba(255,255,255,.34) 100%) !important;
  }

  .home .hero h1{
    font-size:clamp(44px,13vw,66px);
    max-width:100%;
  }

  html[lang="ja"] .home .hero h1{
    font-size:clamp(42px,12vw,62px);
  }

  .home .hero p{
    font-size:16px;
    max-width:100%;
  }

  .home .hero .hero-bridge{
    font-size:13px;
    max-width:100%;
  }
}


/* v31: larger robot arm, still anchored to the right */
@media(min-width:761px){
  .home .hero::before{
    background-size:auto 138% !important;
    background-position:right center !important;
  }
}
@media(max-width:760px){
  .home .hero::before{
    background-size:auto 98% !important;
    background-position:right 14% !important;
  }
}


/* v32: right-aligned, more visible robot arm + bottom-left hero copy */
.home .hero{
  align-items:flex-end !important;
}

.home .hero-inner{
  align-self:flex-end !important;
  margin-left:auto;
  margin-right:auto;
  width:min(calc(100% - 48px),var(--max));
  padding-right:44%;
}

.home .hero::before{
  background-position:right center !important;
  background-size:auto 146% !important;
  opacity:.92 !important;
}

.home .hero::after{
  background:
    linear-gradient(90deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.98) 34%,
      rgba(255,255,255,.82) 50%,
      rgba(255,255,255,.26) 66%,
      rgba(255,255,255,0) 80%) !important;
}

@media(max-width:760px){
  .home .hero-inner{
    width:min(calc(100% - 30px),var(--max));
    padding-right:0;
  }

  .home .hero::before{
    background-position:right 10% !important;
    background-size:auto 108% !important;
    opacity:.48 !important;
  }

  .home .hero::after{
    background:
      linear-gradient(to top,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,.98) 48%,
        rgba(255,255,255,.72) 72%,
        rgba(255,255,255,.20) 100%) !important;
  }
}


/* Translation page */
.translation-page header{
  position:sticky;
  top:0;
  z-index:50;
  background:#f4f4f2 !important;
  border-bottom:1px solid #171917 !important;
  opacity:1 !important;
  backdrop-filter:none !important;
}

.translation-page .links a[aria-current="page"]{
  font-weight:700;
}

.translation-hero{
  min-height:72vh;
  display:flex;
  align-items:flex-end;
  padding:100px 0 72px;
  background:#fff;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}

.translation-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.22fr) minmax(280px,.78fr);
  gap:7vw;
  align-items:end;
}

.translation-hero h1{
  font-size:clamp(54px,7.1vw,102px);
  line-height:.92;
  max-width:920px;
}

.translation-hero p{
  font-size:clamp(19px,1.8vw,24px);
  max-width:760px;
  margin:30px 0 0;
  color:#3e423e;
}

.translation-hero .translation-hero-bridge{
  font-size:16px;
  font-weight:650;
  color:var(--ink);
  margin-top:20px;
}

.translation-motion{
  min-height:320px;
  display:grid;
  align-content:center;
  justify-items:start;
  padding:36px 0 14px;
  color:#8f938f;
  overflow:hidden;
}

.motion-source{
  font-size:clamp(42px,5.2vw,76px);
  font-weight:700;
  letter-spacing:-.05em;
  color:#171917;
}

.motion-arrow{
  font-size:34px;
  margin:8px 0 0 4px;
  color:#9aa09a;
}

.motion-words{
  height:1.05em;
  margin-top:8px;
  overflow:hidden;
  font-size:clamp(40px,4.8vw,70px);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.045em;
  color:#772014;
}

.motion-words span{
  display:block;
  height:1.05em;
  animation:translationWords 10s cubic-bezier(.65,0,.35,1) infinite;
}

@keyframes translationWords{
  0%,15%{transform:translateY(0)}
  20%,35%{transform:translateY(-100%)}
  40%,55%{transform:translateY(-200%)}
  60%,75%{transform:translateY(-300%)}
  80%,95%{transform:translateY(-400%)}
  100%{transform:translateY(0)}
}

.translation-principle,
.translation-services{
  padding:110px 0;
  border-bottom:1px solid var(--line);
}

.translation-split{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:8vw;
  align-items:start;
}

.translation-split h2,
.translation-approach h2,
.translation-experience h2,
.translation-contact h2{
  font-size:clamp(40px,5vw,72px);
  line-height:.98;
}

.translation-lead{
  font-size:21px;
  color:#353a35;
  max-width:720px;
}

.translation-lead p{
  margin:0 0 1.2em;
}

.translation-approach{
  padding:110px 0 120px;
  background:#f4f4f1;
  border-bottom:1px solid var(--line);
}

.approach-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  margin-top:58px;
  background:#cfcfca;
  border:1px solid #cfcfca;
}

.approach-grid article{
  background:#fff;
  padding:42px 42px 46px;
}

.approach-num{
  font-size:12px;
  letter-spacing:.15em;
  color:#7b807b;
  margin-bottom:24px;
}

.approach-grid h3{
  font-size:clamp(25px,2.4vw,35px);
  line-height:1.08;
  margin:0 0 18px;
  letter-spacing:-.03em;
}

.approach-grid p{
  margin:0;
  font-size:17px;
  color:#464b46;
}

.translation-experience{
  padding:120px 0;
  background:#fff;
}

.experience-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8vw;
  align-items:end;
  margin-bottom:72px;
}

.experience-head > p{
  margin:0 0 8px;
  font-size:21px;
  color:#414641;
  max-width:650px;
}

.industry-list{
  border-top:1px solid #171917;
}

.industry{
  display:grid;
  grid-template-columns:.42fr 1fr;
  gap:7vw;
  padding:42px 0 46px;
  border-bottom:1px solid var(--line);
}

.industry-name{
  font-size:clamp(25px,2.5vw,36px);
  font-weight:700;
  letter-spacing:-.03em;
}

.industry-body p{
  margin:0;
  font-size:18px;
  color:#3d423d;
  max-width:780px;
}

.services{
  margin-top:22px;
  font-size:12px;
  line-height:1.6;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#747a74;
}

.translation-services{
  background:#f4f4f1;
}

.translation-contact{
  padding:120px 0 132px;
  background:#171917;
  color:#fff;
}

.translation-contact .eyebrow{
  color:#b9c0b9;
}

.translation-contact h2{
  color:#fff;
  max-width:900px;
}

.translation-contact p{
  max-width:760px;
  font-size:21px;
  color:#d9ddd9;
  margin:30px 0 0;
}

.translation-cta{
  display:inline-block;
  margin-top:34px;
  color:#fff;
  border-bottom:1px solid #fff;
  padding-bottom:5px;
  font-weight:600;
}

html[lang="ja"] .translation-hero h1{
  line-height:1.03;
  font-size:clamp(48px,6vw,88px);
}

html[lang="ja"] .translation-motion .motion-source{
  letter-spacing:-.04em;
}

@media(max-width:900px){
  .translation-hero-grid,
  .translation-split,
  .experience-head,
  .industry{
    grid-template-columns:1fr;
    gap:34px;
  }
  .translation-motion{
    min-height:180px;
    padding-top:0;
  }
  .industry{
    gap:18px;
  }
}

@media(max-width:760px){
  .translation-page .links{
    gap:10px;
    font-size:12px;
  }
  .translation-hero{
    min-height:auto;
    padding:68px 0 56px;
  }
  .translation-hero-grid{
    gap:28px;
  }
  .translation-motion{
    min-height:150px;
  }
  .motion-source,
  .motion-words{
    font-size:clamp(36px,12vw,54px);
  }
  .translation-principle,
  .translation-services,
  .translation-approach,
  .translation-experience,
  .translation-contact{
    padding:76px 0;
  }
  .approach-grid{
    grid-template-columns:1fr;
    margin-top:38px;
  }
  .approach-grid article{
    padding:30px 26px 34px;
  }
  .experience-head{
    margin-bottom:45px;
  }
}

@media(prefers-reduced-motion:reduce){
  .motion-words span{
    animation:none;
  }
  .motion-words span:not(:first-child){
    display:none;
  }
}


/* v33: unified light translucent top bar */
header,
.home header,
.translation-page header,
.inquiry-page header{
  position:sticky !important;
  top:0 !important;
  z-index:50 !important;
  background:rgba(244,245,243,.82) !important;
  color:var(--ink) !important;
  border-bottom:1px solid rgba(23,25,23,.28) !important;
  backdrop-filter:blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.08) !important;
  opacity:1 !important;
}

header nav,
.home header nav,
.translation-page header nav,
.inquiry-page header nav{
  height:72px;
}

header .brand-logo,
.home header .brand-logo,
.translation-page header .brand-logo,
.inquiry-page header .brand-logo{
  filter:none !important;
}

header .tag,
header .tag-sep,
header .links,
header .links a,
.home header .tag,
.home header .tag-sep,
.home header .links,
.home header .links a{
  color:var(--ink) !important;
}

header .links a[aria-current="page"]{
  font-weight:700;
}

/* Smart inquiry */
.inquiry-page{
  background:#fafaf8;
}

.inquiry-hero{
  padding:92px 0 72px;
  border-bottom:1px solid var(--line);
  background:#fff;
}

.inquiry-hero h1{
  font-size:clamp(52px,7vw,100px);
  line-height:.92;
  max-width:900px;
}

.inquiry-hero p{
  font-size:clamp(19px,1.8vw,24px);
  max-width:720px;
  color:#454a45;
  margin:28px 0 0;
}

.inquiry-main{
  padding:82px 0 120px;
}

.inquiry-layout{
  display:grid;
  grid-template-columns:minmax(220px,.34fr) minmax(0,1fr);
  gap:7vw;
  align-items:start;
}

.topic-panel{
  position:sticky;
  top:104px;
  display:grid;
  gap:1px;
  background:#d7d8d4;
  border:1px solid #d7d8d4;
}

.topic-card{
  appearance:none;
  border:0;
  background:#fff;
  color:var(--ink);
  text-align:left;
  padding:25px 24px 26px;
  cursor:pointer;
  font:inherit;
  transition:background .18s ease,color .18s ease;
}

.topic-card span{
  display:block;
  font-size:11px;
  letter-spacing:.14em;
  color:#858a85;
  margin-bottom:14px;
}

.topic-card strong{
  display:block;
  font-size:24px;
  line-height:1;
  letter-spacing:-.025em;
}

.topic-card em{
  display:block;
  font-size:13px;
  line-height:1.45;
  font-style:normal;
  color:#747974;
  margin-top:8px;
}

.topic-card:hover,
.topic-card.is-active{
  background:#171917;
  color:#fff;
}

.topic-card:hover span,
.topic-card:hover em,
.topic-card.is-active span,
.topic-card.is-active em{
  color:#c7ccc7;
}

.inquiry-form-wrap{
  max-width:820px;
}

.inquiry-context{
  min-height:170px;
  margin-bottom:42px;
}

.inquiry-context h2{
  font-size:clamp(38px,4.5vw,62px);
  line-height:1;
  margin-bottom:20px;
}

.inquiry-context p{
  font-size:19px;
  max-width:700px;
  color:#4b504b;
}

.smart-inquiry{
  display:grid;
  gap:28px;
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px 24px;
}

.smart-inquiry label > span{
  display:block;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:650;
  margin-bottom:8px;
  color:#555b55;
}

.smart-inquiry input[type="text"],
.smart-inquiry input[type="email"],
.smart-inquiry input[type="tel"],
.smart-inquiry input[type="file"],
.smart-inquiry select,
.smart-inquiry textarea{
  width:100%;
  border:1px solid #c8cac6;
  background:#fff;
  color:var(--ink);
  padding:14px 15px;
  border-radius:0;
  font:inherit;
  outline:none;
}

.smart-inquiry textarea{
  resize:vertical;
  min-height:120px;
}

.smart-inquiry input:focus,
.smart-inquiry select:focus,
.smart-inquiry textarea:focus{
  border-color:#171917;
  box-shadow:0 0 0 1px #171917;
}

.topic-fields{
  display:grid;
  gap:24px;
  padding:30px;
  background:#f0f0ed;
  border:1px solid #dedfda;
}

.topic-fields[hidden]{
  display:none !important;
}

.check-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
}

.check-row label{
  font-size:14px;
  color:#444944;
}

.check-row input{
  margin-right:6px;
}

.privacy-check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:13px;
  color:#606560;
}

.privacy-check > span{
  text-transform:none !important;
  letter-spacing:0 !important;
  font-weight:400 !important;
  margin:0 !important;
}

.submit-button{
  appearance:none;
  border:0;
  background:#171917;
  color:#fff;
  padding:17px 24px;
  font:inherit;
  font-weight:650;
  cursor:pointer;
}

.submit-button:hover{
  background:#303430;
}

.form-note{
  max-width:680px;
  margin:14px 0 0;
  font-size:12px;
  line-height:1.55;
  color:#777c77;
}

@media(max-width:980px){
  header .links{
    gap:16px;
  }
  .inquiry-layout{
    grid-template-columns:1fr;
    gap:42px;
  }
  .topic-panel{
    position:static;
    grid-template-columns:repeat(3,1fr);
  }
}

@media(max-width:760px){
  header nav,
  .home header nav,
  .translation-page header nav,
  .inquiry-page header nav{
    height:66px;
  }

  header .links{
    gap:9px;
    font-size:11px;
  }

  .inquiry-hero{
    padding:62px 0 50px;
  }

  .inquiry-main{
    padding:50px 0 78px;
  }

  .topic-panel{
    grid-template-columns:1fr;
  }

  .form-grid{
    grid-template-columns:1fr;
  }

  .topic-fields{
    padding:22px 18px;
  }
}


/* v34: letterpress hero for Translation */
.translation-page .translation-hero{
  position:relative;
  min-height:68vh;
  padding:96px 0 0;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
  background:#171917;
  color:#fff;
}

.translation-page .translation-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:url("translation-hero.webp");
  background-size:cover;
  background-position:center 48%;
  filter:grayscale(.40) sepia(.06) contrast(1.03) brightness(.95);
  transform:scale(1.015);
}

.translation-page .translation-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg,
      rgba(10,10,10,.36) 0%,
      rgba(10,10,10,.20) 38%,
      rgba(10,10,10,.04) 66%,
      rgba(10,10,10,0) 100%),
    linear-gradient(to top,
      rgba(10,10,10,.42) 0%,
      rgba(10,10,10,.08) 48%,
      rgba(10,10,10,0) 100%);
}

.translation-page .translation-hero-grid{
  display:block;
  width:min(calc(100% - 48px),var(--max));
  margin:0 auto;
  padding:0 0 34px;
  align-self:flex-end;
}

.translation-page .translation-hero-copy{
  max-width:880px;
}

.translation-page .translation-hero .eyebrow{
  color:rgba(255,255,255,.82);
  margin-bottom:18px;
}

.translation-page .translation-hero h1{
  color:#fff;
  max-width:880px;
  text-shadow:0 2px 16px rgba(0,0,0,.22);
}

.translation-page .translation-hero p{
  color:rgba(255,255,255,.94);
  max-width:720px;
  text-shadow:0 1px 10px rgba(0,0,0,.24);
}

.translation-page .translation-hero .translation-hero-bridge{
  color:#fff;
  max-width:660px;
}

.translation-page .translation-motion{
  display:none;
}

@media(max-width:760px){
  .translation-page .translation-hero{
    min-height:74vh;
    padding:74px 0 0;
  }

  .translation-page .translation-hero::before{
    background-position:58% center;
    filter:grayscale(.40) sepia(.06) contrast(1.03) brightness(.95);
  }

  .translation-page .translation-hero::after{
    background:
      linear-gradient(to top,
        rgba(10,10,10,.55) 0%,
        rgba(10,10,10,.32) 50%,
        rgba(10,10,10,.06) 100%);
  }
}


/* v35: identical navigation treatment on every page */
header .links a,
header .links a[aria-current="page"],
.home header .links a,
.translation-page header .links a,
.inquiry-page header .links a{
  font-weight:400 !important;
}

header .links a:hover{
  opacity:.68;
}


/* v36: current-page navigation pill */
header .links a[aria-current="page"],
.home header .links a[aria-current="page"],
.translation-page header .links a[aria-current="page"],
.inquiry-page header .links a[aria-current="page"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 12px;
  border-radius:999px;
  background:#171917 !important;
  color:#fff !important;
  opacity:1 !important;
  font-weight:500 !important;
  line-height:1;
}

header .links a[aria-current="page"]:hover{
  background:#000 !important;
  color:#fff !important;
  opacity:1 !important;
}

@media(max-width:760px){
  header .links a[aria-current="page"]{
    padding:6px 9px;
  }
}


/* v37: Kamui Misaki video hero on About */
.about-page .about-video-hero{
  position:relative;
  min-height:64vh;
  padding:68px 0 52px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
  background:#31404a;
  color:#fff;
  border-bottom:1px solid rgba(23,25,23,.22);
}

.about-page .about-hero-video{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
  /* Keep the rock formations and sacrifice the less-important left side. */
  object-position:72% center;
  background:#31404a;
}

.about-page .about-hero-overlay{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg,
      rgba(11,15,18,.58) 0%,
      rgba(11,15,18,.40) 38%,
      rgba(11,15,18,.15) 68%,
      rgba(11,15,18,.05) 100%),
    linear-gradient(to top,
      rgba(11,15,18,.55) 0%,
      rgba(11,15,18,.14) 55%,
      rgba(11,15,18,.08) 100%);
}

.about-page .about-hero-inner{
  position:relative;
  z-index:1;
}

.about-page .about-video-hero .eyebrow,
.about-page .about-video-hero h1,
.about-page .about-video-hero .about-intro{
  color:#fff !important;
  text-shadow:0 1px 12px rgba(0,0,0,.28);
}

.about-page .about-video-hero h1{
  max-width:900px;
}

.about-page .about-video-hero .about-intro{
  max-width:720px;
  font-size:clamp(18px,1.7vw,23px);
  line-height:1.5;
}

@media(max-width:760px){
  .about-page .about-video-hero{
    min-height:60vh;
    padding:48px 0 34px;
  }

  .about-page .about-hero-video{
    object-position:78% center;
  }

  .about-page .about-hero-overlay{
    background:
      linear-gradient(to top,
        rgba(11,15,18,.80) 0%,
        rgba(11,15,18,.48) 56%,
        rgba(11,15,18,.10) 100%);
  }
}

/* Respect reduced-motion: use the supplied still frame instead. */
@media(prefers-reduced-motion:reduce){
  .about-page .about-hero-video{
    display:none;
  }

  .about-page .about-video-hero{
    background-image:url("kamuimisaki-poster.webp");
    background-size:cover;
    background-position:72% center;
  }
}


/* v38: tighter About video hero + bottom-left copy */
.about-page .about-video-hero{
  min-height:54vh !important;
  padding:0 !important;
  display:flex !important;
  align-items:flex-end !important;
}

.about-page .about-hero-video{
  object-position:72% 42% !important;
}

.about-page .about-hero-inner{
  width:min(calc(100% - 48px),var(--max));
  margin:0 auto;
  padding:0 0 34px !important;
  align-self:flex-end !important;
}

@media(max-width:760px){
  .about-page .about-video-hero{
    min-height:52vh !important;
  }

  .about-page .about-hero-video{
    object-position:right 38% !important;
  }

  .about-page .about-hero-inner{
    width:min(calc(100% - 30px),var(--max));
    padding-bottom:26px !important;
  }
}

/* About-page adjectives use the same palette as the Home-page stories */
.about-page .value-tenacious strong{
  color:#772014;
}

.about-page .value-creative strong{
  color:#F2C14E;
}

.about-page .value-engaged strong{
  color:#1F363D;
}

.about-page .value-humble strong{
  color:#717744;
}


/* v39: About hero begins immediately beneath navigation */
.about-page main.about{
  padding-top:0 !important;
}

/* Keep the normal bottom spacing for the About page content. */
.about-page .about-video-hero + .wrap{
  padding-top:0;
}

@media(max-width:760px){
  .about-page main.about{
    padding-top:0 !important;
  }
}


/* Contact page: use the Verbium red for the selected inquiry type. */
.topic-card.is-active{
  background:var(--accent) !important;
  border-color:var(--accent) !important;
  color:#fff !important;
}

.topic-card.is-active span,
.topic-card.is-active em{
  color:rgba(255,255,255,.78) !important;
}


/* Home hero: workshop/prototyping photograph */
.home .hero::before{
  background-image:url("female-inventor-working-new-creation.jpeg") !important;
  background-size:cover !important;
  background-position:right right !important;
  opacity:1 !important;
   filter:grayscale(1) contrast(.92);

}

/* Preserve strong readability at lower left while allowing the photograph to show. */
.home .hero::after{
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.75) 0%,
      rgba(255,255,255,.00) 40%,
      rgba(255,255,255,.0) 75%,
      rgba(255,255,255,0) 100%) !important;
}

@media(max-width:760px){
  .home .hero::before{
    background-size:cover !important;
    background-position:58% center !important;
    opacity:1 !important;

  }


}


/* Mobile: remove the Home-page hero background image entirely. */
@media(max-width:760px){
  .home .hero::before{
    display:none !important;
    background-image:none !important;
  }

  .home .hero::after{
    display:none !important;
    background:none !important;
  }

  .home .hero{
    background:#fff !important;
  }
}


/* Mobile: compact Home hero around its text content. */
@media(max-width:760px){
  .home .hero{
    min-height:auto !important;
    height:auto !important;

  }

  .home .hero-inner{
    align-self:auto !important;
  }
}


/* v40: Home hero — caliper artwork on white, right aligned. */
.home .hero{
  background:#fff !important;
}

.home .hero::before{
  display:block !important;
  background-image:url("caliper-2.webp") !important;
  background-size:cover;
  background-repeat:no-repeat !important;

  background-position:center right !important;
  opacity:1 !important;
  filter:none !important;
}



/* v43: split Home hero image and introductory copy */
.home .home-image-hero{
  position:relative;
  min-height:58vh !important;
  padding:0 !important;
  display:block !important;
  overflow:hidden;
  isolation:isolate;
  background:#fff !important;
}

/* White editorial introduction immediately below the image */
.home .home-intro{
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:58px 0 68px;
}

.home .home-intro-inner{
  width:min(calc(100% - 48px),var(--max));
  margin:0 auto;
}

.home .home-intro .eyebrow{
  margin-bottom:18px;
  color:var(--muted);
}

.home .home-intro h1{
  max-width:none;
  margin:0;
  color:var(--ink);
  font-size:clamp(48px,6.4vw,92px);
  line-height:.94;
  letter-spacing:-.055em;
}

.home .home-intro p{
  max-width:1080px;
  margin:24px 0 0;
  color:#3e423e;
  font-size:clamp(17px,1.55vw,21px);
  line-height:1.52;
}

.home .home-intro .hero-bridge{
  max-width:1080px;
  margin-top:14px;
  color:var(--ink);
  font-size:16px;
  font-weight:600;
  line-height:1.5;
}

html[lang="ja"] .home .home-intro h1{
  font-size:clamp(46px,5.8vw,84px);
  line-height:1.02;
}

/* Now that text no longer overlays the image, allow the hero image to remain
   visible on mobile and simply crop with the viewport. */
@media(max-width:760px){
  .home .home-image-hero{
    min-height:42vh !important;
    height:auto !important;
    padding:0 !important;
  }

  .home .home-image-hero::before{
    display:block !important;
  }

  .home .home-intro{
    padding:36px 0 42px;
  }

  .home .home-intro-inner{
    width:min(calc(100% - 30px),var(--max));
  }

  .home .home-intro .eyebrow{
    margin-bottom:14px;
  }

  .home .home-intro h1{
    font-size:clamp(42px,12vw,62px);
    max-width:100%;
  }

  html[lang="ja"] .home .home-intro h1{
    font-size:clamp(40px,11vw,58px);
  }

  .home .home-intro p{
    max-width:100%;
    margin-top:20px;
    font-size:16px;
  }

  .home .home-intro .hero-bridge{
    max-width:100%;
    margin-top:12px;
    font-size:14px;
  }
}


/* v44: image-only Home hero — no readability wash now that copy is below */
.home .home-image-hero::after{
  display:none !important;
  content:none !important;
  background:none !important;
}

/* Let the workbench photograph occupy the entire hero area. */
.home .home-image-hero::before{
  display:block !important;
  inset:0 !important;
  background-image:url("caliper-2.webp") !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  opacity:1 !important;
  filter:none !important;
}

@media(max-width:760px){
  .home .home-image-hero::after{
    display:none !important;
  }

  .home .home-image-hero::before{
    display:block !important;
    background-size:cover !important;
    background-position:center center !important;
  }
}


/* Shared navigation: equal link boxes regardless of language or current page. */
header nav.site-nav{height:72px; gap:24px; position:relative;}
header .site-nav .nav-brand{display:flex; align-items:center; flex-shrink:0;}
header .site-nav .links{display:flex; align-items:center; gap:6px; font-size:14px;}
header .site-nav .links a,
header .site-nav .links a[aria-current="page"]{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:10px 12px; margin:0; line-height:1.4;
  white-space:nowrap; border-radius:999px; text-decoration:none;
  font-weight:400 !important;
}
header .site-nav .links a:focus-visible,
header .site-nav .nav-toggle:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
header .site-nav .nav-toggle{
  display:none; align-items:center; justify-content:center; flex-direction:column;
  gap:5px; width:44px; height:44px; padding:10px; border:1px solid var(--line);
  border-radius:6px; background:transparent; color:var(--ink); cursor:pointer;
}
header .nav-toggle span{display:block; width:22px; height:2px; background:currentColor;}
header .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
header .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
header .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media(max-width:1100px){
  header nav.site-nav{height:auto; min-height:66px; flex-wrap:wrap; gap:0;}
  header .site-nav .tag{display:none;}
  header .site-nav .links{width:100%; flex-direction:column; align-items:stretch; gap:6px; padding:10px 0 16px;}
  header .site-nav .links a, header .site-nav .links a[aria-current="page"]{justify-content:flex-start; padding:10px 14px;}
  header .site-nav.nav-ready .nav-toggle{display:flex;}
  header .site-nav.nav-ready .links{display:none;}
  header .site-nav.nav-ready.is-open .links{display:flex; max-height:calc(100dvh - 82px); overflow-y:auto;}
}

/* Display the complete Nagano artwork in monochrome alongside the historical images. */
.home .story-image.nagano img{border:1px solid #000; border-radius:0; box-shadow:none; filter:grayscale(1); height:auto; object-fit:contain;}
@media(max-width:760px){
  .translation-page .translation-hero-grid{width:min(calc(100% - 30px),var(--max)); padding-bottom:26px;}
}

/* Keep the supplied wordmark at the established width without letterboxing. */
header .site-nav .brand-logo{max-height:none; height:auto;}

/* Hero copy is inset from the hero edge, independent of the centred content wrap. */
.translation-page .translation-hero > .translation-hero-grid,
.about-page .about-video-hero > .about-hero-inner{
  width:calc(100% - 48px);
  max-width:none;
  margin:0 24px;
  padding:0 0 34px !important;
  align-self:flex-end !important;
  text-align:left;
}
@media(max-width:760px){
  .translation-page .translation-hero > .translation-hero-grid,
  .about-page .about-video-hero > .about-hero-inner{
    width:calc(100% - 30px);
    margin:0 15px;
    padding-bottom:26px !important;
  }
}

.about-page .about-video-hero .about-intro{margin-bottom:0;}

/* Smaller hero download on narrow screens. */
@media(max-width:760px){
  .home .home-image-hero::before{background-image:url("caliper-2-mobile.webp") !important;}
}

/* Keep the same quieter italic explanation throughout the story transition. */
.story-grid > div:nth-child(2) > h2{
  font-size:clamp(29px,3.57vw,51px);
  font-style:italic;
}
.about-page .about-video-caption{
  margin:14px auto 0;
  font-size:14px;
  line-height:1.5;
  color:var(--muted);
}

/* Mobile interior heroes: compact media above white copy on black. */
@media(max-width:760px){
  .translation-page .translation-hero,
  .about-page .about-video-hero{
    --mobile-hero-height:clamp(220px,44svh,380px);
    display:block !important;
    min-height:0 !important;
    height:auto;
    padding:0 !important;
    background:#000;
    color:#fff;
  }
  .translation-page .translation-hero::before{
    position:relative;
    display:block;
    inset:auto;
    z-index:0;
    height:var(--mobile-hero-height);
    transform:none;
  }
  .translation-page .translation-hero::after,
  .about-page .about-hero-overlay{display:none}
  .about-page .about-hero-video{
    position:relative;
    inset:auto;
    z-index:0;
    display:block;
    width:100%;
    height:var(--mobile-hero-height);
  }
  .translation-page .translation-hero > .translation-hero-grid,
  .about-page .about-video-hero > .about-hero-inner{
    position:relative;
    width:100%;
    max-width:none;
    margin:0;
    padding:32px 20px 40px !important;
    background:#000;
    color:#fff;
  }
  .translation-page .translation-hero :is(h1,p,.eyebrow),
  .about-page .about-video-hero :is(h1,p,.eyebrow){
    color:#fff !important;
    text-shadow:none;
  }
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){
  .about-page .about-hero-video{display:none}
  .about-page .about-video-hero::before{
    content:"";
    display:block;
    height:var(--mobile-hero-height);
    background:url("kamuimisaki-poster.webp") right 38%/cover no-repeat;
  }
}

/* About: caption belongs to the film, including when mobile copy sits below it. */
.about-page .about-hero-media{
  position:absolute;inset:0;margin:0;z-index:0;
}
.about-page .about-hero-video{
  position:absolute;inset:0;z-index:0;height:100%;
  object-position:72% center !important;
}
.about-page .about-hero-overlay{z-index:1}
.about-page .about-hero-media .about-video-caption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  width:100%;max-width:none;margin:0;padding:12px 24px;
  background:rgba(0,0,0,.86);color:#fff;
  font-size:12px;line-height:1.5;text-shadow:none;
}
.about-page .about-video-hero > .about-hero-inner{
  padding-bottom:92px !important;
}
@media(max-width:760px){
  .about-page .about-hero-media{
    position:relative;inset:auto;height:var(--mobile-hero-height);
  }
  .about-page .about-hero-video{object-position:right center !important}
  .about-page .about-hero-media .about-video-caption{
    padding:10px 15px;font-size:11px;
  }
  .about-page .about-video-hero > .about-hero-inner{
    padding:32px 20px 40px !important;
  }
}
@media(prefers-reduced-motion:reduce){
  .about-page .about-video-hero{background:#000}
  .about-page .about-video-hero::before{display:none}
  .about-page .about-hero-media{
    background:url("kamuimisaki-poster.webp") 72% center/cover no-repeat;
  }
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){
  .about-page .about-hero-media{background-position:right center}
}

/* Give the About qualities a little more prominence. */
.about-page .value strong{font-size:23px;line-height:1.35;}

/* Balance the About copy's lower inset with its horizontal inset. */
@media(min-width:761px){
  .about-page .about-video-hero{
    display:grid !important;
    grid-template-rows:1fr auto;
  }
  .about-page .about-hero-media{display:contents}
  .about-page .about-hero-media .about-video-caption{
    position:relative;inset:auto;grid-row:2;
  }
  .about-page .about-video-hero > .about-hero-inner{
    grid-row:1;padding-bottom:24px !important;
  }
}
@media(max-width:760px){
  .about-page .about-video-hero > .about-hero-inner{padding-bottom:20px !important;}
}
@media(min-width:761px) and (prefers-reduced-motion:reduce){
  .about-page .about-video-hero{
    background:url("kamuimisaki-poster.webp") 72% center/cover no-repeat;
  }
}

/* Slim current-page pill while retaining the full navigation tap target. */
body header .site-nav .links a[aria-current="page"],
body header .site-nav .links a[aria-current="page"]:hover{
  position:relative;isolation:isolate;background:transparent !important;
}
body header .site-nav .links a[aria-current="page"]::before{
  content:"";position:absolute;inset:6px 0;z-index:-1;
  background:#171917;border-radius:999px;pointer-events:none;
}
body header .site-nav .links a[aria-current="page"]:hover::before{background:#000}

/* Natural, left-aligned body copy in both languages. */
html[lang] main p{text-align:left;text-justify:auto;hyphens:none;}

/* Shared language control: real links work with or without JavaScript. */
header .language-selector{position:relative;flex-shrink:0;font-size:14px;line-height:1.4;margin-left:8px;}
header .language-selector summary{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;list-style:none;padding:6px 10px;border-radius:8px;box-sizing:border-box;}
header .language-selector summary::-webkit-details-marker{display:none;}
header .language-selector summary:focus-visible,header .language-options a:focus-visible{outline:2px solid currentColor;outline-offset:3px;}
header .language-options{position:absolute;right:0;top:100%;min-width:155px;padding:6px;background:#141a17;color:#fff;border:1px solid #67716a;border-radius:10px;box-shadow:0 8px 28px #0004;z-index:100;}
body header .links .language-options a{display:flex!important;align-items:center;min-height:44px;padding:8px 12px!important;margin:0!important;border:0!important;border-radius:6px;color:#fff!important;background:transparent!important;white-space:nowrap;text-decoration:none;box-sizing:border-box;}
body header .links .language-options a:hover,body header .links .language-options a[aria-current="true"]{background:#ffffff20!important;}
body header .links .language-options a[aria-current="true"]::after{content:"✓";position:static;margin-left:auto;padding-left:12px;}
@media(max-width:760px){header .language-selector{margin:6px 0 0;width:100%;}header .language-options{position:static;box-shadow:none;margin-top:4px;}}
/* Finnish needs room for longer words without stretching word spacing. */
html[lang="fi"] main :is(h1,h2,h3,p,.feature-word,.cap-word){overflow-wrap:break-word;}
html[lang="fi"] main p{text-align:left;hyphens:none;}

html[lang="fi"] .tag{white-space:nowrap;}
@media(min-width:761px) and (max-width:1200px){html[lang="fi"] header .tag{display:none;}}

@media(min-width:761px) and (max-width:1100px){header .language-selector{margin:6px 0 0;width:100%;}header .language-options{position:static;box-shadow:none;margin-top:4px;}}
html[lang="fi"] .translation-split > *{min-width:0;}
@media(max-width:760px){html[lang="fi"] .translation-principle h2{font-size:clamp(26px,7vw,38px);}}

/* UrsiQ naming note within the product story. */
.ursiq-name-note{margin:36px 0;padding:28px;border-left:3px solid #d7ac00;background:#f3f5f3}
.ursiq-name-note h3{font-size:26px;line-height:1.2;margin:0 0 20px}
.ursiq-name-note a{text-decoration:underline;text-underline-offset:4px}
@media(max-width:760px){.ursiq-name-note{padding:22px 18px}}

/* Tenacious Red, with the same frosted finish as UrsiQ. */
body header,body.home header,body.translation-page header,body.inquiry-page header,body footer{
 background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.025) 58%,rgba(255,255,255,.01)),#772014 !important;
 color:#fff !important;opacity:1 !important;
 border-bottom:1px solid rgba(190,193,190,.65) !important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 2px 7px rgba(17,21,19,.055);
}
@supports ((backdrop-filter:blur(16px)) or (-webkit-backdrop-filter:blur(16px))){
 body header,body.home header,body.translation-page header,body.inquiry-page header,body footer{
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.025) 58%,rgba(255,255,255,.01)),rgba(119,32,20,.94) !important;
  backdrop-filter:blur(16px) saturate(115%) !important;-webkit-backdrop-filter:blur(16px) saturate(115%) !important;
 }
}
body header .tag,body header .tag-sep,body header .links,body header .links a,body header .site-nav .nav-toggle{color:#fff !important;}
body header .site-nav .nav-toggle{border-color:rgba(255,255,255,.5);}
body header .site-nav .links a:focus-visible,body header .site-nav .nav-toggle:focus-visible{outline-color:#fff;}
body footer{border-top:1px solid rgba(190,193,190,.65);border-bottom:0 !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 -2px 7px rgba(17,21,19,.055);}
@media(prefers-reduced-transparency:reduce){
 body header,body.home header,body.translation-page header,body.inquiry-page header,body footer{background:#772014 !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
}

/* White navigation details against Tenacious Red. */
body header .site-nav .tag,body header .site-nav .tag-sep,
body header .site-nav .links,body header .site-nav .links a,
body header .site-nav .language-selector,body header .site-nav .nav-toggle,
body footer .footer-row,body footer a{color:#fff !important;}
body header .site-nav .links a[aria-current="page"],
body header .site-nav .links a[aria-current="page"]:hover{color:var(--accent) !important;}
body header .site-nav .links a[aria-current="page"]::before,
body header .site-nav .links a[aria-current="page"]:hover::before{background:#fff;}
body header .site-nav .language-options{background:var(--accent);border-color:rgba(255,255,255,.65);}